/*Por alguna razon esto no funciona para Github Pages, por lo que en lugar de importarlos, se cargara todo aqui, aunque se vea feo*/

/*Import fonts from fonts.css files*/
/* @import url(./fonts.css); */

/*css variables*/
/* @import url(./partials/_variables.css); */

/*Import global styling*/
/* @import url(./partials/_global.css); */


/*Inicio de import manual*/


/*Start import fonts.css*/
@font-face{
    font-family: myRoboto;
    src: '../fonts/Roboto/Roboto-Regular.ttf';
}

@font-face{
    font-family: myFont;
    src: url(../fonts/Rock_Salt/RockSalt-Regular.ttf);
}
/*End import fonts.css*/


/*Start import variables.css*/
html, body{
    margin: 0%;
    box-sizing: border-box;
    /*font-size: 62.5%; /* 1rem = 10px*/
    width: 100%;
    height: 100%;
}

/*css variables*/
:root{
    --primary-color: #34013f;
    --primary-color2: #854fee;
    --title-color: #141313;
    --text-color: #777777;  
    --border-color: #201f1f17;  
    --gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
    --shadow-color:  0px 10px 30px rgba(118, 85, 225, 0.3);
    --box-shadow: 0px 10px 30px rgba(57, 56, 61, 0.205);
   

    /* font family variables. */ 
    --roboto: myRoboto;
    --rock: myFont;
}
/*End import variables.css*/


/*Start import global.css*/

/*Global Classes*/

.title-text{
    font: normal bold 50px/72px var(--roboto);
}

.text-uppercase{
    text-transform: uppercase;
}


/*Buttons*/
.button{
    padding: .8rem 2.2rem;
    font: normal 500 16px/20px var(--roboto);
    position: relative;
    border: 3px solid transparent;
    border-radius: 4px;
}

.button.primary-button{
    background: var(--primary-color);
    background-clip: padding-box;
    color: whitesmoke;
    transition: background .6s ease;
    box-shadow: var(--box-shadow);
}

.button.primary-button:hover{
    background: whitesmoke;
    background-clip: padding-box;
    color: black;
}

.button.primary-button::after, .button.secondary-button::after{
    position: absolute;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    background: var(--gradient-color);
    content: '';
    z-index: -1;
    border-radius: 4px;
}

.button.secondary-button{
    background: white;
    background-clip: padding-box;
    transition: background .6s ease;
    margin-left: 25px;
}

.button.secondary-button:hover{
    background: var(--primary-color);
    color: whitesmoke;
    box-shadow: var(--box-shadow);
}

p.para{
    color: var(--text-color);
    font: normal 500 16px/25px var(--roboto);
    
}

p.bold{
    font: normal 700 16px/25px var(--roboto);
}

.font-roboto{
    font-family:var(--roboto);
}


button:focus,
button:active
button:hover
.btn:active,
.btn.active{
    outline: 0px !important;
    box-shadow: none !important;
}

.title-h1{
    font: normal bold 39px/40px var(--roboto);
}


.navbar_fixed{
    position: fixed;
    width: 100%;
    top: -1px;
    left: 0; right: 0;
    background: #ffffff;
    box-shadow: var(--box-shadow);
    z-index: 999;
    transition: background 1s ease;
}


/*End import global.css*/

/*Fin de import manual*/


/*Navigation area*/
.header_area .main-menu .navbar{
    padding: 0.2rem 2rem;
}

.header_area .main-menu .navbar .container-fluid{
    max-width: 1500px;
}

.header_area .main-menu .navbar .navbar-brand{
    padding: 0 15rem 0 5rem;
    font-size: 2rem;
    font-family: var(--rock);
}

.header_area .main-menu .nav-item .nav-link{
    font-family: normal 500 15px/12px var(--roboto);
    text-transform: uppercase;
    padding: 1.7rem;
    color:var(--title-color);
}

.header_area .main-menu .navbar-nav .active a{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}

.header_area .main-menu .navbar-nav a:hover{
    background: var(--gradient-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* /Navigation area */


/* Banner Area */
.site-main .site-banner .site-title{
    padding-left: 5rem;
    padding-top: 10rem;
}

.site-main .site-banner .banner-image>img{
    padding-top: 5rem;
    padding-left: 10rem;
    width: 40rem;
}

.site-main .site-banner .site-title h3{
    /* padding-top: 20%; */
    font-weight: 500;
}

.site-main .site-banner .site-title h1{
    font-size: 5rem;
}

.site-main .site-banner .site-title h4{
    font-size: 1.5rem;
}
/* /Banner Area */


/* Education Area */
.site-main .education-area{
    padding: 1rem 20rem;
}

.site-main .education-area .education-title{
    margin-top: 8rem;
}

.site-main .education-area .education-image{
    margin-top: 7rem;
}

.site-main .education-area .education-image .img-fluid{
    width: 40rem;
    float: right;
}

.site-main .education-area .education-title h2>span{
    display: block;
    font: normal bold 49px/60px var(--roboto);
    letter-spacing: 21px;
}

.site-main .education-area .education-title .paragraph>p{
    padding: .4rem 0;
    text-align: justify;
    max-width: 35rem;
}
/* /Education Area */



/* Experience Area */
.site-main .experience-area .experience-title h1{
    margin-top: 12rem;
}

.site-main .experience-area .experience-title p{
    padding: 1rem 7rem;
}

.site-main .experience-area .client{
    background: #ffffff10;
    box-shadow: var(--box-shadow);
    margin: 3rem 0rem;
}

.site-main .experience-area .client .client-img{
    padding: 2rem;
}

.site-main .experience-area .client .education-client{
    padding-top: 2rem;
}

.site-main .experience-area .client .education-client h4{
    font: normal 500 21px/20px var(--roboto);
}

.site-main .experience-area .client .education-client .activity{
    color: var(--text-color);
    font: normal 500 16px/25px var(--roboto);
}

.site-main .experience-area .owl-carousel .owl-item{
    display: flex;
    justify-content: center;
    padding: 0 1.5rem;
}

.site-main .experience-area .owl-carousel .owl-dots .owl-dot.active span{
    background: var(--primary-color);
    width: 12px;
    height: 12px;
}
/* /Experience Area */


/* Certifications Area */
.site-main .certifications-area{
    padding: 4rem;
}

.site-main .certifications-area .certifications-title h1{
    margin-top: 8rem;
}

.site-main .certifications-area .button-group button{
    background: transparent;
    border: none;
    font: normal 500 16px/130px var(--roboto);
    text-transform: uppercase;
}

.site-main .certifications-area .button-group button+button{
    padding-left: 3rem;
}

.site-main .certifications-area .grid .our-certifications .title{
    padding: 0 1rem 0 1rem;
}


.site-main .certifications-area .grid .our-certifications> .title .bold{
    font: normal 700 18px/12px var(--roboto);
    line-height: 1.8;
    /* text-align: justify; */
    /* text-align: center; */
}

.site-main .certifications-area .grid .our-certifications> .title .para a{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.site-main .certifications-area .grid .our-certifications> .title .para a:hover{
    background: whitesmoke;
    background-clip: padding-box;
    color: black;
}

.site-main .certifications-area .grid .our-certifications .img a .img-certificado{
    display: block;
    height: 10rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.site-main .certifications-area .grid .our-certifications .img a:hover img{
    filter: brightness(1.1) drop-shadow(1px 8px 30px #b1afaf);
}
/* /Certifications Area */


/* Projects Area */
.site-main .projects-area{
    padding: 4rem;
}

.site-main .projects-area .projects-title h1{
    margin-top: 8rem;
}

.site-main .projects-area .button-group button{
    background: transparent;
    border: none;
    font: normal 500 16px/130px var(--roboto);
    text-transform: uppercase;
}

.site-main .projects-area .button-group button+button{
    padding-left: 3rem;
}

.site-main .projects-area .grid .project> .title .para a{
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

.site-main .projects-area .grid .project> .title .para a:hover{
    background: whitesmoke;
    background-clip: padding-box;
    color: black;
}

.site-main .projects-area .grid .project .title{
    padding: 0 1rem 0 1rem;
}


.site-main .projects-area .grid .project> .title .bold{
    font: normal 700 18px/12px var(--roboto);
    line-height: 1.8;
    text-align: center;
}

.site-main .projects-area .grid .project> .title .para{
    text-align: justify;
}

.site-main .projects-area .grid .project .img a .img-project{
    display: block;
    height: 10rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.site-main .projects-area .grid .project .img a:hover img{
    filter: brightness(1.1) drop-shadow(1px 8px 30px #b1afaf);
}
/* /Projects Area */


/* Hobbies Area */
.site-main .hobbies-area{
    padding: 0 2rem;
}

.site-main .hobbies-area .hobbies-title{
    margin-top: 8rem;
    padding: 0 14rem;
}

.site-main .hobbies-area .hobbies-title h1{
    font-size: 35px;
}

.site-main > .hobbies-area .hobbies{
    background: rgba(248, 248, 248, 0.973);
    padding: 2rem 0;
    width: 16rem;
    margin: 2rem .5rem;
    transition: box-shadow .7s ease;
}

.site-main > .hobbies-area .hobbies:hover{
    box-shadow: var(--box-shadow);
}

.site-main > .hobbies-area .hobbies .hobbies-img img{
    height: 7rem;
}
/* /Hobbies Area */



/* Subscribe me Area */
.site-main .subscribe-us-area .subscribe{
    background: url(../img/subscribe-bg.png) no-repeat;
    padding: 10rem 0;
    margin: 3rem auto;
}

.site-main .subscribe-us-area .subscribe .subscribe-title h4{
    font: normal 700 30px/30px var(--roboto);
    color: whitesmoke;
}

.site-main .subscribe-us-area .subscribe .subscribe-title p{
    color: whitesmoke;
    padding: 1rem 4rem;
}

.site-main .subscribe-us-area .subscribe form .input-textbox input{
    width: 400px;
    padding: 1.5rem 1rem;
    border: 1px solid whitesmoke;
    background: transparent;
    color: white;
    font: normal 500 17px/20px var(--roboto);
}

.site-main .subscribe-us-area .subscribe form .input-textbox input::placeholder{
    color: whitesmoke;
}

.site-main .subscribe-us-area .subscribe form .btn-submit button{
    background: whitesmoke;
    color: #000;
    padding: .7rem 2rem;
    margin-top: 0.5rem;
    margin-left: 5rem;
}
/* /Subscribe me Area */


/* Footer Area */
footer.footer-area{
    padding: 5rem 0;
    background: url(../img/footer-bg.png) no-repeat;
}

.logo{
    font-size: 2rem;
    color: blue;
    font-family: var(--rock);
}

footer.footer-area .social h5{
    font: normal 500 23px/30px var(--roboto);
}

footer.footer-area .social a > i{
    font-size: 22px;
    padding: 2rem;
    color: var(--border-color);
}

footer.footer-area .social a:hover > i{
    color: var(--primary-color);
}
/* /Footer Area */