* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


/*Codigo de nosso desenvolvimento*/
header {
    width: 100%;
    min-height: 654px;
    /*buscar la manera de obtener las dimenciones de la pantalla*/
}

.body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #000000;
}


/*configuracion de toda la clase wave*/
.wave {
    position: relative;
    padding-top: 10rem;
    /*porsentaje de degradado en la imagen y porsentajes de configuracion de degradado*/
    background: linear-gradient(rgba(0, 0, 0, 70%), rgba(0, 0, 0, 100%)), url('../IMG/YO2.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}


.wave::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 275px;
    background: url('../IMG/wave.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.wave .h1 .p {
    text-align: center;
}

.navbar {
    background: linear-gradient(50deg, rgba(0, 0, 26, 1), rgba(78, 76, 107, 1));
    opacity: 85%;
}

/*Curriculo Virtual*/
.curriculoV {
    background: linear-gradient(0deg, rgb(255, 255, 255), rgba(123, 209, 255, 0.2), rgba(255, 255, 255));
}

.curriculoV .col-img {
    overflow: hidden;
    /* Evita que la imagen se salga del contenedor */
    transition: all 0.7s;
}

.curriculoV .col-img p {
    z-index: 1000;
    color: #000000;
}



.curriculoV .col-img img {
    height: 40%;
    width: 40%;
    opacity: 0.2;
    transition: all 0.7s;

}





.curriculoV .col-img .btn {
    background: linear-gradient(50deg, rgba(0, 0, 26, 1), rgba(78, 76, 107, 1));
    border: none;
    font-size: 14px;
    transition: all 0.8s;
}

.curriculoV .negrilla {
    color: #0D6EFD;
}

#IDtext {
    font-size: 20px;
    transition: all 0.3s;
}

#IDtext:hover {

    font-size: 26px;
}



/*cuando este en ID col en hover quiero que se cambio el color de UD buttton a ese*/
#IDCOL:hover #IDIMG {
    opacity: 1;
    transform: rotate(360deg);
    height: 60%;
    width: 60%;
    box-shadow: 0px 15px 30px rgb(77 86 222/30%);
}

#IDCOL:hover #IDBUTTON {
    rotate: -360deg;
    transition: all 0.8s;
    background: #0D6EFD;

}



.curriculoV .col-img .btn a {
    text-decoration: none;
    color: #fff;
}


.navbar .navbar-toggler {
    border: 2px solid #fff;
    transition: all 0.3s;

}


.navbar .navbar-toggler:hover {
    background: #77098b;
    transform: scale(1.1);
    transform: rotate(-360deg);
}

/*En todas las clases navbar va a editar todas las que tengan navbar_link*/
.navbar .nav-link {
    color: white;
    margin-right: 29px;
    transition: 0.2s;
}

/*en las etiquetas a que esten en navbar-link que se apliquen estas reglas cuendo enten en estado hover
el cursor encima de el.
Con este mismo codigo se aplican ya los cambios en wel codigo escrito arriba con la duracion de
nuestra transicion*/

a.nav-link:hover {
    padding-bottom: 3px;
    border-bottom: 2px solid white;
    color: #fff;
}

.btn-custom {
    border: 1.5px solid #fff;
    border-radius: 50px;
    color: #ffffff;
    background: none;
    padding: 8px 20px;
    font-weight: 500;
    text-decoration: none;
    transition: all 1s;
}

/*a.btn... si quisiera que se ajustara en todas las etiquetas que tengan la clase custom*/
.btn-custom:hover {
    text-decoration: none;
    color: white;
    background: #0D6EFD;
    border: 1.5px #fff;
}

/*Agregacion de actividades y creacion de una clase fixed manipulada por JS*/
.navbar-fixed {
    justify-content: center;
    align-items: center;
    background-color: rgb(28, 10, 75);
    padding-top: 0px;
    padding-bottom: 0px;
    transition: all 0.6s;
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}

/*Esto para generar de nuevo un evento que me deje de manera exacta como estaba si vuelvo al inicio*/
.navbar-fixedremove {
    color: #fff;
    padding-top: 8px;
    transition: all 0.6s;
    background: linear-gradient(50deg, rgba(0, 0, 26, 1), rgba(78, 76, 107, 1));
    box-shadow: none;
}

.btn-lg {
    background: rgba(0, 0, 26, 1);
}

/*Estilos de conoceme*/
section {
    padding: 20px 0;
}

.section-bg {

    background: linear-gradient(0deg, rgb(255, 255, 255), rgba(123, 209, 255, 0.2), rgba(255, 255, 255));
}

.about .img-1 {

    background: linear-gradient(120deg, rgb(255, 255, 255), rgb(78, 76, 107, 0.2), rgba(255, 255, 255))
}

.about .img-2 {

    background: linear-gradient(120deg, rgb(255, 255, 255), rgba(199, 199, 199, 0.2), rgb(255, 255, 255))
}



.section-title {
    text-align: center;
    padding-bottom: 60px;
    text-transform: uppercase;
}

.section-title h2 {
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(0, 0, 26, 1);
    height: 0;
    /* Ajusta según sea necesario */
    line-height: 80px;
    /* Igual a la altura de la etiqueta */
}

.about {
    background: linear-gradient(0deg, rgb(255, 255, 255), rgba(123, 209, 255, 0.2), rgba(255, 255, 255));
}

.about img {

    overflow: hidden;
    max-width: 300px;
}

/*Seccion conoceme*/




.about .member {

    padding: 20 px;
    border-radius: 5px;
    background: none;
    padding-bottom: 10px;
    transition: all 1s;

}

.about .member h4 {
    padding-top: 10px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 20px;
    color: #0D6EFD;
}

.about .member:hover {
    box-shadow: 0px 15px 30px rgba(0 0 26/ 100%);
    border-radius: 10%;
    transition: all 1s;
    background: rgba(0 0 26/ 100%);
    color: white;
}

.about .member .imgc {
    padding-left: 10px;
    padding-right: 10px;
}

.about .member .pic {
    width: 220px;
    border-radius: 10%;
    padding: 10px 10px 10px 10px;
}

.about .member span {

    display: block;
    font-size: 15px;
    padding-bottom: 0px;
    font-weight: 800;
}

.about .member p {
    margin: 5px 0 0 0;
    font-size: 14px;
}

.about .member a {
    transition: ease-in-out 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    width: 38px;
    height: 38px;
    border: 1px solid;
}

.about .member a:hover {
    background: #fff;
    color: #0D6EFD;
}

/*Services*/



.services .icon-box {
    padding: 33px 25px;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: 0.5s;
    height: 700px;
}

.services .col-lg-3 {
    padding-top: 2%;
}

.services .icon-box:hover {
    transition: all 0.2s;
    box-shadow: 0px 15px 30px rgb(77 86 222/30%);
}

.services .icon-box .icon i {
    color: orange;
    font-size: 43px;
}

.services .icon-box h4 {
    color: #0D6EFD;
}


.services .icon-box p {
    font-size: 14px;
}

.services .col-lg-3 .col-botton {
    transition: 0.2s;
}

.services .col-lg-3 .col-botton .btn {
    opacity: 0;
    font-size: 10px;
    color: #0D6EFD;
    background: #fff;
    transition: all 0.3s;

}

#ICONBOX-TRANSITION:hover #BTN-TRASITION {
    opacity: 1;
}

#ICONBOX-TRANSITION:hover #COLBTN-TRANSITION {
    padding: 10px;
}

#ICONBOX-TRANSITION:hover #IMG-TRASITION {
    padding-bottom: 10px;
    transform: scale(1.5);
}

.services .col-lg-3 .accordion {
    background: none;
    padding-top: 5px;

}

#elementostyle {
    color: #00a3f4;
    rotate: 180deg;
    padding: 0;
    transition: all 1s;
}



.services .col-lg-3 .accordion .card {
    background: #fff;
    border-top: 4px solid #7ad7ff;
    align-items: center;
    justify-content: center;
}


.services .col-lg-3 .accordion .card-header {

    background: #fff;
    width: 80%;
    overflow: hidden;
    transition: all 0.3s;
    margin-bottom: -1px;
}

#headingOne:hover #listone {
    padding-top: 20px;
}



.services .col-lg-3 .accordion .card .card-header .btn {
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    background-color: #00a3f4;
    color: #fff;
    font-size: 16px;
    opacity: 1;
    height: 20px;
    width: 100%;
    transition: all 0.3s;
    font-size: 12px;
}

.services .col-lg-3 .accordion .card .card-header .btn:hover {
    background: #fff;
    font-size: 14px;
    height: 40px;
    color: #003298;
}


.services .col-lg-3 .accordion .card .card-body {
    text-decoration: none;
    padding-top: 1px;
    color: #000000;
    font-size: 14px;
    background: #fff;
    margin-top: 1px;


}

.services .col-lg-3 .accordion .card .card-body a {
    transition: all 0.7s;
    color: #000000;
    width: 100%;


}

.services .col-lg-3 .accordion .card .card-body a:hover {
    text-decoration: none;
    color: #0078ce;
    transition: all 0.2s;
}

#ICONS {
    transition: all 0.6s;
}

#TEXT:hover+#ICONS {
    color: #0b00a3;

}

.accordeonPosition {
    margin-top: auto;
}

.services .col-lg-3 .accordion .card .card-body li {
    list-style: none;
    transition: all 0.3s;
    width: 100%;
}

.services .col-lg-3 .accordion .card .card-body i {
    transition: all 0.5s;
    color: #00a3f4;
}


.services .col-lg-3 .col-botton .btn:hover {
    background: rgb(51, 116, 255);
    color: #ffffff;
    font-size: 13px;
}

.services img {
    margin-bottom: 5px;
    width: 30px;
    height: 30px;
}

.subicons {
    height: 30px;
    width: 30px;
}

.services .row .img-arr {
    color: aqua;
    height: 100px;
    width: 100px;
    transition: all 0.3s;
}

.portfolio {
    background: linear-gradient(0deg, rgb(255, 255, 255), rgba(123, 209, 255, 0.2), rgba(255, 255, 255));
}

.portfolio .portfolio-container {
    align-items: center;

}

.portfolio img {
    height: 150px;
    width: 150px;
}

/*portafolio llamado por ID*/
.portfolio #portfolio-filters li {
    cursor: pointer;
    list-style: none;
    margin: 10px 5px;
    /*Abajo-arriba lados*/
    font-weight: 500;
    color: #0D6EFD;
    transition: all 0.7s;
    padding: 5px 20px;
    border-radius: 50px;
}

.portfolio #portfolio-filters li:hover,
.portfolio #portfolio-filters li.filter-active {
    background: #0D6EFD;
    color: #fff;
}

.portfolio ul {
    padding-left: 0px;
}



.portfolio .portfolio-item .portfolio-img img {
    transition: all 0.6s;
    width: 200px;
}

.portfolio .portfolio-item:hover .portfolio-img img {
    margin-top: 20px;
    padding: 10px 10px 10px 10px;
    transform: scale(1.9);
    overflow: hidden;
}



.portfolio .portfolio-item .portfolio-info {
    opacity: 0.7;
    position: relative;
    left: 12px;
    bottom: 0;
    right: 12px;
    transition: all 0.3s;
    background: rgba(0 0 26/ 100%);
    padding: 10px 15px;
    z-index: 1000;

}



.portfolio .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0px;
}

.portfolio .portfolio-item .portfolio-info p {
    color: #fff;
    font-size: 15px;
    margin-bottom: 0px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
    position: absolute;
    right: 40px;
    bottom: 0;
    font-size: 30px;
    top: calc(50%-28);
    color: #fff;
    transition: 0.4s;
    padding-right: 10px;
}

.portfolio .portfolio-item .portfolio-info .details-link {
    right: 10px;
}

.portfolio .portfolio-item .portfolio-info:hover {
    opacity: 1;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
    color: #000000;
}

.portfolio .container {
    padding-bottom: 40px;
}

iframe {
    max-width: 100%;
    padding-bottom: 20px;
}

footer {

    opacity: 85%;

    padding-top: 0px;
    transition: all 0.3s;
}

/*Aminaciones de zoom para barra final*/
#copirigt p {
    transition: all 2s;
}

#IDbarraFinal:hover #copirigt p {

    transition: all 2s;
    font-size: 20px;

}



.Barrafinal::before {
    top: 0px;
    content: "";
    position: relative;
    width: 100%;
    border-top: 4px solid;
    border-right: 0;
    animation: border 3s linear infinite;
    display: block;
    overflow: hidden;
}

@keyframes border {
    0% {
        transform: translateX(0);
        width: 50%;
        color: #382a69;
    }

    50% {
        transform: translateX(100%);
        width: 50%;
        color: #00eeff;
    }


    100% {
        transform: translateX(0%);
        width: 50%;
        color: #382a69;
    }




}

.contacto {
    background: linear-gradient(0deg, rgb(255, 255, 255), rgba(123, 209, 255, 0.1), rgba(255, 255, 255));
}

.contacto .d-grid .btn {
    background: #393939;
}

.contacto .d-grid {
    font-size: 12px;
}

.contacto .d-grid i {
    color: #00a3f4
}

.Barrafinal {

    background: rgb(255, 255, 255);
    transition: all 0.3s;

}

.Barrafinal:hover {

    transition: all 0.3s;
    background: rgb(77 86 222/30%);

}

.Barrafinal img {
    height: 20px;
    left: 20px;
    padding-right: 5px;
}

.Barrafinal .cuadrados {
    position: relative;
}


footer a {
    text-decoration: none;
    transition: all 0.5;
}

footer a:hover {
    color: #470296;

}

footer li {
    transition: all 0.2s;
}

footer li:hover {
    padding-bottom: 5px;
}

footer p {
    text-decoration: none;
    color: #000000;
}

footer h4 {

    color: rgba(0, 0, 26, 1);
}

footer .social {

    background: #0D6EFD;
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding-bottom: 5px;
    padding-left: 0px;
    transition: all 0.3s;
}

footer .social svg {
    color: #fff;
}

footer .social:hover {
    width: 40px;
    height: 40px;
    transform: rotate(360deg);
    padding: 3px 3px 3px 3px;
}

/*Animacion boton de regrsar arriba*/
.go-top {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    background: #0D6EFD;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    /*z index para que aparezca encima*/
    transform: rotate(-90deg);
    transition: all 0.4s;
}

.go-top:hover {
    color: #fff;
    transform: rotate(270deg) scale(2);


}

/*barra de navegacion para moviles*/

.navbar-toggler {
    padding: .10rem .45rem;
    border: 1px solid #fff;

}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler i.bi-list {
    color: #fff;
    font-size: 1.6rem;
}

@media (max-width:992px) {

    /*aplicar solo a pantallas menores a 992px*/
    .navbar-collapse {
        padding-bottom: 20px;
    }

    .wave {
        padding-top: 6rem;
    }
}

@media (max-width:500px) {

    /*aplicar solo a pantallas menores a 992px*/
    .text-center-xs {
        display: list-item;

        text-align: center;

    }

    .text-center-xs img {

        width: 426px;

    }
}

/* .card {
    position: relative;
    background: rgb(248, 248, 248);
    width: 300px;
    height: 400px;
} */

/* .card .span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(50deg, rgba(0, 0, 26, 1), rgba(78, 76, 107, 1));
    animation: animate-1 2s linear infinite;
}

@keyframes animate-1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
} */


@import url("https://fonts.googleapis.com/css?family=Montserrat:700");


.curriculoV .cube {
    position: relative;
    top: 100%;
    left: 100%;
    width: 2px;
    height: 2px;
    border: solid 1px #003298;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    -webkit-animation: cube 8s ease-in forwards infinite;
    animation: cube 8s ease-in forwards infinite;
    background-color: #fff700;
}

.Barrafinal .cube {
    position: relative;
    top: 100%;
    left: 100%;
    width: 2px;
    height: 2px;
    border: solid 1px #003298;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    -webkit-animation: cube 4s ease-in forwards infinite;
    animation: cube 4s ease-in forwards infinite;
    background-color: #6cc9ff;
}

.cube {

    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #003298;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    -webkit-animation: cube 12s ease-in forwards infinite;
    animation: cube 12s ease-in forwards infinite;
}

.cube:nth-child(2n) {
    border-color: #0051f4;
}

.cube:nth-child(2) {
    border-color: #00a3f4;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
    left: 10%;
    top: 10%;
}

.cube:nth-child(3) {
    border-color: #473d95;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    left: 30%;
    top: 60%;
}

.cube:nth-child(4) {
    border-color: #00eaff;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    left: 35%;
    top: 40%;
}

.cube:nth-child(5) {
    border-color: #1100ff;
    -webkit-animation-delay: 0.01s;
    animation-delay: 0.01s;
    left: 85%;
    top: 25%;

}

.cube:nth-child(6) {
    border-color: #470296;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    left: 90%;
    top: 90%;
}

@-webkit-keyframes cube {
    from {
        -webkit-transform: scale(0) rotate(0deg) translate(-50%, -50%);
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(25) rotate(960deg) translate(-50%, -50%);
        transform: scale(25) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}