/*--- Estilos creados por Galeano Santiago ---*/
/*---------------------------- Aspectos Generales ----------------------------*/

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
:root {
    --bg: #3C465C;
    --primary: #78FFCD;
    --solid: #fff;
    --celesteClaro:#769ECB;
    --azulGris:#758f9c;
    --azulMorado:#516091;
   
    /*prueba*/
    --bs-blue: #0d6efd;
    --bs-indigo-: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    
    --funBlue:#175a9e;
    --shark:#1e1e1f;
    --white_1:#f6f7f1;
    --bg-colorVidrio:rgba(255, 255, 255, .15);
    --backdrop-filterVidrio:blur(5px);
    --azulIntenso:#090979;
    --negroIn:#020024;
    --rojoOscuro:#C81D11;
    --rojoBrillante: #FF0800;
    --celesteBrillante:#00d4ff;
    --azulFooter:#1b2a4e;
    --azulNavBar: rgb(17, 0, 255);
    --blackTitulos:#444649;
    --greyPs:#616161;
    --blackYT:#181818;
    --linesYT:#303030;
    --blackYT2:#202020;
    --blackYT3:#313131;
    --whiteYT:#f9f9f9;
    --tittlepurple:#1f2667;
    /* --z1:#232741; */
    --z1:#0f172a;
    --z2:#2c2e43;
    --z3:#222733;
    --z4:#080d17;

    /* New */
    --z5:#241c41;
    --z6:#1a1535;
    --z7:#181230;
    --z8: #140f2b;
    --techBlue: #2c359b;
    --dark-github:#0d1117;
    --dark-github-2: #161b22;
    --dark-beauty:#1e242c;
    --dark-beauty-2:#171925;
    --dark-brauty-3:#252934;

    /* Colores nuevos */
    --bs-indigo: #BE1206;
    --blur-indigo: rgba(74, 52, 169, 0.6);
    --techRed: #BE123C99;
    --techRedLight: #BE123C;
    --techBlueHover:#4049d1;
    --techRedNeon: #FF1744;
    
    --gameBlue: #0f172a; /*15 23 42*/
    --gameBlueLight: #1e293b; 
    --gameLips: #be123c; /*190 18 60*/
    --gameBlood: #BE1206; /*190 18 6*/
    /* color-scheme: light dark; */
}

body{
    font-family: sans-serif;
    
    max-width: 100% !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;          
    color:var(--bs-gray-500);
    background:var(--z4);
}
/* p,li{
    font-size:1rem;
} */
.total-space{
    height:100vh;
}

.space-1000{
    height:1000px;
}

.space-800{
    height:800px;
}

.text-bRed{
    color: var(--rojoBrillante);
}

.text-indigo{
    color: var(--bs-indigo);
}

.text-gray{
    color: var(--bs-gray-500);
}

.text-darkGrey{
    color: var(--blackTitulos);
}

.titulo-h1{
    color:var(--bs-primary);
    font-family: monospace;
    font-weight: bold;
}

.subrayado{      
    padding:.5px;
    background: rgb(255,0,0);
    background: radial-gradient(circle, rgba(255,0,0,1) 0%, rgba(2,0,36,0) 100%);
    /* animation: fade-sub 1s ease; */
    margin:auto;
    opacity:0;
}
.subrayado.visible{
    opacity:1;

}      

/* No se utiliza todavia 29/08/22 
- Actualizacion: Ya se utiliza satisfactoriamente 10/09 22*/
@keyframes fade-sub{
    0%{
        opacity:1;
        width:0;
    }
    100%{
        opacity:1;
        width:100%;
    }
}

/*-------------------------------- Loader ---------------------------*/

.lds-ring {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 2px solid #fff;
    box-shadow: inset 0px 0px 15px 5px rgba(67,195,255,.2), 0px 0px 10px 1px rgba(67,195,255,.15);
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #fff transparent transparent transparent;
  }
  .lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
  }
  .lds-ring span{       /*Letras de cargando*/
    color:var(--bs-light);
    transform:translateY(50px);
  }

  @keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.loader{
    background:var(--z4);
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;

    position:fixed;
    top:0;
    left:0;
    z-index:100000;

    /*-----En caso de hacer animacion con clip-path-----/*
    
    /* clip-path: circle(150% at 100% 0); */
    /* transition: clip-path 0.5s ease-in-out; */
}

.loader2{
    /* --Para que desaparezca */
    display:none;
}

/*-------------------------------- Barra de Navegacion ---------------------------*/

#menu{
    
    background: var(--dark-beauty-2);
    box-shadow: 0 7px 20px 0 rgb(0 0 0 / 20%), 0 4px 10px 0 rgb(0 0 0 / 20%);
	transition: all .5s;
    z-index:5;

}

#menu li > a{
    font-family: monospace;
    font-size:18px;
    color: var(--bs-highlight-bg);
    margin-right:25px;
    transition: all .1s;
    
}

@media (hover: hover){
	#menu li a:hover{
	transform: scale(1.05);
	transition: all .1s;
    color: var(--bs-danger);
}
}



nav.fixed#menu {
    animation: popDown 0.5s;
}


nav.fixed {
    bottom: inherit;
    left: 0;
    position: fixed;
    top: 0;
    width:100%;
    z-index: 3; /*Quitar mas tarde si hace falta*/
}

@keyframes popDown {
    0% {
      transform: translateY(-100px);
    }
  }

.active-item{           /*Para utilizar en js*/
    color:var(--bs-danger) !important;
    transform: translateX(5px) scale(1) !important;
}


/*--------------------------------- Inicio -----------------------------*/
#inicio{
    height:500px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}
.banner{
    width: 100%;
    height: 100vh;
    text-align: center;
    /* background: linear-gradient(rgba(5,7,8, 0.8), rgba(5,7,8, 0.8)), url("../img/fondo3.webp"); */
    /*Parallax*/
    background-attachment: fixed;
    background-position:center;
    background-repeat: repeat;
}

/* .banner-text h2, h1, i{
    font-weight:lighter;
    font-style:normal;
} */

.banner-text h1{
    font-size:7vw;
    font-family: "Poppins-extrabold";
    letter-spacing: 3.75pt;
    line-height: 1em;
    font-weight: 500;
}
.banner-text h3{
    font-family: "Roboto-mono";
    font-weight: 500;
    letter-spacing: .25pc;
    font-size:3vw;
    text-transform: uppercase;

}

@keyframes subirYBajar {
    0% { 
        transform: translateY(0) scale(1);
    }
    50%{ 
        transform: translateY(10px) scale(1.1); 
    }
    100%{ 
        transform: translateY(0) scale(1); 

    }
}
.arrow-down{
    position:absolute;
    bottom:-10px;
    transition:all .3s ease-in-out;
    padding:20px 0;
}
.arrow-down:hover{
    bottom:-15px;
    transition:all .3s ease-in-out;
}
.arrow-down img{
    width:35px;
    /* animation: subirYBajar 1.5s steps(6) infinite; */
}
.cont-btn-cv{
    display:flex;
    width:100%;
    padding:15px 0;
}
/* .btn-link{ */
    /* width:200px; */
    /* margin:auto; */

/* } */

.btn-cv{
    
    padding:10px 20px;
    transition: background-color .4s;
    font-family: monospace;
    font-size: 18px;
    border-radius: 5px;
    background:var(--techBlue);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    

    /* animation: button-cv 2s ease;
    animation-delay:2.5s; */
}
.copyButton{
    font-family: monospace;
    border-radius: 5px;
    background:var(--techBlue);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    color:var(--bs-light);
}
.btn-animation{
    animation: button-cv 2s ease;
    animation-delay:2.5s;
}

a{
    text-decoration:none;
}

a>.btn-cv{
    color: var(--bs-light);
}

@media (hover: hover){
	.btn-cv:hover, .copyButton:hover{
    transition: background-color .4s;
    background:var(--techBlueHover);
    border:none;

}
}
.btn-cv:active{
    transition: background-color .4s;
    background: var(--techBlueHover);
}

@keyframes button-cv{
    0%{
        background:var(--techBlue);
    }
    50%{
        background:var(--techBlueHover);
    }
    75%{
        background:var(--techBlueHover);
    }
    100%{
        background:var(--techBlue);
    }
}

/*--------------------------------- Sobre Mi -----------------------------*/

.section-about-me{
    width: 100%;

    background:var(--z1);
    /* height:700px; */
    padding:40px 0 ;
}

/* .contenedor-about-me{
    padding-top:40px;
} */

.contenedor-about-me .row{
    padding-top:40px;
}

.info-about-me{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:start;
}
.info-about-me>p{
    color:var(--bs-light);
    /* color: var(--bs-gray-500); */

    text-align:justify;
}

.info-about-me a{
    transition:color .3s;
}

@media (hover: hover){
	.info-about-me a:hover{
        color:var(--techBlue);
        transition:color .3s;
    }
}
.info-about-me a:active{
    color:var(--techBlue);
    transition:color .3s;
}

.info-about-me img{
    width:30px;
}

.info-about-me ul{
    list-style-type:circle;
}

.info-about-me ul>li{
    text-align: start;
}


.pic-of-me{
    border:1px solid #fff;
    width:300px;
    height:300px;
    border-radius:500px;
    background:url("../img/perfil-edit.webp");
    background-size:cover;
    background-position-y:20%;
    overflow:hidden;
    margin:40px auto;
    animation: flotar 3s ease infinite;
    animation-delay: .5s;
    
}
            
@keyframes flotar{
    0%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(9px);
    }
    100%{
        transform: translateY(0);
    }
}

.pic-of-me>img{
    width:100%;
    height:100%;
    object-fit:cover;       /*Para que la imagen no se quede chata :/ */
    transform:scale(1.2);
}

.sombra{
    height:4px;
    width:230px;
    border-radius:10px;
    margin:auto;
    margin-bottom:15px;
    margin-top:20px;
    box-shadow:2px -10px 5px black;
    animation: efectoSombra 3s ease infinite;
    animation-delay: .5s;
}

@keyframes efectoSombra{
    0%{
        width:210px;
        box-shadow:2px -10px 5px var(--bs-black);
    }
    50%{
        width:250px;
        box-shadow:2px -10px 5px #000000;

    }
    100%{
        width:210px;
        box-shadow:2px -10px 5px var(--bs-black);

    }
}


.social-media{
    display:flex;
    justify-content: space-evenly;
}

.sm-icon{
    height:50px;
    width:50px;
    border:1px solid #fff;
    border-radius:300px;
    display:flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
}

.sm-icon>a{    
    display:flex;
    height:50px;
    width:50px;
    border-radius:100%; 
    transition:.3s;

}

.sm-icon>a>svg{
    margin:auto;
    width:100%;
    transition:.3s;

}


@media (hover: hover){
	.sm-icon:hover{
        background:var(--bs-light);
        transition:.3s;
    }
    .sm-icon:hover svg{
        fill:var(--techBlue);
        transition:.3s;
        animation:zoom-pop .6s ease;
    
    }
}
.sm-icon:active{
    background:var(--bs-light);
    transition:.3s;
}
.sm-icon:active svg{
    fill:var(--techBlue);
    transition:.3s;
    animation:zoom-pop .6s ease;

}


/*--------------------------------- Educacion ---------------------------------*/
.educacion{
    padding:45px 0;
    background:var(--z1);
}

.timeline{
    position:relative;
    max-width:1200px;
    margin:40px auto;
}
.timeline-container{
    padding:5px 25px;
    position:relative;
    width:50%;
    /* background:rgb(0,0,0,0.3); */
    opacity:0;
}
.timeline-container.animate{
    animation: movedown 1s linear forwards;
}
@keyframes movedown{
    0%{
        opacity:1;
        transform: translateY(-30px);
        z-index:2;
    }
    100%{
        opacity:1;
        transform: translateY(0);
        z-index:2;

    }
}

.timeline-container.animate:nth-child(1){
    animation-delay:0s;
}
.timeline-container.animate:nth-child(2){
    animation-delay:1.5s;
}
.timeline-container.animate:nth-child(3){
    animation-delay:2.5s;
}
.timeline-container.animate:nth-child(4){
    animation-delay:3.6s;
}
.text-box{
    padding:15px 15px;
    /* border-radius:5px; */
    background:var(--z5);
    position:relative;
    color:var(--bs-light);
    box-shadow: -7px 7px 7px rgba(0, 0, 0, 0.1);
    /* font-size:15px; */
}

.text-box p{
    color:var(--bs-gray-500);
}
.right-container{
    left:0;
}
.left-container{
    left:50%;
}
.time-point{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--z7);
    border:3px solid var(--techBlueHover);
}

.timeline-container .time-point{
    position:absolute;
    right:-10px;
    top:32px;
    z-index:2;
}
.left-container .time-point{
    left:-10px;
}
.timeline::after{
    content:'';
    position:absolute;
    width:4px;
    height:100%;
    border-radius: 25px;
    /* border-top-right-radius: 15px; */
    background:var(--techRedNeon);
    top:0;
    left:50%;
    margin-left:-2px;
    /* z-index:-1; */
    opacity:0;
}

.timeline.animate::after {
    opacity:1;
    animation: moveline 4.6s linear forwards;
}

@keyframes moveline{
    0%{
        height:0;
    }
    100%{
        height:100%;
    }
}

.text-box small{
    display:inline-block;
    margin-bottom:15px;
}

.right-container-arrow{
    height:0;
    width:0;
    position:absolute;
    top:20px;
    z-index:1;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-left: 15px solid var(--z5);
    right:-15px;
}
.left-container-arrow{
    height:0;
    width:0;
    position:absolute;
    top:20px;
    z-index:1;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
    border-right: 15px solid var(--z5);
    left:-15px;
}
/*--------------------------------- Experiencias Laborales ---------------------------------*/

.experiencia{
    padding: 70px 0;
    padding-bottom:10px;
    background:var(--z4);
}

/*---------------------- Logos de clientes ---------------------- */
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.clientes-section{
    padding:25px 0;
}

.div-subtitulo{
    display:flex;
    justify-content:center;
    position:relative;
    padding:20px 0;
    z-index:1;
}
.div-subtitulo .subtitulo{
    background:var(--z7);
    /* background: linear-gradient(145deg, #181230, #241c41); */

    padding: 5px 15px;
    border-radius:5px;
    position:absolute;
    bottom:-25px;
    z-index:2;
    color:#fff;
    
}
.logos {
    overflow: hidden;
    padding: 25px 0;
    background: var(--z7);
    /* background: linear-gradient(145deg, #181230, #241c41); */

    white-space: nowrap;
    position: relative;
    width:80%;
    margin:auto;
}

.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(8, 13, 23, 0), #080d17);
    width: 150px; /* Ajusta este valor para reducir la amplitud */
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(8, 13, 23, 0), #080d17);
    width: 150px; /* Ajusta este valor para reducir la amplitud */
}

.logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: flex;
    animation: 30s slide infinite linear;

    /*  */
    justify-content:space-around;
    gap:80px;
}

.logos-slide .cliente-box {
    width: 150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* height: 100px; */
    /* margin: 0 40px; */
}
.logos-slide .cliente-box .img-div{
    width: 100px;
    height: 100px;
    display:flex;
    align-items:center;
}
.cliente-box .img-div.div-rounder{
    border-radius:500px;
    overflow:hidden;
}
.logos-slide .cliente-box img{
    width:100%;
}
.logos-slide .cliente-box span {
    text-align: center; /* Centra el texto */
    word-wrap: break-word !important; /* Permite que el texto se divida si es demasiado largo */
    color: var(--bs-light);
}
/* -------------------- Contenedores de experiencia ------------------------ */

.contenedor-trabajos{
    /* border:1px solid #fff; */
    padding:70px 0;
    display:flex;
    gap:60px;
    flex-direction:column;
    align-items:center;
}
.box-job{
    display:flex;
    flex-wrap:wrap;
    /* border:1px solid #fff;  */
    width:90%;
    /* background:var(--z7); */
    background: linear-gradient(145deg, #181230, #241c41);

    border-radius:10px;
    overflow:hidden;
    padding:20px;
    box-shadow: -7px 7px 7px rgba(0, 0, 0, 0.1);

}
.box-job .titulo-job{
    width:100%;
}
.img-job{
    width:40%;
    /* height:400px; */
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
}
.enlaces-job{
    /* padding:10px 0; */
    display:flex;
    gap:15px;
    justify-content:center;
}
.fa-brands.fa-github{
    font-size:1.3rem;
}
.img-job img{
    width:100%;
    /* border:1px solid #fff; */
}
.description-job{
    width:60%;
    /* background:var(--z5); */
    /* border:1px solid #fff;  */
    padding:0 20px;
}
.description-job .container-fluid{
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:0 !important;
    padding-bottom:15px !important;
}
.description-job .container-fluid .titulo-job{
    width:80%;    
}
.titulo-job .title{
    color:var(--bs-light);
    font-family: monospace;
}
.description-job .logo-job{
    width:100px;
    height:100px;
    border-radius:7px;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}
.description-job .logo-job img{
    width:100%;
}
.btn.btn-job{
    background:var(--techBlue);
    color: #fff;
    border:none;
    border-radius:7px;
    transition:all .4s ease-in-out;
    padding:8px 15px;
}
.btn-job:hover{
    background:var(--techBlueHover);
    transition:all .4s ease-in-out;
    border:none;
}
.description-job .info-empresa{
    padding:15px 0;
}
.tecnologias{
    /* padding:10px 0; */
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:15px;
}
.tecnologias .tech-icon{
    padding: 3px 10px;
    color:var(--bs-light);
    border-radius:5px;
    /* border:1px solid var(--bs-light); */
    background: var(--techRed);
    /* background:var(--techBlue); */
}

.content-job p{
    text-align:justify;
}
/*--------------------------------- Habilidades ---------------------------------*/


.section-skills{
    padding:70px 0;
    background:var(--z4);
}

/* .contenedor-logos{
    margin-top:100px;
} */

.div-flex-logo{
    display:flex;
    justify-content:space-around;
    padding:30px 60px;
    gap:80px;
    /* border:1px solid #fff; */
    flex-wrap:wrap;
}

.subtitulo{
    color:var(--bs-primary);
    font-family: monospace;
    /* font-weight: bold; */
    text-align:center;
}

/*      ------------      efecto logos rotate    ------------      */
.td-figure{
    /* perspective: 1500px; */
    width:150px;
    margin:auto;
}
.td-figure> img{
    /* transform: rotateX(20deg) rotateY(-20deg) rotateZ(3deg); */
    transition: .3s; 
}
    
.td-figure:hover img{
    transition: .3s;
    transform: scale(1.02);
    border-radius:0.25em;
    
    filter: saturate(300%) brightness(120%);
}

.div-flex-logo .td-figure{
    display:flex;
    width:100px;
    align-items:center;
    flex-direction:column;
    
}
.div-flex-logo .td-figure img{
    width:100% !important;
    /* border:1px solid #fff; */
}

.tooltip{
    /* background:var(--techBlue); */
    background: var(--techRed);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3.1px);
    -webkit-backdrop-filter: blur(3.1px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    color:var(--bs-light);
    text-align:center;
    border-radius:5px;
    padding:5px 0;
    font-size:1.1rem;
    width:100px;
    opacity:1;
    transform:translate(0px, -135px);
    transition:.3s;
    margin:auto;
    z-index:2;
}

.td-figure:hover .tooltip{
    transform:translate(0px, -140px);
    /* opacity:1; */
    transition:.4s ease;
}



.habilidades-2{
    margin-top:80px;
}

.habilidades-2 p{
    color:var(--bs-gray-500);
}

.contorno-skills-2{
    overflow:hidden;        /*Para que el svg quede por debajo del contorno*/
    margin-top:20px;
    margin-bottom:20px;
    border:1px solid var(--bs-light);
    height:120px;
    width:120px;
    border-radius:500px;
    margin:auto;
    background: var(--techBlue);
    backdrop-filter: blur(3.1px);
    -webkit-backdrop-filter: blur(3.1px);
    transition: .6s;

}

svg {
    fill:var(--bs-light);
    width:45%;
    transition:.4s;

}

    .columns-skills-2:hover .contorno-skills-2{
        border:1px solid var(--techBlue);
        background:var(--whiteYT);
        transition: .6s;
    }
    
    .columns-skills-2:hover .contorno-skills-2 svg{
        fill:var(--techBlue);
        transition:.4s;
        animation:zoom-pop .6s ease;
    }


@keyframes zoom-pop{
    0%{
        /* width:45%; */
        transform:scale(1);
        /* transform:rotate(360deg); */
    }
    50%{
        /* width:50%; */
        transform:scale(1.2);
        /* transform:rotate(360deg); */

    }
    100%{
        /* width:45%; */
        transform:scale(1);

        /* transform:rotate(360deg); */

    }
}

/*--------------------------------- Proyectos ---------------------------------*/

.contenedor-proyectos{
    display:flex;
    gap:30px;
    justify-content:space-around; 
    padding: 30px 0;
    flex-wrap:wrap;
}
.contenedor-proyectos .card{
    width: 400px;
    /* border:1px solid #fafafa; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
    border-radius:15px;
    overflow:hidden;
    padding:10px;
    background: var(--z5);

}
/* .card-img{
    overflow:hidden;
    height:200px;
}
.card-img img{
    width:150%;
} */
.card-body{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:15px 10px;
}
.card-title{
    color:var(--bs-light);
    text-align:center;
}
.card-body .tecnologias, .modal-body .tecnologias{
    padding:15px 0;
    gap:10px;
    justify-content:start;
}
.card-body .tecnologias .tech-icon, .modal-body .tecnologias .tech-icon{
    border-radius:5px;
    font-size:.9rem;
    background:var(--techRed);
}
.btns-card{
    display: flex;
    gap:15px;
    justify-content:space-between;

}
.btns-card .btn-card{
    background:var(--techBlue);
    color:#fff;
    border:none;
    width:50%;
    transition: all .4s ease-in-out;

}
.btns-card .btn-card:hover{
    background:var(--techBlueHover);
    transition: all .4s ease-in-out;
    border:none;
}
.btns-card .btn-deploy{
    display:none;
}
.modal-footer .btn-deploy{
    display:block;
}
.modal-image {
    padding:10px 0;
    border-bottom:1px solid var(--bs-secondary);
}
.modal-image img{
    width:100%;
    border-radius:7px;
}
.modal-body p{
    padding:10px 0;
    /* text-align: justify; */
}
.modal-footer.btns-card{
    flex-wrap:nowrap;
}

.contenedor-proyectos .card .card-text{
	display:none;
}


/* ======================== Proyectos diseños viejos ============================ */
.contenedor-btn-glass{
    width:200px;
    margin:auto;
    border-radius: 500px;
}

.btn-glass{
    background-color:transparent;
    margin:auto;
    border:1px solid var(--bs-light);
    color:var(--bs-light);
    width:200px;
    padding-top:10px;
    padding-bottom:10px;
    transition: background-color .4s;
    font-family: monospace;
    font-size: 18px;
    /* font-weight:bold; */
    text-align:center;
    /* margin-top:20px; */
    border-radius: 500px;

}
.btn-glass>.svg-git{
    width:14%;
    fill:var(--bs-light);
    transition:.4s;

}

@media (hover: hover){
    
    .btn-glass:hover{
        background:var(--bs-indigo);
        color:var(--bs-light);
        border:1px solid var(--bs-light);
        transition:.4s;
    } 
    .btn-glass:hover .svg-git{
        fill:var(--bs-light);
        transition:.4s;

    }
}

.btn-glass:active{
    background:var(--bs-indigo);
    color:var(--bs-light);
    border:1px solid var(--bs-light);
    transition:.3s;
} 
.btn-glass:active .svg-git{
    fill:var(--bs-light);
}

.btn-glass-inverso{
    background:var(--bs-indigo);
    color:var(--bs-light);
}
.btn-glass-inverso:hover,.btn-glass-inverso:active{
    background:var(--bs-light);
    color:var(--bs-indigo);
    border:1px solid var(--bs-indigo);
}
.btn-glass-inverso:hover .svg-git,
.btn-glass-inverso:active .svg-git{
    fill:var(--bs-indigo);
}



/* ---------- Nuevas tarjetas de proyectos ---------- */
.section-proys{
    background:var(--z1);
    padding:80px 0;

}

.card-proy{
    width:100%;
    max-width:550px;
    height:300px;
    margin: auto;
    position: relative;
    cursor: pointer;
    transition: .5s;
    border:1px solid var(--bs-light);
    border-radius:10px;
    overflow:hidden;
}

.card-proy:hover > .fondo img{
    transform: scale(1.1);
    transition: all .4s ease;
    
}

.card-proy:hover > .overlay{
    opacity: 1;
    transition: .4s ease;
}

.section-proys .col-12.col-lg-6{
    padding:20px 0;
}

.fondo{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.fondo > img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index:1;
    transition: all .4s ease;
}

.overlay{
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    height: 100%;
    width: 100%;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: end;
	flex-wrap:wrap;
    /* flex-direction: column; */
	box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
    transition: .4s ease;
    z-index:2;

}
.overlay h3{
    padding:0 15px;
    width:100%;
	text-align:center;
	color:#fafafa;
}

.overlay > p{
    color: whitesmoke;
    font-size: 1.5rem;
}

.overlay > a{
    width: 120px;
    height: 50px;
    color: whitesmoke;
    text-decoration: none;
    border: 2px solid whitesmoke;
    padding: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay > a:hover{
    background-color: whitesmoke;
    color: black;
    border-color: #000;
    transition: .3s;
}


/* -------------------------------- Modal -------------------------------------- */

.modal-content{
    background-color:var(--z5);
    /* border:1px solid var(--bs-secondary); */
}
.modal-header{
    border-bottom:1px solid var(--bs-secondary);
}

.modal-footer{
    border-top:1px solid var(--bs-secondary);
}
.modal-title{
    color:var(--bs-light);
}
/*--------------------------------- Contacto ---------------------------------*/

.section-contact{
    height:800px;
    background:var(--z4);
}

.contenedor-contact{
    padding-top:80px;
}

.contenedor-form{
    height:400px;
}

.contenedor-contact>p{
    width:60%;
    margin:auto;
    margin-top:60px;
    text-align:justify;

}


.form-contact{
    width:500px;
}

input{
    font-family:monospace;
    padding:10px;
    width:100%;
    margin: 2px auto;
    box-sizing: border-box ;
    border:none;
    background:var(--dark-github-2);
    outline: none;
    /* transition:background 0.3s; */
    color:#fff;

}

input[type="email"], .input-asunto{
    width:49.5%;
}

input::placeholder{
    font-family:monospace;
    color:var(--bs-secondary);
    transition:color 0.3s;

}

textarea{
    font-family:monospace;
    width:100%;
    padding:10px;
    margin-top:2px;
    background:var(--dark-github-2);
    outline: none ;
    border:none;
    color:var(--bs-light);

}

textarea::placeholder{
    font-family:monospace;
}

.btn-submit{
    background:var(--techBlue);
    color:var(--bs-light);
}


/*--------------------------------- Footer ---------------------------------*/

footer{
    width:100%;
    height:250px;
    background:var(--dark-beauty-2);
    margin:0;
}

.volver-inicio{
    height:60px;
    width:60px;
    border-radius:100%;
    background:var(--bs-danger);
    margin:auto;
    transform:translateY(-30px);
    transition:.3s;
    box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.40);
    -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.40);
    -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.40);
   
}
.volver-inicio>a{
    height:60px;
}
.volver-inicio>a>svg{
    margin:auto;
    width:100%;
}


@media (hover: hover){
	.volver-inicio:hover{
        transition:.3s;
        transform:translateY(-30px) scale(1.05);
        box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    }
}
.volver-inicio:active{
    transition:.3s;
    transform:translateY(-30px) scale(1.05);
    box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
}

.row-problematico{
    width:100%;
    /* margin:auto; */
}

.vidrio{
    width:100%;
    margin-left:11px;
    height:150px;
    transform:translateY(40px);
    background: rgba(30, 36, 44, 0.41);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    z-index:1;
    position:absolute;
}

.vidrio>p{
    margin-top:60px;
}

/* Iconos de redes sociales */

.contenedor-icons{
    height:190px;
    margin:auto;
    max-width:80%;

}

.icon-container{
    transform:translateY(20px);
    height:80px;
    width:100px;
    z-index:0;
    transition:.5s;
    margin-left:20px;

}

.icon{
    height:60px;
    width:60px;
    border-radius:300px;
    background:var(--bs-indigo);
    margin:auto;
    z-index:2;
    position:relative;
    
}

/* Iconos del footer */
@media (hover: hover){
	.icon-container:hover .icon{
        animation:icons-pop .5s ease;
        transition:.5s; 
        z-index:2;
    
    }
}
/* borrar el hover mas tarde si hace falta */
.icon-container:hover .icon{
        animation:icons-pop .5s ease;
        transition:.5s; 
        z-index:2;
    
    }
.icon-container:active .icon{
    animation:icons-pop .5s ease;
    transition:.5s; 
    z-index:2;

}

@keyframes icons-pop{
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-45px);
        z-index:0;

    }
    100%{
        transform:translateY(0);
        z-index:2;
        box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    }
}
@keyframes icons-pop-out{       /*Este no se usa aun. Para hacer el pop en reversa*/
    0%{
        transform:translateY(0);
        z-index:2;
    }
    50%{
        transform:translateY(-45px);
        z-index:2;

    }
    100%{
        transform:translateY(0);
        z-index:0;

    }
}
/* @keyframes container-icons-pop{
    0%{
        z-index:0;
    }
    50%{
        z-index:0;

    }
    100%{
        z-index:2;

    }
} */

.icon>a{
    height:60px;
    width:60px;
    border-radius:100%; 
}
.icon>a>svg{
    margin:auto;
    width:55%;
}



/* ------------------------------------------Seccion de media querys------------------------------------------ */
/* Escritorio extra grande */
@media only screen and (min-width: 1200px){
    
    /*----------------------------Barra de Navegacion----------------------------*/
    
    .active-item{           /*Para utilizar en js*/
        transform: translateX(0) scale(1.05) !important;
    }

    .pc-9,.pc-8,.pc-7,.pc-1,.pc-2,.pc-3,.pc-4,.pc-5,.pc-6{
        background-size:auto;
        background-position:50% 10%;
    }

    #node-logo, #express-logo{
        margin-top:0;
    }
}

/* Escritorio grande */
@media only screen and (min-width: 992px) and (max-width: 1199px){

    /*----------------------------Barra de Navegacion----------------------------*/

    .active-item{           /*Para utilizar en js*/
        transform: translateX(0) scale(1.05) !important;
    }


    #node-logo, #express-logo{
        margin-top:0;
    }

    /*----------------------------Proyectos----------------------------*/
    
    .card-projectX, .card-proy{
        height:250px;
    }
    .card-proy{
        width:95%;
    }
    .contenedor-btn-glass{
        width:150px;
    }
    .btn-glass{
        width:150px;
    }
    .pc-9,.pc-8,.pc-7,.pc-1,.pc-2,.pc-3,.pc-4,.pc-5,.pc-6{
        background-size:auto;
        background-position:50% 10%;
    }
}

/* Escritorio pequeño / tablet */
@media only screen and (min-width: 768px) and (max-width: 991px){
    /*----------------------------Seccion sobre mi----------------------------*/
    p, li{
        font-size:15px;
    }

    .section-about-me>.container{
        min-width:95% !important;
    }

    .contenedor-about-me .row{
        padding-top:20px;
    }
    
    .info-about-me>h3{
        text-align:left;
    }
    /*----------------------------Seccion experiencia----------------------------*/
    .box-job{
        flex-direction:column;
    }
    .img-job{
        width:100%;
    }
    .img-job img{
        border-radius:10px;
    }
    .description-job{
        width:100%;
    }

    /*----------------------------Seccion habilidades----------------------------*/

    .habilidades-2{
    margin-top:40px;
    }

    #mongodb-logo{
        margin-top:20px;
    }
    /*----------------------------Seccion proyectos----------------------------*/


    .card-project{
        width:100%;
        height:190px;
        /* overflow:visible; */
    }
    
    .card-projectX, .card-proy{
        height:190px;
        max-width:334px;
    }

    .contenedor-btn-glass{
        width:200px;
        margin:auto;
        border-radius: 500px;
    }
    
    .btn-glass{
        width:200px;
        padding-top:4px;
        padding-bottom:4px;
    }

    .overlay{
        flex-direction:column;
        justify-content: center !important;
        align-items: center;
    }
    .overlay h3{
        font-size:1.1rem;
        padding:10px 15px;
    }
    /*----------------------------Seccion contactos----------------------------*/

    .section-contact{
        height:750px;
    }
    .contenedor-contact>p{
        width:80%;
        margin-top:40px;

    }

}

/* Tablets y phablets */
@media only screen and (min-width: 576px) and (max-width: 767px){

    
    p, li{
        font-size:13px;
    }

    .banner-text h1{
        font-size:7.5vw;

        /* font-weight: 500; */
    }
    .banner-text h3{
        /* font-weight: 500; */
        /* letter-spacing: .25pc; */
        font-size:1.5rem;
    }

    /*----------------------------Sobre mi----------------------------*/

    .contenedor-about-me .row{
        padding-top:0;
    }
    .pic-of-me{
        width:250px;
        height:250px;
        margin:30px auto;
        margin-top:30px;
    }
    
    .sombra{
        
        width:180px;
        
        animation: efectoSombra 3s ease infinite;
        animation-delay: .5s;
    }
      
    @keyframes efectoSombra{
        0%{
            width:160px;
            box-shadow:2px -10px 5px var(--bs-black);
        }
        50%{
            width:180px;
            box-shadow:2px -10px 5px #000000;
    
        }
        100%{
            width:160px;
            box-shadow:2px -10px 5px var(--bs-black);
    
        }
    }

    .social-media{
        margin:auto;
        width:70%;  
    }
    

    .info-about-me{
        padding:30px 0;
        
    }

    /*----------------------------Seccion experiencia----------------------------*/
    .box-job{
        flex-direction:column;
        padding:20px;
    }
    .img-job{
        width:100%;
    }
    .img-job img{
        border-radius:10px;
    }
    .description-job{
        width:100%;
        padding:0;
    }

    /*----------------------------Seccion habilidades----------------------------*/

    .contenedor-logos{
        margin-top:50px;
    }

    .habilidades-2{
        margin-top:40px;
    }
    
    .columns-skills-2 p{
        font-size:13px;
    }

    .contorno-skills-2{
        height:100px;
        width:100px;    
    }
    
    svg {
        width:50%;
    }
    
    /*----------------------------Seccion proyectos----------------------------*/

    .card-project{
        width:100%;
        height:290px;
        /* overflow:visible; */
    }
    
    .card-project:hover img{
        transform:translateY(10px) scale(1.1);

        }
    
    .contenedor-btn-glass{
        width:200px;
        margin:auto;
        /* margin-top:7px; */

        border-radius: 500px;
    }
    
    .btn-glass{
       
        width:200px;
        padding-top:5px;
        padding-bottom:5px;
        /* font-size: 14px; */
    }
    


    /*----------------------------Seccion contactos----------------------------*/

    .section-contact{
        height:750px;
    }
    .contenedor-contact{
        padding-top:70px;
    }
    .contenedor-contact>p{
        width:100%;
        margin-top:40px;
        font-size:13px;
    }


    /*----------------------------Seccion Footer----------------------------*/


    .vidrio{
        width:100%;
        margin-left:12px;
        height:150px;
        transform:translateY(40px);
        background: rgba(30, 36, 44, 0.41);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        z-index:0;
        position:absolute;
    }
    
    .vidrio>p{
        margin-top:60px;
        font-size:medium;
    }



    /* Iconos de redes sociales */

    .icon-container{
        z-index:1;
    }

    .icon{
        z-index:2;
        position:relative;
        box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    }

    /* Iconos del footer */
    @media (hover: hover){
	    .icon-container:hover .icon{
            animation:icons-pop .5s ease;
            transition:.5s; 
            z-index:2;    
        }
    }   
    /* hover para que no haga nada */
    .icon-container:hover .icon{
        animation:none;
        transition:none; 
        z-index:1;   
    }
    .icon-container:active .icon{
        animation:none;
        transition:none; 
        z-index:1;
    }

}

/*Celulares*/
@media only screen and (max-width: 575px){

/*----------------------------Ininio----------------------------*/
    .banner-text h1{
        font-size:2rem;

        font-weight: 600;
    }
    .banner-text h3{
        /* font-weight: 500; */
        /* letter-spacing: .25pc; */
        font-size:1.1rem;
        width:80%;
        margin:auto;
    }

    p, li{
        font-size:14px;
    }
    

    /* .banner-text h2, i{
        font-size:16pt;
        font-weight:normal;     
    } */
    /* .banner-text h1{
        font-size:17pt;
        font-weight:normal;
    } */

   
    /* .btn-link{ */
        /* width:200px; */
        /* margin:auto; */
        /* margin-top:20px; */
    
    /* } */
    .cont-btn-cv{
        justify-content:center;
    }
    .btn-cv{
        padding-top:7px;
        padding-bottom:7px;
    }



/*----------------------------Sobre mi----------------------------*/
    
    .contenedor-about-me .row{
        padding-top:0;
    }
    .pic-of-me{
        width:250px;
        height:250px;
        margin:30px auto;
        margin-top:30px;
    }
    
    .sombra{
        
        width:180px;
        
        animation: efectoSombra 3s ease infinite;
        animation-delay: .5s;
    }
    
    @keyframes efectoSombra{
        0%{
            width:160px;
            box-shadow:2px -10px 5px var(--bs-black);
        }
        50%{
            width:180px;
            box-shadow:2px -10px 5px #000000;
    
        }
        100%{
            width:160px;
            box-shadow:2px -10px 5px var(--bs-black);
    
        }
    }

    .social-media{
        margin:auto;
        width:70%;  
    }
    

    .info-about-me{
        padding:20px  0;

        margin: auto 10px;
    }

    .info-about-me h3{
        text-align:left;
        font-size:19px;
    }
    .info-about-me li{
        font-size:12px;
    }
    /*----------------------------Seccion experiencia----------------------------*/
    .logos{
        width:100%;
    }
    .logos-slide {
        gap:50px;
        animation: 20s slide infinite linear;

    }
    .logos-slide .cliente-box {
        width: 100px;
        /* border:1px solid #fff; */
    }
    
    .logos-slide .cliente-box .img-div{
        width: 80px;
        height: 80px;
        /* border:1px solid #fff; */

    }
    .logos-slide .cliente-box span {
        /* width: 100%;  */
        font-size: 12px; /* Ajusta el tamaño del texto si es necesario */
    }
    .box-job{
        flex-direction:column;
        padding:20px;
    }
    .img-job{
        width:100%;
    }
    .img-job img{
        border-radius:10px;
    }
    .description-job{
        width:100%;
        padding:0;
    }
    /*----------------------------Seccion habilidades----------------------------*/

    .contenedor-logos{
        margin-top:20px;
    }
    
    .td-figure{
        width:80%;
    }

    /* .tooltip{
        transform:translate(0px, -50px);
    }

    .td-figure:hover .tooltip{
        transform:translate(0px, -100px);
   
    } */

    
    .habilidades-2{
        margin-top:60px;
    }
    
    .contorno-skills-2{
        height:90px;
        width:90px;    
    }
    
    svg {
        width:50%;
    }
    
    .columns-skills-2 p{
        font-size:12px;
    }
    .columns-skills-2 h4{
        font-size:1.1rem;
    }


    /*----------------------------Seccion proyectos----------------------------*/
    

    .card-project{
        width:100%;
        height:300px;
        /* overflow:visible; */
    }
    
    .card-proy{
        width:95%;
    }

    .card-project:hover img{
        transform:translateY(10px) scale(1.1);

        }

    .contenedor-btn-glass{
        width:200px;
        margin:auto;

        border-radius: 500px;
    }
    
    .btn-glass{
        width:200px;
        padding:10px;
        /* font-size: 14px; */
    }    
    .pc-1, .pc-2, .pc-3, .pc-4, .pc-5, .pc-6, .pc-7,.pc-8, .pc-9, .pc-10, .pc-11{
        background-position: center;
    }

    /*----------------------------Seccion contactos----------------------------*/

    .section-contact{
        height:750px;
    }
    .contenedor-contact{
        padding-top:70px;
    }
    .contenedor-contact>p{
        width:100%;
        margin-top:40px;

    }

    input[type="email"], .input-asunto{
        width:100%;
    }

     /*----------------------------Seccion Footer----------------------------*/


     .vidrio{
        width:100%;
        margin-left:12px;
        height:150px;
        transform:translateY(40px);
        background: rgba(30, 36, 44, 0.41);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        z-index:0;
        position:absolute;
    }
    
    .vidrio>p{
        margin-top:90px;

    }



    /* Iconos de redes sociales */

    .icon-container{
        z-index:1;
    }

    .icon{
        z-index:2;
        position:relative;
        box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -webkit-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
        -moz-box-shadow: 2px 15px 20px 1px rgba(0,0,0,0.53);
    }

    /* Iconos del footer */
    @media (hover: hover){
	    .icon-container:hover .icon{
            animation:icons-pop .5s ease;
            transition:.5s; 
            z-index:2;    
        }
    }   
    /* hover para qeu no haga nada */
    .icon-container:hover .icon{
        animation:none;
        transition:none; 
        z-index:1;   
    }
    .icon-container:active .icon{
        animation:none;
        transition:none; 
        z-index:1;
    }

}



/* Mediaqueries especial pantallas pequeñas */
@media only screen and (max-width:465px){
    /*----------------------------Seccion Inicio ----------------------------*/
    .banner-text h3{
        width:100%;
    }
    .arrow-down img{
        width:30px;
    }

    /*----------------------------Seccion Sobre Mi ----------------------------*/
    /* ------------ timeline ------------ */
    .timeline{
        margin:50px auto;
        
    }

    .timeline::after{
        left:31px;
    }
    .timeline-container{
        width:100%;
        padding-left:80px;
        padding-right:25px;
    }

    .text-box{
        font-size:13px;
    }
    .text-box small{
        margin-bottom:10px;
    }
    
    .left-container{
        left:0 !important;
    }
    .left-container .time-point, .right-container .time-point{
        left:21px;
    }

    .left-container-arrow, .right-container-arrow{
        border-right:15px solid var(--z5);
        border-left:0;
        left:-15px;
    }
    /*----------------------------Seccion Habilidades ----------------------------*/

    .div-flex-logo{
        
        padding:30px;
        gap:50px;
        
    }
    .div-flex-logo .td-figure{
        width:100px;
        
    }
    
    /*----------------------------Seccion Experiencia ----------------------------*/
    @keyframes slide {
        from {
            transform: translateX(0);
        }
    
        to {
            transform: translateX(-150%);
        }
    }
    
    .logos:before {
        width: 50px; 
    }
    
    .logos:after {
        width: 50px; 
    }
    .logos-slide {
        animation: 23s slide infinite linear;

    }
    .titulo-job .title{
        font-size:1.3rem;
    }
    .contenedor-trabajos{
        
        gap:30px;
    }
    .box-job{
        padding:20px 15px;
        width:100%;
    }
    .enlaces-job{
        padding:5px 0;
    }
    .tecnologias .tech-icon{
        font-size:.9rem;
    }
    /*----------------------------Seccion Proyectos ----------------------------*/


    .card-projectX{
        width:100%;
        height:240px;
    }

    .card-proy{
        height:240px;
    }
    .overlay{
        flex-direction: column;
    }
    .overlay h3{
        font-size:1.1rem;
        padding:10px 15px;
    }
}

@media only screen and (max-width:375px){
    .card-projectX, .card-proy{
        height:200px;
    }
    /* .modal-title{
        font-size:1.1rem;
    } */
    .modal-footer{
        gap:15px;
    }
    
    .logos-slide {
        animation: 20s slide infinite linear;

    }
}
/*Celulares angostos*/
@media only screen and (max-width:365px){
    p, li{
        font-size:12px;
    }
    .info-about-me li, p{
        font-size:12px;
    }
    .contenedor-contact p{
        font-size:12px;
    }
    /*----------------------------Ininio----------------------------*/

    .banner{
        background-size: 300%;
        background-position:20% 20%;
    }

    /* .banner-text h2, i{
        font-size:13pt;
        font-weight:600;
    } */
    /* .banner-text h1{
        font-size:14pt;
        font-weight:500;

    } */
   
    
    
    .btn-cv{

        padding-top:5px 2px;
        font-size: 16px;
        /* width:150px; */

    }


    /*----------------------------Seccion sobre mi----------------------------*/
    .contenedor-about-me .row{
        padding-top:0;
    }
    .pic-of-me{
        width:200px;
        height:200px;
        margin:30px auto;
        margin-top:30px;
    }
    
    .sombra{
        
        width:130px;
        
        animation: efectoSombra 3s ease infinite;
        animation-delay: .5s;
    }
      
    @keyframes efectoSombra{
        0%{
            width:110px;
            box-shadow:2px -10px 5px var(--bs-black);
        }
        50%{
            width:130px;
            box-shadow:2px -10px 5px #000000;
    
        }
        100%{
            width:110px;
            box-shadow:2px -10px 5px var(--bs-black);
    
        }
    }

    .social-media{
        margin:auto;
        width:70%;  
    }
    
    .sm-icon{
        height:40px;
        width:40px;
        
    }
    
    .sm-icon>a{    
       
        height:40px;
        width:40px;

    
    }
    
    .sm-icon>a>svg{
        margin:auto;
        width:100%;
        transition:.3s;
    
    }
    .info-about-me{
        margin: auto 0;
    }

    /*----------------------------Seccion habilidades----------------------------*/

    

    /*----------------------------Proyectos----------------------------*/

    .card-projectX{
        width:90%;
        height:200px;
    }
    /*----------------------------habilidades----------------------------*/

    .habilidades-2 p, li{
        font-size:11px;
    }

    /*-------------------------------Footer----------------------------*/
    footer p, li{
        font-size:12px;
    }
}



/*Celulares extra angostos*/
@media only screen and (max-width: 352px){
    
    /*----------------------------Ininio----------------------------*/



    /* .banner-text h2, i{
        font-size:13pt;
    }
    .banner-text h1{
        font-size:14pt;
    } */

   
    
    
    .btn-cv{

        padding-top:5px 2px;
        font-size: 16px;
        /* width:150px; */

    }
    /*----------------------------Seccion Sobre mi----------------------------*/


    /*----------------------------Seccion habilidades----------------------------*/
    
    /*-----------------------------Seccion de Proyectos--------------------------*/


    /*--------------------------------- Contacto ---------------------------------*/

  
    
    input{
        padding:5px;
        font-size:12px;
    }
    

    input::placeholder{
        font-size:12px;
    
    }
    
    textarea{

        font-size:12px;
    }
    
    textarea::placeholder{

        font-size:12px;

    }


    /*-------------------------------Footer----------------------------*/
    footer p, li{
        font-size:12px;
    }
}