@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@1,700&family=Poppins:wght@200;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

*{
  /* `margin: 0;` establece el margen de todos los elementos en 0, lo que significa que no habrá
    espacio entre el elemento y su padre o elementos vecinos. */
  margin: 0;
  padding: 0;
   box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #06113B;
  color: white;
  padding: 5px

  
}

.navbar a {
	font-family: "Poppins", sans-serif;
	color: white;
	padding-left: 35px;
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
	justify-items: center;
	align-items: center;
}

.navbar a:hover{ 
  color: rgb(246, 217, 209);
  opacity: 1;  
  font-weight: 900;
} 

.identidad{/*IMAGEN CENTRAL*/
  display: flex;
 /* display: flex;
  flex-wrap: 10;*/
  width: 100%;
  height: 100vh;
  
   /*border: 10px solid orange;*/
  background: rgba(26, 6, 59, 0.233);
  background-image: url(../img/Fondo6.jpg);
  background-repeat: no-repeat;
  background-size:cover;
  
}

/* .fondo4{ */
  /* width: 100%; */
  /* height: 100vh; */
  /*border: 10px solid purple;*/
  /* position: relative; */
/* } */
.MisionV {/*Contenedor Mision y Vision*/
  /* margin-top: 10%; */
  font-family: 'Poppins', sans-serif;
 /* border: 10px solid RED;*/
  position: relative;
  /* background-color: #06113b3e;*/
}

.Mision {
  display: flex;
  flex-direction: column;
  justify-content:flex-end;
  align-items: end;
  position: relative;
  top: 80px;
  left: 800px;
  padding: 5px;
  font-family: 'Poppins', sans-serif;
  color: #06113B;
 /* border: 10px solid rgb(123, 255, 0);*/
  position: relative;
 /*  background-color: #0683a63e;*/
 width: 500px;
}
.Mision h2{
  font-weight: bolder;
}

.Mision P{
  font-weight: 500;
  text-align: justify;
  font-size: 15px;

}

.Vision {
  display: flex;
  flex-direction: column;
  /* justify-content:flex-end; */
  align-items: end;
  position: relative;
  top: 210px;
  left: 660px;
  padding: 5px;
  font-family: 'Poppins', sans-serif;
  color: #06113B;
 /* border: 10px solid rgb(123, 255, 0);*/
  position: relative;
 /*  background-color: #0683a63e;*/
 width: 480px;
}

.Vision h2{
  font-weight: bolder;
}
.Vision P{
  font-weight: 500;
  text-align: justify;
  font-size: 16px;
}

.index {

  font-family: 'Lobster Two', cursive;
}

h1 {
  font-family: 'Lobster Two', cursive;
  font-size: 55px;
  text-align: center;
  margin-top: 5px;
  color: rgb(242, 237, 244);
  margin-left: 50px;
}

main {

  width: 100%;
  height: 100%;
  margin-bottom: auto;
  font-family: 'poppins', sans-serif;


}

.title {
  text-align: center;
  margin-top: 60px;
}

.container-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.box {
  width: 400px;
  height: 250px;
  margin: 10px;
  padding: 20px;
  border: 2px solid rgb(98, 5, 157);
  border-radius: 14px;
  text-align: center;
  margin-top: 100px;
  position: relative;
}

.box img {
  width: 60%;
  transition: all 400ms;
}

.box h2 {
  font-size: 16px;
  margin-top: 10px;
  transition: all 500ms;
}

.box .container-p {
  width: 100%;
  height: 200px;
  position: absolute;
  left: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0px 10px;
  border-radius: 0px 0px 14px 14px;
}

.box p {
  font-size: 14px;
  color: #7a7a7a;
  opacity: 0;
  transform: translateY(150px);
  transition: all 600ms;
}

/*Efecto Hover*/

.box:hover {
  background: #fff;
}

.box:hover h2 {
  transform: translateY(-30px);
}

.footer1 {
  display:grid;
  grid-template-columns: 35% auto auto auto;
  font-family: 'poppins', sans-serif;
  color: white;
  background-color: #06113B;
  width: 100%;
  height: 150px;

  padding: 20px 10px 30px 20px;
  margin:auto
      
}

.footer2 {
 
  color: white;
  background-color: #06113B;
  width: 100%;
  height: 40px;
 
  padding: 20px 10px 30px 20px;
  margin:auto
      
}

.footer2 h4{
  font-size: 11px;
  text-align: center;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 400;
  
}

footer .look{
  font-family: 'Lobster Two', cursive;
  text-decoration: none;
  font-size: 35px;
  color:white;
}
footer h2{
  font-family: 'poppins', sans-serif;
  font-size: 13px;
}

footer h3{
  font-family: 'poppins', sans-serif;
  font-size: 17px;
  font-weight: bold;
}

.lado2{
  margin-top: 20px;
}


/*ICONOS*/
.lado1 a {
  display:inline-block;
  margin-top: 2%;
  text-decoration: none;
  font-size: 20px;
  color:white;
  margin-right: 10px;
  margin-bottom: 10px;
}


.lado2 a {
  display:flex;
  margin-top: 1%;
  text-decoration: none;
  font-size: 10px;
  color:white;
  margin-right: 10px;
  margin-bottom: 10px;
}


.integrantes{
  padding: 15px;
}
.nosotros .grupo h3 {
   font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4F216D;
  color: rgb(228, 226, 233);
  width: 100%;
  height: 8vh;
  font-family: 'poppins', sans-serif;
  font-weight: bolder;
}
.nosotros .grupo .integrantes {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.nosotros .grupo .integrantes .card {
  width: 20vw;
  height: 100%;
}
.nosotros .grupo .integrantes .card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.nosotros .grupo .integrantes .card-body {
  background-color:rgba(170, 0, 255, 0.213);
   color: rgb(28, 10, 83);
  border-bottom-left-radius: 10px;
 
  width: 100%;
}
.nosotros .grupo .integrantes .card-body h5 {
  font-family: 'poppins', sans-serif;
  font-size: 20PX;
  font-weight:600;
  
}

.nosotros .grupo .integrantes .card-body h6 {
  font-family: 'poppins', sans-serif;
  font-size: 1rem;
  color: #fff;
  font-weight:200;
  background-color: #4F216D;
  border-radius: 5PX;
}

.valores h3 {
  font-size: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4F216D;
  color: rgb(228, 226, 233);
  width: 100%;
  height: 8vh;
  font-family: 'poppins', sans-serif;
  font-weight: bolder;
  
}

/*CARROUSEL*/
.dt h2 {
  font-size: 50px;

  justify-content: center;
  align-items: center;
  background-color: #4F216D;
  color: rgb(228, 226, 233);
  width: 100%;
  height: 8vh;
  font-family: 'poppins', sans-serif;
  font-weight: bolder;
  
}

section{/*SECTION CARROUSEL*/
 
  text-align: center;
  background: #f3f1f1;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 5%;

}

.bx{
  position: relative;
  height: 300px;
  width: 200px;
  transform-style: preserve-3d;
  animation:animate 52s linear infinite;
}

.bx div{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  transform-style: preserve-3d;
  transform-origin: center;
  transform: rotateY(calc(var(--v) * 45deg)) translateZ(300px);
  -webkit-box-reflect:below 0px linear-gradient(transparent,transparent,#004) ;
}

@keyframes animate{
  0%{
    transform: perspective(1500px) rotateY(0deg);
  }
  100%{
    transform: perspective(1500px) rotateY(-360deg);
  }
  
  }

.bx div img{
  position: relative;
  height: 100%;
  width:100%;
  object-fit: cover;
}

.spin{
  animation:spin 3s linear infinite;
}


@keyframes spin{
  0%{
      filter: hue-rotate(0deg);
      transform: perspective(1500px) rotateY(0deg);
      -webkit-box-reflect:below 0px linear-gradient(transparent,transparent,#004) ;

  }
  100%{
      filter: hue-rotate(360deg);
      transform: perspective(1500px) rotateY(360deg);
      -webkit-box-reflect:below 0px linear-gradient(transparent,transparent,#004) ;

  }
  
  }


/*''''' Pagina de contacto '''''*/
/*''''' Pagina de contacto '''''*/
/*''''' Pagina de contacto '''''*/
/*''''' Pagina de contacto '''''*/

.contactenos main {
  display: flex;
  font-family: 'poppins', sans-serif;
  color: white;
  flex-direction: row;
  justify-content: space-around;
  height: 100%;
 
}

.contactenos main .formularioAtencion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  background-color: #00A195;
 
}
.contactenos main .formularioAtencion h2{
  color: rgb(252, 246, 246);
  font-family: 'poppins', sans-serif;
  font-weight: bold;
  margin-bottom: 40px;
}

.contactenos main .direccionOficina {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  padding: 10px 0 20px 0;
}

.contactenos main .formularioAtencion form {
  display: flex;
  color:#fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  text-align: center;
  font-family: 'poppins', sans-serif;
}

.contactenos main .formularioAtencion form label {
  font-size: 15px;
  margin-bottom: 10px;
  text-shadow: none;
} 

.contactenos main .formularioAtencion form input {
  width: 130%;
  outline: none;
  font-family: 'poppins', sans-serif;
  border: none;
  padding-left: 10px;
  padding-right: 10px;
 margin-bottom: 15px;
}
.contactenos main .formularioAtencion form textarea {
outline: none;
border: none;
padding: 5px 20px;
background: linear-gradient(5deg, rgba(232, 228, 234, 0.865), rgba(255, 255, 255, 0.2));

}
.contactenos main .formularioAtencion form button {
  margin-top: 2rem;
  width: 10rem;
  color: white;
  padding: 10px 0;
  font-weight: bolder;
  border-radius: 20px;
  background-color: #06113B;
}

.direccionOficina{
width: 100vw;
right: 100vh;
justify-content: center;
align-items: center;
  background-image: url(../img/Fondo7.jpg);

}
/*
.contactenos footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 5px 10px 5px 10px;
  background-color: gray;
  line-height: normal;
  height: 5rem;
}

.contactenos footer .ladoDer p {
  height: 3px;
}*/

/* Pagina de cursos */
.cursos {
  display: flex;
  flex-direction: column;
}

.cursos nav {
  margin: 10px;
}

.cursos nav .dropdown-menu {
  margin-bottom: 100px;
}


.cursos .clasificacion .nav-tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border: none;
  background-color: gray;
  height: 40px;
}

.cursos .clasificacion ul .nav-item {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  font-weight: bolder;
  border: none;
}

.cursos .clasificacion ul .nav-item:hover {
  border: none;
  color: gray;
  background-color: white;
  border-top-left-radius: 50px;
  border-bottom-right-radius: 40px;
}

.cursos .clasificacion ul .nav-item .nav-link {
  color: rgb(41, 0, 57);
  border: none;
}

.cursos .clasificacion ul .nav-item .nav-link:hover {
  border: none;
  border-bottom: none; 
}

.cursos .clasificacion ul .nav-item .dropdown-menu.show {
  border: none;
  border-bottom: 10px solid blue;
}