:root {
    --Links: #336468c4;
    --LinksOpacity: #33646848;
    --1: rgba(212, 212, 212, 0.596);
    --2: #131642;
    --3: #4e4e4eef;
    --4: #e5e4e29c;
    --5: #f0f0f0b6;
    --6: #616161;
    --7: #363636;
    --8: #00000086;
    --9: #19a5afc4;
    --10: #3fb7c079;
    --11: #255555;
    --blackGradientBright: #1d1d1d86;
    --blackGradient: #000000da;
    --black: #000000;
    --whiteGradient: #ffffff3a;
    --whiteDarkerGradient: #ffffff7e;
    --white: #ffffff;
    --gold: rgba(66, 202, 168, 0.63);
    --goldGradient: rgba(66, 202, 168, 0.493);
    --platino: #E5E4E2;
    --platinoGradient: #e5e4e28f;
    --componentColorDown: linear-gradient(to bottom, var(--platino), var(--whiteDarkerGradient), var(--whiteGradient));
    --componentBlackGradientUp: linear-gradient(to top, var(--black), var(--blackGradientBright), var(--whiteGradient));
    --componentBlueGradient: linear-gradient(to top, var(--2), var(--blackGradientBright), var(--whiteGradient));
    --componentGoldGradient: linear-gradient(to top, var(--gold), var(--goldGradient), var(--whiteGradient));
    --componentPlatinumWithGoldGradient: linear-gradient(to top, var(--whiteGradient), var(--goldGradient), var(--whiteGradient));
    --componentPlatinumGradient: linear-gradient(to top, var(--platino), var(--platinoGradient), var(--whiteGradient));
    --componentPlatinoGradientDarkUp: linear-gradient(to top, var(--whiteGradient), var(--platinoGradient), var(--blackGradient));
    --componentPlatinoGradientDarkDown: linear-gradient(to bottom, var(--whiteGradient), var(--platinoGradient), var(--blackGradient), var(--black));
}

/*font-family: 'Alex Brush', cursive;*/


.hidden {
    display: none;
}

.closeModal {
    width: 3vw;
    position: absolute;
    top: 1vw;
    right: 1vw;
    cursor: pointer;
}

.modal-div {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    justify-items: center;
    align-content: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.modalContent {
    background-image: url("/img/Photo/backgroundModal.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    height: 50%;
    justify-items: center;
    text-align: center;
    color: white;
    padding-top: 4vw;

}

.modalContent h2 {
    font-size: 1vw;
    padding-bottom: 6vw;
}

.modalContent p {
    font-size: 1.5vw;
}

.modalTextContent a {
    color: white;
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .closeModal {
    width: 8vw;
}
    .modalContent {
        width: 80%;
        height: 80%;
        justify-items: center;
        text-align: center;
        color: white;
        padding-top: 24vh;
    }

    .modalContent h2 {
        font-size: 6vw;
        padding-bottom: 6vw;
    }

    .modalContent p {
        font-size: 5.5vw;
    }

}


html {
    background-color: var(--white);
    /* padding: 0vw 10vw; */
    background-image: url("/img/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #fff;
}

.theWholecontent {
    margin: 0 5vw 0 5vw;
}

div {
    box-sizing: border-box;
}

img {
    display: block;
}

.content {
    text-align: -webkit-center;
}

.hide {
    display: none;
}

.arrowWrap {
    display: none;
}

.portfolioNav {
    /* border-top-left-radius: 1vw; */
    /* border-top-right-radius: 1vw; */
    /* border-top: 0.1vw solid var(--platino); */
    border-bottom: var(--1) .4vw solid;
    /* padding: 3vw 0 0vw; */
    /* margin: 2vw 0 2vw 0; */
    /* background-image: var(--componentColorDown); */
    display: flex;
    /* height: 2vw; */
    background: var(--white);
    padding: 1vw;
    position: fixed;
    width: 101%;
    top: 0;
    z-index: 999;
}

.navLink {
    text-decoration: none;
    color: var(--7);
    font-size: 1.7vw;
    /* background-color: var(--Links); */
    padding: 0.3vw 1vw 0.3vw 1vw;
    /* border: 0.2vw solid var(--Links); */
    border-bottom: solid .3vw var(--8);
}

.navDownload {
    text-decoration: none;
    color: var(--Links);
    font-size: 1.4vw;
    /* background-color: var(--Links); */
    padding: 0.3vw 1vw 0.3vw 1vw;
    /* border: solid .2vw var(--8); */
    /* border-top: 0.2vw solid var(--Links); */
}

.navDownload:hover {
    box-shadow: 0px 0px 10px var(--9);
    border: solid .2vw var(--Links);
}

.titlePortfolioTextContent {
    color: var(--6);
    font-size: 2vw;
    display: none;
}

.titlePortfolioWrap {
    width: 23%;
    text-align: center;
}

.photoPresentation {
    width: 35%;
    text-align: -webkit-center;
    /* content-visibility: hidden; */
}

.profilePhoto {
    position: absolute;
    top: 5.5vw;
    left: 16vw;
    height: 16vw;
    margin: 0vw 0 0vw 0;
    /* filter: brightness(1.5); */
}

.goldNav {
    border-bottom: 0.3vw solid var(--Links);
    color: var(--Links);
    /* box-shadow: 0px 0px 10px var(--Links); */
    transition: box-shadow 0.2s ease-in-out;
}

.goldNav:hover {
    box-shadow: 0px 0px 10px var(--Links);
}

.hoverNavLink {
    transition: box-shadow 0.2s ease-in-out;
}

.hoverNavLink:hover {
    box-shadow: 0px 0px 10px var(--Links);
}

.interno {
    display: flex;
    /* margin: 0 0vw 0vw 11vw; */
}

.profile {
    border-bottom: 0.1vw solid var(--platino);
    text-align: center;
    padding: 3vw 0 3vw;
    margin: 2vw 0 2vw 0;
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
}

.univercidadEnfasis {
    margin: 2vw 0vw 2vw 0;
}

.additionalInfo {
    font-size: 2vw;
    color: var(--6);

    /* Efecto de sombra de texto para simular el borde */
    padding: 0.2vw 0 0 0vw;
}


.name {
    font-size: 2.7vw;
    text-align: center;
    color: var(--6);
    margin: 6vw 0 0 0vw;
}

.firstInfo {
    font-size: 1.8vw;
    color: var(--6);
    padding: 0.2vw 0 0 0vw;
}


.linkStudy {
    color: var(--Links);
    font-size: 1.7vw;
    text-decoration: none;
}

.linkStudy:hover {
    text-decoration: underline .1vw var(--Links);
}

.presentation {
    /* background-color: var(--1); */
    padding: 1vw 2vw 2vw 2vw;
    margin: 0 0 2vw 0;
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
}

.aboutme {
    text-align: center;
    font-size: 2vw;
    color: var(--3);
}

.softSkills {
    display: flex;
    flex-wrap: wrap;
    margin: 2vw 0 0 0;
}

.softSkillsText {
    font-size: 1.7vw;
    color: var(--6);
    width: 33%;
    margin: 0 0 1vw 0;
}

.welcomeText {
    font-size: 1.5vw;
    color: var(--3);
}

/* projects secction*/
.projectsIntroducction {
    border-bottom: 0.1vw solid var(--black);
    /* box-shadow: 0.1vw 0.1vw 9.1vw 0.1vw var(--5); */
    text-align: center;
    padding: 4vw 0;
    margin: 0vw 0 2vw 0;
    background-color: var(--componentBlackGradientUp);
}



/*import letter*/
.cursive {
    font-family: 'Alex Brush', cursive;
    font-size: 3.7vw;
    color: var(--6);
}

.buttomWrap {
    display: flex;
    justify-content: center;
    margin-top: 3vw;
}

.profileMoreButtom {
    font-size: 1.3vw;
    border-radius: 3vw;
    color: var(--black);
}

/*languages secction*/
.languages {
    font-size: 2vw;
    color: var(--7);
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    padding: 2vw;
}

.languagesTextContent {
    text-align: center;
    font-size: 1.5vw;
    display: flex;
}

.language {
    width: 50%;
}

.subSectionTitle {
    font-size: 2vw;
    color: var(--3);
}

/*--------------------Skills section*/
.skills {
    margin: 2vw 0 1vw 0vw;
    padding: 2vw 0 2vw 0;
    /* text-align: center; */
    /* background-color: var(--goldGradient); */
    /* azul gradiente */
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    border-top: none;
}

.skillsIcons {
    display: flex;
    height: 2vw;
}

/*--------------------icos*/
.landing__soft-skills-list--base>h3 {
    padding-top: 5px;
}

.landing__skills--base {
    padding-top: 1%;
    padding-bottom: 5%;
}

.landing__skill-icons--base {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 0% 5%;
    margin: 2vw 0 0 0;
}

.landing__skill-icons--base>div>h3 {
    color: var(--11);
    font-size: 1.7vw;
}

.landing__portfolio-description--base {
    padding: 0 5% 5%;
    font-size: 1.1rem;
}

.landing__portfolio-items--base {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.landing__portfolio--base {
    padding-top: 1%;
    padding-bottom: 5%;
}

.portfolio__container--base {
    font-size: 1.5rem;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: bolder;
    font-family: "Open-Sans", sans-serif;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-icon {
    background: var(--componentPlatinumWithGoldGradient);
    width: 4vw !important;
    height: 1vw;
    border-radius: 50%;
    text-align: center;
    line-height: 1vw;
    vertical-align: middle;
    padding: 2vw;
    color: var(--white);
}

svg:not(:root).svg-inline--fa {
    overflow: visible;
}

/* .svg-inline--fa.fa-w-16 {
    width: 1em;
} */

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 5vw;
    overflow: visible;
    vertical-align: -0.125em;
}

/*--------------------Skills bar*/
.porcentationBarSection {
    margin: 2vw 0;
    text-align: center;
}

.porcentationBarText,
.othersSkillsText {
    color: var(--6);
    font-size: 2vw;
    margin: 0.7vw;
}

.progressContainer {
    position: relative;
    display: flex;
    margin: 1vw;
}

.progressBar {
    width: calc(100% - 4vw);
    height: 1vw;
    background-color: var(--platino);
}

.percentageText {
    line-height: 1vw;
    margin: 0 0 0 2vw;
    font-size: 2.2vw;
}

/*---------------Bar animation Section*/
.progressBarInnerCss {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerCss 3s infinite;
}


@keyframes progressBarInnerCss {
    0% {
        width: 0%;
    }

    100% {
        width: 57%;
    }
}

.progressBarInnerJs {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerJs 3s infinite;
}


@keyframes progressBarInnerJs {
    0% {
        width: 0%;
    }

    100% {
        width: 62%;
    }
}

.progressBarInnerJava {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerJava 3s infinite;
}


@keyframes progressBarInnerJava {
    0% {
        width: 0%;
    }

    100% {
        width: 42%;
    }
}

.progressBarInnerPython {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerPython 3s infinite;
}


@keyframes progressBarInnerPython {
    0% {
        width: 0%;
    }

    100% {
        width: 30%;
    }
}

.progressBarInnerCplusplus {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progresAnimacionCplusplus 3s infinite;
}


@keyframes progresAnimacionCplusplus {
    0% {
        width: 0%;
    }

    100% {
        width: 30%;
    }
}

.progressBarInnerNodeJs {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerNodeJs 3s infinite;
}


@keyframes progressBarInnerNodeJs {
    0% {
        width: 0%;
    }

    100% {
        width: 62%;
    }
}

.progressBarInnerMongoDB {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerMongoDB 3s infinite;
}


@keyframes progressBarInnerMongoDB {
    0% {
        width: 0%;
    }

    100% {
        width: 80%;
    }
}

.progressBarInnerAzureDataBase {
    height: 100%;
    background-color: var(--goldGradient);
    width: 100%;
    animation: progressBarInnerAzureDataBase 3s infinite;
}


@keyframes progressBarInnerAzureDataBase {
    0% {
        width: 0%;
    }

    100% {
        width: 50%;
    }
}

.progressBarInnerpromptEngineer {
    height: 100%;
    background-color: var(--goldGradient);
    width: 40%;
    animation: progressBarInnerpromptEngineer 3s infinite;
}


@keyframes progressBarInnerpromptEngineer {
    0% {
        width: 0%;
        /* Establecer el valor actual de la barra en lugar de 0% */
    }

    100% {
        width: 75%;
    }
}


/*education secction*/
.educationWrap {
    font-size: 2vw;
    color: var(--7);
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    padding: 2vw;
}

.subSectionTitleEducation {
    font-size: 2vw;
    color: var(--3);
}

.educationTextContent {
    text-align: center;
    font-size: 1.5vw;
    /* display: flex; */
}

.titleEducation {
    margin: 2vw 0 1vw 0;
}

.education {
    width: 100%;
    color: var(--6);
    font-size: 2vw;
}

.educationTitlesSection {
    display: flex;
    width: 51vw;
    height: 26vw;
    margin: 2vw 0;
}

.educationTitlesSection img {
    width: 0px;
    flex-grow: 1;
    object-fit: cover;
    opacity: .8;
    transition: .5s ease;
}

.educationTitlesSection img:hover {
    cursor: crosshair;
    width: 300px;
    opacity: 1;
    filter: contrast(120%);
}

/*Refences*/
.referencesWelcome {
    border-bottom: 0.1vw solid var(--platino);
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    display: flex;
    justify-content: space-between;
}

.advertisementReferenceText {
    color: var(--6);
    font-size: 1.3vw;
    margin: 6vw 0 0 0;
}

.referencesWrap {
    /* box-shadow: 0.1vw 0.1vw 9.1vw 0.1vw var(--5); */
    text-align: center;
    padding: 4vw 0 2vw;
    margin: 2vw 0 2vw 0;
    background-image: var(--componentBlackGradientUp);
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
}

.cartReference {
    position: relative;
    width: 22vw;
    transition: all .3s ease;
    margin: 2vw 2.3vw;
}

.cartReference img:first-child {
    box-shadow: 0 60px 60px -60px rgba(128, 128, 128, 0.5);
    border-radius: 4px;
    object-fit: cover;
    width: 100%;
}

.cartReference img:last-child {
    position: absolute;
    border-radius: 4px;
    width: 20vw;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(25%);
    transition: .3s ease;
    opacity: 0;
}

.cartReference:hover {
    transform: perspective(250px) rotateX('10deg') translateY(-5%) translateZ(0);
}

.cartReference::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0) 95%);
    opacity: 0;
    transition: all .3s ease;
    border-radius: 4px;
}

.cartReference:hover::before {
    opacity: 1;
    /* Aplica el desenfoque */
    filter: blur(0.1vw);
    /* Aplica la perspectiva y la rotación */
    transform: perspective(60vw) skew(-6deg);
}

.cartReference:hover img:last-child {
    opacity: 1;
    transform: translateY(5%);
}

.cartReference:hover img:first-child {
    /* Aplica el desenfoque */
    filter: blur(0.1vw);
    /* Aplica la perspectiva y la rotación */
    transform: perspective(60vw) skew(-6deg);
}

.cartWrap {
    position: relative;
}

.cartWrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.cartWrap:hover .overlay {
    opacity: 1;
}

.overlay {
    padding: 16vw 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.referencesTextTitle {
    color: white;
    font-size: 1.5vw;
    margin: 3vw 0 1vw;
}

.referencesTextName {
    color: white;
    font-size: 2.3vw;
    margin: 1vw;
}

.referencesText {
    color: white;
    font-size: 1vw;
    padding: 0.3vw 1vw;
    pointer-events: all;

}


.linkedinReference {
    color: var(--Links);
    font-size: 1.5vw;
    pointer-events: all;
}

/*
----------------
-------Seccion de contacto
---------------
*/
.sendMail {
    width: 40%;
}

.contactsSendMail {
    border-bottom: 0.1vw solid var(--white);
    padding: 0vw 0 1vw;
    margin: 6vw 0 2vw 0;
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--whiteDarkerGradient);
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    display: flex;
    /* flex-direction: row-reverse; */
}

.InformationContactWrap {
    /* display: flex; */
    place-items: center;
    width: 60%;
}

.ContactInformationTitle {
    font-size: 2vw;
    color: var(--7);
}

.myInfoWrap {
    width: 60%;
    display: flex;
    padding: 1vw 4vw;
    margin: 2vw;
    font-size: 1.7vw;
    text-align: center;
    color: var(--7);
}

.sendEmail {
    vertical-align: middle;
    color: var(--7);
    height: 2vw;
    font-size: 2vw;
    margin: 0 2vw 0 0;
}

.sendEmailPleaseText {
    font-size: 1.3vw;
    color: var(--7);
}

.contactMeText {
    vertical-align: middle;
    color: var(--7);
    font-size: 2vw;
}

.contactsIcos {
    border-top: .1vw solid var(--6);
    padding: 0vw 0 0vw;
    margin: 0vw 0 0vw 0;
    padding: 2.5vw 0 0 0;
    display: flex;
}

.imgLinkContact {
    width: 25%;
}

/*
----------------
-------para todas las animaciones
---------------
*/
.imgIcosContanct {
    height: 7vw;
    position: relative;
    z-index: 2;
}

/*
----------------
-------animacion Whatsapp
---------------
*/
.contactWhatsapp {
    position: relative;
}

.contactWhatsapp:before,
.contactWhatsapp:after {
    content: "";
    position: absolute;
    top: 0vw;
    left: 7.7vw;
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: #00e676;
    opacity: 0;
    animation: ondasWhatsapp 1.7s infinite;
}

.contactWhatsapp:before {
    animation-delay: .7s;
}

.contactWhatsapp::after {
    animation-delay: 1.1s;
}


@keyframes ondasWhatsapp {
    0% {
        transform: scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*
----------------
-------animacion Github
---------------
*/

.contactGithub {
    position: relative;
}

.contactGithub:before,
.contactGithub:after {
    content: "";
    position: absolute;
    top: 0vw;
    left: 7.7vw;
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: var(--black);
    opacity: 0;
    animation: ondasGithub 1.7s infinite;
}

.contactGithub:before {
    animation-delay: .7s;
}

.contactGithub::after {
    animation-delay: 1.1s;
}

@keyframes ondasGithub {
    0% {
        transform: scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*
----------------
-------animacion linkedin
---------------
*/

.contactLinkedin {
    position: relative;
}

.contactLinkedin:before,
.contactLinkedin:after {
    content: "";
    position: absolute;
    top: 0vw;
    left: 7.7vw;
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: #0274b3;
    opacity: 0;
    animation: ondasLinkedin 1.7s infinite;
}

.contactLinkedin:before {
    animation-delay: .7s;
}

.contactLinkedin::after {
    animation-delay: 1.1s;
}

@keyframes ondasLinkedin {
    0% {
        transform: scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*
----------------
-------animacion Gmail
---------------
*/

.contactGmail {
    position: relative;
}

.contactGmail:before,
.contactGmail:after {
    content: "";
    position: absolute;
    top: 0vw;
    left: 7.7vw;
    width: 7vw;
    height: 7vw;
    border-radius: 50%;
    background-color: #435964;
    opacity: 0;
    animation: ondasGmail 1.7s infinite;
}

.contactGmail:before {
    animation-delay: .7s;
}

.contactGmail::after {
    animation-delay: 1.1s;
}

@keyframes ondasGmail {
    0% {
        transform: scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/*
----------------
--------Estilos para enviar el correo
---------------
*/
.emailForm {
    width: 100%;
    align-items: center;
}

.sendMailText {
    font-size: 1.5vw;
    color: var(--6);
    margin: .5vw 0;
}

.sendButtom {
    margin: 1vw 0 0 0;
    width: 5vw;
    font-size: 1vw;
    color: var(--black);
    background-color: var(--white);
    border: solid .2vw var(--7);
    border-radius: 10vw;
}

.cursiveBottom {
    font-family: 'Alex Brush', cursive;
    font-size: 1.5vw;
}

.sendButtom:hover {
    background-color: var(--goldGradient);
    color: var(--white);

}

.firstBoxContact,
.secondBoxContact {
    width: 68%;
    height: 2vw;
    border: solid 0.1vw var(--Links);
}

.textAreaContact {
    width: 64%;
    border: solid .1vw var(--gold);
    font-size: 1vw;
    text-align: center;
    font-family: 'Lobster', cursive;
    padding: 0.7vw;
    height: 1.7vw;
}

.firstBoxContact::placeholder,
.firstBoxContact[type="text" i],
.secondBoxContact::placeholder,
.secondBoxContact[type="email" i] {
    font-family: 'Lobster', cursive;
    font-size: 1vw;
    text-align: center;

}

.textAreaContact::placeholder,
.textAreaContact[type="text" i] {
    font-family: 'Lobster', cursive;
    text-align: center;

}

/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
Inicio de seccion de Proyectos */
.projectsWrap {
    background-image: linear-gradient(to top, var(--4), var(--whiteDarkerGradient), var(--whiteGradient));
    padding: 1vw 2vw;
    /* display: flex; */
    flex-wrap: wrap;
    justify-content: center;
    /* Centra horizontalmente los contenedores */
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    position: relative;
}

.projectLink {
    text-decoration: none;
    display: flex;
}

.projectsContainer {
    position: relative;
    background-color: var(--LinksOpacity);
    padding: 0vw;
    margin: 2vw 10vw;
    text-align: center;
    /* Centra el contenido dentro del contenedor */
}

.projectTitle {
    position: absolute;
    top: 3vw;
    width: 27%;
    /* Centra vertical y horizontalmente */
    z-index: 1;
    font-size: 3vw;
    color: var(--white);
    opacity: 1;
    transition: opacity 0.3s;
}

.projectDescription {
    width: 50%;
    padding: 2.5vw 0;
    font-size: 1.5vw;
    color: var(--black);
}

.projectsContainer:hover {
    border: 0.2vw solid var(--Links);
    box-shadow: 0 0 1vw var(--Links);
}

.projectsContainer:hover .projectTitle {
    z-index: -1;
    opacity: 0;
}

.miniatureProject {
    filter: blur(1.1px);
    height: 10vw;
    padding: 1vw;
}

.miniatureProject:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /* Ajusta el valor de opacidad y el color de fondo según tus preferencias */
    opacity: 1;
    transition: opacity 0.3s ease;
    /* Agrega una transición suave para el efecto hover */
}

.projectGo {
    filter: blur(0px);
    color: var(--Links);
    font-size: 4vw;
    margin: 4vw 0vw 0vw 1vw;
}

.projectGo:hover {
    filter: brightness(0) invert(1);
}

.projectsContainer:hover .miniatureProject {
    filter: blur(0vw);
}

.projectGoimg {
    filter: none;
    height: 10vw;
    padding: 1vw;

}

.projectsContainer:hover .projectGoimg {
    filter: brightness(0) invert(1);
}

/* Fin de seccion de proyectos 
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* Experience Secction*/

.experience {
    padding: 1vw 2vw 2vw 2vw;
    margin: 3vwv 0 2vw 0;
    background-image: var(--componentPlatinumGradient);
    box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
}

.intrText {
    font-size: 1vw;
    color: var(--8);
    margin: 5vw 0 0;
    width: 47vw;
}

.inf {
    text-align: center;
    font-size: 1vw;
    color: var(--7);
    padding: 0 20%;
}

.experienceMoreButtom {
    font-size: 1.3vw;
    border-radius: 3vw;
    color: var(--black);
    margin: 3vw 0 0 0;
}



.jobTitle {
    text-align: center;
    font-size: 1.7vw;
    color: var(--blackGradient);
    margin: 5vw 0 .5vw 0;
}

.enterpriseTitle {
    font-size: 2.1vw;
    color: var(--6);
    margin: 0 0 2vw;
}

/*End Experience secction*/
/*--------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
---------Adaptamos pantalla a mobile----------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
----------------------------------------------------------------------
-----------------------------------------------------------------------
----------------------------------------------------------------------*/
@media screen and (max-width: 767px) {

    .information,
    .projects,
    .experience,
    .references,
    .contacts {
        margin: 11vw 0 0 0;
    }

    .portfolioNavForMobile {
        position: fixed;
        top: 0vw;
        z-index: 10;
    }

    .navLink {
        display: block;
        text-align: -webkit-center;
        font-size: 6vw;
        background-color: var(--8);
        border: none;
    }

    .navDownload {
        display: block;
        text-align: -webkit-center;
        font-size: 6vw;
        background-color: var(--8);
        border: none;
    }

    .arrowWrap {
        display: block;
        text-align: -webkit-center;
        font-size: 4vw;
        background-color: var(--8);
        padding: 0vw 46vw;
    }

    .arrowIco {
        height: 8vw;
    }


    .switches {

        align-self: end;

        margin: 0vw 0vw;

    }

    .name {
        margin: 3vw 0 0;
        font-size: 8.3vw;
        text-align: center;
        color: var(--6);
    }

    .photoPresentation {
        text-align: -webkit-center;
        width: 100%;
    }

    .profilePhoto {
        height: 32vw;
        position: initial;
    }

    .goldNav {
        border-bottom: none;
        border-right: 2.7vw solid var(--gold);
        border-left: 2.7vw solid var(--gold);
        color: var(--gold);
    }

    .interno {
        display: grid;
        width: 100vw;
        margin: 0;
    }



    .firstInfo {
        font-size: 5.5vw;
        color: var(--6);
        padding: 0.2vw 0vw;
    }

    .profile {
        padding: 4vw 0 2vw;
        margin: 2vw 0 2vw 0;
        background-image: var(--componentBlackGradientUp);
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    }

    .additionalInfo {
        font-size: 4.3vw;
        padding: 0.8vw 0;
        color: var(--blackGradientBright);
        text-shadow: 1px 1px 0px var(--platino), -1px -1px 0 var(--platino), 1px -1px 0 var(--platino), -1px 1px 0 var(--platino);
    }

    .linkStudy {
        color: var(--Links);
        font-size: 3.8vw;
    }

    .inf {
        text-align: center;
        font-size: 5vw;
        color: var(--8);
        padding: 1vw 0vw;
    }

    .presentation {
        padding: 1vw 2vw 2vw 2vw;
        margin: 0 0 2vw 0;
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    }

    .aboutme {
        text-align: center;
        font-size: 5.6vw;
        color: var(--3);
    }

    .softSkillsText {
        font-size: 3vw;
        color: var(--6);
        width: 33%;
        margin: 0 0 1vw 0;
    }

    .welcomeText {
        font-size: 3.2vw;
    }

    .cursive {
        font-family: 'Alex Brush', cursive;
        font-size: 8vw;
    }

    .profileMoreButtom {
        font-size: 3vw;
    }

    .languages {
        text-align: center;
        font-size: 4vw;
        color: var(--7);
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
        padding: 2vw;
    }

    .languagesTextContent {
        text-align: center;
        font-size: 3.5vw;
        display: block;
    }

    .language {
        margin: 1.7vw 0;
        width: 100%;
    }

    .subSectionTitle {
        font-size: 4vw;
    }

    .skills {
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
        border-top: none;
    }

    .circle-icon {
        background: var(--componentPlatinumWithGoldGradient);
        width: 12vw !important;
        height: 1vw;
        border-radius: 50%;
        text-align: center;
        line-height: 1vw;
        vertical-align: middle;
        padding: 2vw;
        color: var(--white);
    }

    svg:not(:root).svg-inline--fa {
        overflow: visible;
    }

    /* .svg-inline--fa.fa-w-16 {
        width: 1em;
    } */

    .svg-inline--fa {
        display: inline-block;
        font-size: inherit;
        height: 10vw;
        overflow: visible;
        vertical-align: -0.125em;
    }

    .porcentationBarText,
    .othersSkillsText {
        font-size: 4vw;
    }

    .percentageText {
        line-height: 1vw;
        font-size: 3.7vw;
    }



    /*education secction*/
    .educationWrap {
        font-size: 2vw;
        color: var(--7);
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
        padding: 2vw;
        text-align: -webkit-center;
    }

    .subSectionTitleEducation {
        font-size: 4vw;
        color: var(--6);
    }

    .educationTextContent {
        text-align: center;
        font-size: 1.5vw;
        /* display: flex; */
    }

    .titleEducation {
        margin: 2vw 0 1vw 0;
    }

    .education {
        width: 100%;
        color: var(--6);
        font-size: 4vw;
    }

    .educationTitlesSection {
        display: flex;
        width: 64vw;
        height: 34vw;
        margin: 2vw 0;
    }

    .educationTitlesSection img {
        width: 0px;
        flex-grow: 1;
        object-fit: cover;
        opacity: .8;
        transition: .5s ease;
    }

    .educationTitlesSection img:hover {
        cursor: crosshair;
        width: 52vw;
        opacity: 1;
        filter: contrast(120%);
    }

    .referencesWelcome {
        border-bottom: 0.1vw solid var(--platino);
        padding: 1vw 0 3vw;
        margin: 2vw 0 2vw 0;
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
        border-bottom-left-radius: 1vw;
        border-bottom-right-radius: 1vw;
        display: block;
        text-align: -webkit-center;
    }

    .advertisementReferenceText {
        color: var(--6);
        font-size: 2.7vw;
        /* padding: 4vw 0 0 0; */
        width: 61vw;
    }

    .titlePortfolioWrap {
        display: none;
    }

    .cartReference {
        position: relative;
        width: 70vw;
        transition: all .3s ease;
        margin: 0vw 0vw 13vw;
    }

    .cartReference img:last-child {
        position: absolute;
        border-radius: 4px;
        width: 66vw;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        transform: translateY(25%);
        transition: .3s ease;
        opacity: 0;
    }



    .referencesTextTitle {
        color: white;
        font-size: 4.5vw;
        margin: 4vw 0 1vw;
    }

    .referencesTextName {
        color: white;
        font-size: 5.3vw;
        margin: 1vw;
    }

    .referencesText {
        font-size: 4vw;
        padding: 1.7vw 0;
        pointer-events: all;
        color: white;
    }

    .linkedinReference {
        color: var(--gold);
        font-size: 4vw;
        pointer-events: all;
    }

    .cartReference:hover::before {
        /* Aplica el desenfoque */
        opacity: 1;
        filter: blur(0.1vw);
        /* Aplica la perspectiva y la rotación */
        transform: perspective(60vw) skew(-6deg);
    }

    .cartReference:hover img:first-child {
        filter: blur(0.1vw);
        /* Aplica la perspectiva y la rotación */
        transform: perspective(60vw) skew(-6deg);
    }

    /*
----------------
-------Seccion de contacto
---------------
*/
    .sendMail {
        width: 100%;
        margin: 10vw 0 0 0;
    }

    .contactsSendMail {
        border-bottom: 0.1vw solid var(--white);
        padding: 0vw 0 1vw;
        margin: 2vw 0 2vw 0;
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--whiteDarkerGradient);
        border-bottom-left-radius: 1vw;
        border-bottom-right-radius: 1vw;
        display: block;
    }

    .InformationContactWrap {
        /* display: flex; */
        place-items: center;
        width: 100%;
    }

    .ContactInformationTitle {
        font-size: 10vw;
        color: var(--7);
    }

    .myInfoWrap {
        width: 100%;
        display: block;
        padding: 0;
        margin: 2vw 0;
        font-size: 5vw;
        text-align: -webkit-center;
        color: var(--7);
        text-align: center;
    }

    .sendEmail {
        vertical-align: middle;
        color: var(--7);
        height: 7vw;
        font-size: 2vw;
        margin: 0 2vw 0 0;
    }

    .sendEmailPleaseText {
        font-size: 4vw;
        color: var(--7);
        margin: 2.1vw 0 5.1vw;
    }

    .contactMeText {
        vertical-align: baseline;
        color: var(--7);
        font-size: 8vw;
    }

    .contactsIcos {
        border-top: .1vw solid var(--6);
        padding: 0vw 0 0vw;
        margin: 0vw 0 0vw 0;
        padding: 2.5vw 0 0 0;
        display: flex;
    }

    .imgLinkContact {
        width: 25%;
    }

    .contactsIcos {
        border-top: .1vw solid var(--6);
        padding: 0vw 0 3vw;
        margin: 2vw 0 2vw 0;
        padding: 4vw 0;
        display: flex;
    }

    /*
----------------
--------Estilos para enviar el correo
---------------
*/
    .emailForm {
        width: 100%;
        align-items: center;
    }

    .sendMailText {
        font-size: 4vw;
        color: var(--6);
        margin: .5vw 0;
    }

    .sendButtom {
        margin: 1vw 0 0 0;
        width: 15vw;
        font-size: 3vw;
        color: var(--black);
        background-color: var(--white);
        border: solid .2vw var(--7);
        border-radius: 10vw;
    }

    .cursiveBottom {
        font-family: 'Alex Brush', cursive;
        font-size: 4.5vw;
    }

    .sendButtom:hover {
        background-color: var(--goldGradient);
        color: var(--white);
    }

    /*estilos para las cajas de inputs correo*/
    .firstBoxContact,
    .secondBoxContact {
        width: 79%;
        height: 4vw;
        border: solid 0.1vw var(--Links);
    }

    .textAreaContact {
        width: 74%;
        border: solid .1vw var(--gold);
        font-size: 3vw;
        text-align: center;
        font-family: 'Lobster', cursive;
        padding: 2vw;
        height: 13vw;
    }

    .firstBoxContact::placeholder,
    .firstBoxContact[type="text" i],
    .secondBoxContact::placeholder,
    .secondBoxContact[type="email" i] {
        font-family: 'Lobster', cursive;
        font-size: 3vw;
        text-align: center;
    }

    .textAreaContact::placeholder,
    .textAreaContact[type="text" i] {
        font-family: 'Lobster', cursive;
        text-align: center;

    }

    /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
*/
    .projectsContainer {
        position: relative;
        background-color: var(--LinksOpacity);
        padding: 0vw;
        margin: 1vw 6vw;
        text-align: center;
        /* Centra el contenido dentro del contenedor */
    }

    .projectTitle {
        position: absolute;
        top: 5vw;
        width: 33%;
        /* Centra vertical y horizontalmente */
        z-index: 1;
        font-size: 4vw;
        color: var(--white);
        opacity: 1;
        transition: opacity 0.3s;
    }

    .projectDescription {
        width: 42%;
        padding: 3vw 0 0 0;
        font-size: 2vw;
        color: var(--black);
    }


    .projectsContainer:hover .projectTitle .projectsContainer img {
        opacity: 0;
        /* Ocultamos las letras al hacer hover en el contenedor */
    }

    .projectsContainer img {
        filter: blur(1.1px);
        height: 14vw;
        /* margin: 9vw 0vw; */
        padding: 1vw 1vw 1vw 1vw;
    }

    /* Fin de seccion de proyectos 
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/


    /* Experience Secction*/

    .experience {
        padding: 1vw 2vw 2vw 2vw;
        margin: 8VW 0 2vw 0;
        background-image: var(--componentPlatinumGradient);
        box-shadow: inset 0vw -0.8vw 2.2vw var(--platinoGradient);
    }


    .intrText {
        font-size: 2.8vw;
        color: var(--8);
        width: 76vw;
        margin: 1vw 0 0 0;
    }

    .inf {
        text-align: center;
        font-size: 3vw;
        color: var(--7);
        padding: 0 9%;
    }

    .experienceMoreButtom {
        font-size: 3.3vw;
        border-radius: 3vw;
        color: var(--black);
    }



    .jobTitle {
        text-align: center;
        font-size: 3.7vw;
        color: var(--componentColorDown);
        margin: 5vw 0 2vw 0;
    }

    .enterpriseTitle {
        font-size: 4vw;
        color: var(--6);
        margin: 0 0 2vw;
    }

    /*End Experience secction*/

}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}