/*==================== ABOUT ====================*/
.about__img {
  width: 200px;
  border-radius: 0.5rem;
  justify-self: center;
  align-items: center;
}

.about__description {
  text-align: center;
  margin-bottom: var(--mb-1-5);
}

.about__info {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: var(--mb-1-5);
}

.about__info-title {
  /* font-size: var(--h2-font-size); */
  font-weight: 600;/*var(--font-semi-bold)*/
  /*color: rgb(212, 212, 212);/*var(--title-color)*/
}

.about__info-name {
  font-size: var(--smaller-font-size);
}

.about__info-title,
.about__info-name {
  display: block;
  text-align: center;
}

.about__buttons {
  display: flex;
  justify-content: center;
}

/*=============foto perfil================*/
.profile-card{
  position:relative;/*relativo a imagem*/
  overflow: hidden;/*esconder dados da imagem antes de passar o mouse*/
  /* margin-bottom:10px; */
  border-radius:5px;/*arredonda a imagem na parte de cima*/
  cursor: alias;
}

/*----------efeito na foto----------*/
.profile-card::before {
	content: '';
	position: absolute;
	inset: 0;
	transform: scaleY(0.75);
	transform-origin: bottom;
	background: linear-gradient(
		transparent, 
		rgba(37, 36, 36, 0.262), rgba(0, 0, 0, 0.656));
	transition: transform 0.25s;
}
.profile-card:hover::before {
	transform: scaleY(1);
}
/*--------------------*/
.profile-card .profile-img img{
  /* width:100%; */
  height:auto;
  border-radius:5px;/*arredonda a imagem na parte de baixo*/
}
.profile-card .profile-content::before{
  /* content: ""; */
  position:absolute;
  top:0;
  left:0;
  width:50%;
  height:40%;
  /* border:3px solid #222;
  border-right:3px solid transparent;
  border-bottom:3px solid transparent; */
  /* transform: scale(1,1);
  transition: all 0.50s linear; */
}
.profile-card .profile-content::after{
  content: "";
  position:absolute;
  bottom:0;
  right:0;
  width:50%;
  height:40%;
  /* border:3px solid #222;
  border-left:3px solid transparent;
  border-top:3px solid transparent; */
  /* transition: all 0.50s linear; */
}
.profile-card:hover .profile-content:before{
  top:20px;
  left:20px;
}
.profile-card:hover .profile-content:after{
  bottom:20px;
  right:20px;
}
.profile-card .profile-content::after{
  content: "";
  position:absolute;
  bottom:0;
  right:0;
  width:10%;/*ao passar o mouse o icone fica clicavel com largura % menor*/
  height:40%;
  /* border:3px solid #222;
  border-left:3px solid transparent;
  border-top:3px solid transparent; */
  /* transform: scale(1,1);
  transition: all 0.50s linear; */
}
.profile-card .profile-content{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:50% 4%;
  text-align: center;
  margin:130px 0;/*ao passar o mouse abaixa um pouco a escrita*/
  /* background-color: rgba(255,255,255,0.4); */
}
.profile-card .profile-content .title{
  font-size:24px;
  color:#b89dbe;/*#333*/
  opacity:0;
  letter-spacing:2px;
  text-transform:uppercase;
  transform: translateY(-100px);
  transition:all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.20s;
}
.profile-card:hover .title{
  opacity:1;
  transform: translateY(0);
}
.profile-card:hover .title::after{
  content:"";
  display:block;
  width:50%;
  margin:10px auto;
  border-bottom:2px solid #222;
}
.profile-card .profile-content .title > span{
  display:block;
  margin:5px 0;/*5px 0*/
  font-size: 14px;
  text-transform: capitalize;
}
.profile-card .profile-content .social-link{
  /*margin:150px 0;/*20px 0*/
  margin:20px 0;
  padding:0;
  opacity:0;
  transform: translateY(100px);
  transition:all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.20s;
}
.profile-card:hover .social-link{
  opacity:1;
  transform: translateY(0);
}
.profile-card .profile-content .social-link li{
  display: inline-block;
  list-style: none;
  margin:0 4px;
}
.profile-card .profile-content .social-link li a{
  /*color:#333;/*#333 cor dos icones*/
  width:30px;
  height:25px;
  line-height:24px;
  text-align: center;
  border-radius:5px;
  background-color: #fff;/*cor de fundo dos icones*/
  /* opacity:0.6; */
}
.link {
  color: #333;/*#16c*/
}

.gith {
  color: #333;/*#000000 #111 #222*/
}

.inst {
  color: #333;/*#f09 #f04*/
}

.tele {
  color: #333;/*#f09 #f04*/
}

.link:hover {
  color: #16c;/*#bde*/
}

.gith:hover {
  color: #000000;/*#000000*/
}

.inst:hover {
  color: #f09;
}

.tele:hover {
  color: #2191cb;
}

@media screen and (max-width: 568px) {
  .profile-card {
    width: 250px;
    height: auto;
    border-radius: 0.5rem;
    justify-self: center;
    align-items: center;
  }
  .profile-card .profile-content{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:50% 4%;
    text-align: center;
    margin:90px 0;/*130px 0 ao passar o mouse abaixa um pouco a escrita*/
    /* background-color: rgba(255,255,255,0.4); */
  }
  .profile-card .profile-content .title{
    font-size:18px;
    /*color:#bd9dbe;/*#333 cor dos icones todo preto se quiser*/
    /* opacity:0; */
    /* letter-spacing:2px; */
    text-transform:uppercase;
    /* transform: translateY(-100px);
    transition:all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.20s; */
  }

  .profile-card .profile-content .title > span{
    display:block;
    margin:5px 0;/*5px 0*/
    font-size: 10px;
    text-transform: capitalize;
  }
}

@media screen and (max-width: 280px) {
  .profile-card {
    width: 200px;
  }

  .profile-card .profile-content{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:50% 4%;
    text-align: center;
    margin:60px 0;/*130px 0 ao passar o mouse abaixa um pouco a escrita*/
    /* background-color: rgba(255,255,255,0.4); */
  }

  .profile-card .profile-content .title{
    font-size:14px;
    /* color:#333; */
    /* opacity:0; */
    /* letter-spacing:2px; */
    text-transform:uppercase;
    /* transform: translateY(-100px);
    transition:all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.20s; */
  }

  .profile-card .profile-content .title > span{
    display:block;
    margin:5px 0;/*5px 0*/
    font-size: 10px;
    text-transform: capitalize;
  }

}

/* .header .section .home__title .home__description .qualification__section .footer{
    visibility: hidden;
 } */

 /*------------ajuste de cores anos experiencia-------------*/
.colorexp{
  font-size: 1.25rem;
  color: rgb(212, 212, 212);
  /* font-weight: 600; */
  display: block;
  text-align: center;
}

@media screen and (min-width: 968px) {
  .color-exp{
    font-size: 1.5rem;
   }
}



 /*------------botão de baixar efeito-----------------*/

.download-btn {
  position: relative;
  font-size: 1.15rem;
  /* width: 8em; */
  /* height: 3em; */
  font-weight: 700;
  border: 0;
  /* border-radius: 100vmax; */
  color: #fff;
  /* background-color: rgb(29, 155, 240); */
  cursor: pointer;
  transition: all 300ms ease-in;
}

.download-btn::before {
  content: "";/*Done*/
  position: absolute;
  color: rgb(29, 165, 29);
  left: 50%;
  top: -2em;
  transform: translateX(-50%);
  opacity: 0;
} 

.download-btn.clicked {
  width: 20em;
  height: 0.5em;/*0.5em*/
  background-color: rgb(206, 224, 237);
  animation: fill 1.5s ease-out 1 forwards;
  animation-delay: 450ms;
}

.download-btn.clicked::before {
  animation: show 250ms ease-in 1 forwards;
  animation-delay: 2s;
}
  
@keyframes fill {
  0% {
    box-shadow: 0 0 0 rgb(29, 155, 240) inset;
  }

  95% {
    box-shadow: 20em 0 0 rgb(29, 155, 240) inset;
  }

  100% {
    box-shadow: 20em 0 0 rgb(29, 165, 29) inset;
  }
}

@keyframes show {
  100% {
    opacity: 1;
  }
}

/* @media (max-width: 576px) {
  .download-btn {
    font-size: 0.85rem;
  }
} */

/*----------------baixar 2-------------------------------*/
   
  

/*====================================*/
/* For medium devices */
@media screen and (min-width: 767px) {
  .about__container {
    column-gap: 5rem;
  }
  .about__img {
    width: 350px;
  }
  .about__description {
    text-align: initial;
  }
  .about__info {
    justify-content: space-between;
  }
  .about__buttons {
    justify-content: initial;
  }
}

/*------CleanCode a Innovation------------------*/
.abouts-section-wrapper {
  display: flex;
  justify-content: center;
  gap: 15px;
  width: 100%;
  margin-top: 15px;
}

.about-box {
  background-color: #222222;
  color: rgba(255, 255, 255, 0.377);
  width: 200px;
  padding: 30px 15px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.about-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 188, 212, 0.2);
}

.about-box h3 {
  margin: 0px;
  text-align: center;
  font-size: 1.1rem; /* Letra menor */
}

.about-box p {
  margin: 0px;
  text-align: center;
  font-size: 0.95rem; /* Letra menor */
  color: #cccccc;
  line-height: 1.3;
}

.about-box i {
  background-color: rgb(63, 62, 62);
  color: #1e90d2;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 34px;
}
.about-box:hover i {
  background-color: #505455;
  /* color: #ffffff; */
  /* box-shadow: 0 0 12px rgba(30, 144, 210, 0.5); */
}
/* Aplica APENAS se a tela for de 1023px para BAIXO */
@media screen and (max-width: 700px) {
  .abouts-section-wrapper {
    display: flex;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .about-box {
    background-color: #222222;
    color: rgba(255, 255, 255, 0.377);
    /* width: 150px; */
    /* 2. CALCULA A LARGURA: 50% da tela menos metade do gap para caberem duas por linha */
    width: calc(50% - 6px);
    padding: 10px 5px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease-in-out;
  }

  /* .about-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.1);
  } */

  .about-box h3 {
    margin: 0px;
    text-align: center;
    font-size: 0.95rem;
  }

  .about-box p {
    margin: 0px;
    text-align: center;
    font-size: 0.75rem;
    color: #cccccc;
    line-height: 1.3;
  }

  .about-box i {
    background-color: rgb(63, 62, 62);
    color: #1e90d2;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    font-size: 16px;
  }
}