:root {
    /* colors */
      --primary-color: #0e17af; 
      --secondary-color: #00edff; 
      --tertiary-color: #fff; 
      --fourth-color: #e84e1b;  
      --fifth-color: #343a40;  
    /* containers */
      --container-color-primary: #fff;
      --container-color-secondary: #01adce;
      --container-color-tertiary: #eceff1;
      --container-color-fourth-color: #2c5e7f;
      --container-color-fifth-color: #407da4;
    
    /* Tipografías */
      --primary-font: 'Roboto', sans-serif;
      --secondary-font: 'Cabin', sans-serif;
      --tertiary-font: 'SUSE', sans-serif;
      --fourth-font: 'Poppins', sans-serif;
    /* Tamaños de letra */
      --font-size-small: 0.875rem; /* 14px */
      --font-size-medium: 1rem; /* 16px */
      --font-size-large: 1.25rem; /* 20px */
      --font-size-xlarge: 1.5rem; /* 24px */
      --font-size-icons: 4rem; /* 64px */
    }
    
    

/*  */
/*  */
/*  */
/* ! proceso Admiusion html nuevo */
/*  */
/*  */
/*  */



body {
    overflow-x:hidden;
  }
  
  
  
  
  /* logo css header */
 
.header{
  padding-left: 10px;
  padding-right: 10px;
  }


  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /** hero */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  /*  */
  
.hero{
    /* background-color: var(--container-color-secondary); */
    background-size: cover;
    background-position: center;
    height: 100vb;
    margin-top: 110px;
  }
.cards{
    display: flex;
    height: 100vh;
    justify-content:space-between;
    animation: aparecer 1s ease-in-out;

}
.info-card-full{
    background-color: var(--container-color-fourth-color);
    height: 100%;
    width: 50%;
    transition: all 1s ease-in-out; 
    display: flex;
    align-items:center;
    justify-content:center;
    flex-direction: center;
    
}
.info-card-full:hover{
    width: 60%;
}
.info-card-full h1{
    color: var(--secondary-color);
    font-weight: 800;
    font-size: var(--font-size-xlarge);
    font-family: var(--primary-font);
}
.info-card-full p{
    font-size: var(--font-size-small);
    font-family: var(--tertiary-font);
    color: var(--tertiary-color);
    font-weight: 700;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.info-card-full:hover p{
    opacity: 1;
    font-size: var(--font-size-medium);

}
.info-card-full img{
    animation: respirar 5s infinite ease-in-out;

}
.cards-mid{
    height: 100vh;
    width: 50%;
    display: flex;
    flex-direction: column;
    transition: all 1s ease-in-out; 
}
.info-card-mid{
    display: flex;
    height: 50%;
    width: 100%;
    background-color: var(--container-color-fifth-color);

}

.cards-mid:hover{
    width: 60%;
}
.text-info{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 1s ease-in-out; 
    margin-left: 40px;
}
.text-info h1{
    /* color: var(--secondary-color); */
    font-family: var(--fourth-font);
    transition: all 1s ease-in-out; 
}
.text-info p{
    color: var(--tertiary-color);
    font-weight: 600;
    font-family: var(--tertiary-font);
    font-style: italic;
    opacity: 0;
    transition: all 1s ease-in-out; 

}
.img-info{
    width: 0%;
    border-radius: 30px;
    opacity: 0.6;
    margin: 10px;
    background-color: var(--container-color-primary);
    visibility: hidden;
    transition: all 1s ease-in-out; 
    display: flex;
    justify-content: center;
    align-items: center;


}
.info-card-mid:hover .img-info, .info-card-mid:hover .text-info ,.info-card-mid:hover .text-info p{
width: 100%;
visibility: visible;
text-align: left;
opacity: 1;
}
.text-info-card{
  padding: 50px; 
  transition: all 1s ease-in-out;   
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
}
.text-info-card h1{
  text-align:center;
  transition: all 1s ease-in-out; 
  color: var(--tertiary-color);
  font-family: var(--tertiary-font);
  font-style:oblique;
  font-weight: 200;
}
.logos-card{
  font-size: var(--font-size-icons);
  flex-direction: row;
  /* background-color: var(--container-color-primary); */
  border-radius: 20px;
  opacity: 0;
  /* color: white; */
  text-align: center;
  transition: all 1s ease-in-out; 

}
.text-info-card:hover .logos-card{
  opacity: 1;
  /* color: var(--container-color-fifth-color); */
  color: white;
  justify-content: center;
  transition: all 1s ease-in-out; 
  animation: respirar 5s infinite ease-in-out;
}

/* -------------------------- */
.why{
  margin-top: 100px;
  margin-bottom: 100px;
}

.section-title{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  /* background-color: red; */
}
.section-title h2{
background-color: var(--container-color-secondary);
border-radius: 10px;
color: var(--tertiary-color);
font-family: var(--primary-font);
padding: 10px;
}
.section-title p{
font-family: var(--secondary-fontl);
font-size: 20px;
font-weight: 400;
/* background-color: red; */
}
/* ----------------------------- */

/* -------------------------------------------------------- */

/* Proceso de admision */
.section-title button{
  background-color:var(--container-color-fifth-color);
  color: white;
  border: none;
  width: 200px;
  font-size: 30px;
  font-weight: 800;
  font-family: var(--secondary-font);
  transition: all 0.5s ease-in-out;
  
}


.proceso-admision{
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 50px;
  padding-bottom: 50px;
}
.service-item{
  padding: 30px;
  transition: all .5s ease-in-out; 

}
.card-body-rq{
  background-color: var(--container-color-fifth-color);
  margin: 10px;
  padding: 10px;
  transition: all 0.5s ease-in-out;
  display: flex;
  align-items: center;
}
.card-body-rq h3{
  color: white;
  font-weight: 800;
  font-family: var(--tertiary-font);
}
.card-body-rq p{
  color: white;
  font-family: var(--fourth-font);
  font-weight: 200;
}
.card-body-rq img{
  width: 150px;
}
.card-body-rq:hover{
  background-color: var(--container-color-secondary);
  transform: scale(1.1);
}


.icon{
  font-size: var(--font-size-icons);
  color: white;
}
#icon1 span{
  background-color: #a6ecbf;
  padding: 10px;
  border-radius: 20px;
}
#icon2 span{
  background-color: #a2e0e2;
  padding: 10px;
  border-radius: 20px;
}
#icon3 span{
  background-color: #82c5f5;
  padding: 10px;
  border-radius: 20px;
}#icon4 span{
  background-color: #b8b9e6;
  padding: 10px;
  border-radius: 20px;
}
.service-item h4{
  margin-top: 20px;
  font-family: var(--tertiary-font);
  font-weight: 300;
  color: var(--fifth-color);
}
.service-item p{
  font-family: var(--fourth-font);
  font-weight: 300;
   
}
.service-item:hover{
  transform: scale(1.1);
} 

.activo{
  margin-top: -30px;
  /* background-color:#d0d7e1; */
  background: linear-gradient(to top, #234f7e, white);
  /* border-radius: 200px 200px 0px 0px; */
  transition: all 1s ease-in-out;
  animation: fade-in 3s ease-in-out;

}
.container-img{
  /* background-color: #0c2539; */
  background: linear-gradient(to right, #879aab, #b2c0c9);
  /* width: 100%; */
  /* max-width: 400px; */
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  padding: 10px;
  /* max-width: 400px; */
  max-height: 500px;
  margin: 10px;

  /* transition: all 1s ease-in-out; */
}
.container-img img{
  /* max-width: 70%; */
  max-height: 380px;
  border-radius: 30px;
  max-width: 380px;
}
.container-info{
  width: 100%;
  background: linear-gradient(to right, #879aab, #b2c0c9);
  height: 400px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}
.container-info h2{
  font-size: 40px;
  font-family: var(--fourth-font);
  font-weight: 700;
  color: white;
}
.container-info p{
  font-size: 20px;
  font-family: var(--secondary-font);
  font-weight: 300;
  color: white;
}
@keyframes respirar {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.04);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes aparecer {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(0.5);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes fade-in {
    to {
        opacity: 1;
    }
}
@media (max-width: 768px) { /* Ajusta el punto de ruptura según tus necesidades */
    .cards {
        width: 100vh;
        flex-direction: column;
    }
  
    .info-card-full {
        order: 1; 
        width: 100%;
    }
  
    .cards-mid {
        order: 2; 
        width: 100%;
    }
  }


  /* footer */
  
/* footer */
.footer{
  margin-top: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: var(--container-color-tertiary);
  
}

.title-card h1{
  font-size: 30px;
  color: #37517e;
  font-weight: 700;
  margin-bottom: 10px;
}
.space{
  margin-top: 20px;
}
.info-card h5{
  color: #37517e;
  font-weight: 600;
}
.info-card strong{
  font-size: 18px;
  color: #37517e;
}
.info-card p{
  font-size: 15px;
  font-size: 16px;
}

.card-header {
  background: linear-gradient(to right, #1e90ff, #00d2ff);
  color: white;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}
.card {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn-custom {
  background: none;
  border: 2px solid #1e90ff;
  color: #1e90ff;
  border-radius: 20px;
  padding: 10px 20px;
  font-weight: bold;
}
.btn-custom:hover {
  background: #1e90ff;
  color: white;
}
.stronge{
  font-size: 30px;
  color: #37517e;
  font-weight: 800;
  margin-bottom: 10px;
  font-family: var(--tertiary-font);
}
.img-logo{
  width: 100%;
  text-align: center;
}
.img-logo img{
  max-width: 200px;
}

.img-jefe{
  display: flex;
  justify-content: center;
}
.img-jefe img{
  display: flex;
  max-width: 200px;
  justify-content: center;
}

#footer-links-useful{ 
  margin-bottom: 10px;
}
#footer-links-useful a{ 
  color: black;
  text-decoration: none;
  font-weight: 300;
}
#footer-links-useful i{ 
  color: rgb(55, 142, 255);
}

.footer-copyright{
  background: linear-gradient(to top, #323741, var(--container-color-tertiary) );
  color: white;
}