/* PAGINA INICIAL */

#header {
  padding: 8rem ; /*FUNDO - USAR "REM" POIS É ADAPTAVEL*/
  width: 100%;
  background-image: linear-gradient(90deg, rgb(8, 2, 22) 35%, rgb(23, 4, 42) 100%);
}

#header h2, /*TEXTO: WEB DEVEOPER + UX DESIGNER */
#header .btn, /*TEXTO: DOWNLOAD CV*/
 #header i { /* ICONE */
  color: #683cc0;
}


.social-icon {
  display: inline-flex; /* Para centralizar o ícone */
  justify-content: center; /* Para centralizar o ícone horizontalmente */
  align-items: center; /* Para centralizar o ícone verticalmente */
  width: 40px; /* Largura do círculo */
  height: 40px; /* Altura do círculo */
  border: 2px solid #683cc0; /* Cor e espessura da borda */
  border-radius: 50%; /* Para torná-lo redondo */
  background-color: transparent; /* Fundo transparente */
  transition: background-color 0.3s ease; /* Transição suave para o fundo */
}

.social-icon:hover {
  background-color: #ffffff; /* Cor de fundo ao passar o mouse */
}


#header .btn { /*BORDER DO BOTAO DOWNLOAD CV */
  border-color: #683cc0;
  border-radius: 1rem;
}

#header .btn:hover { /* HOVER DO BOTAO + BACKGROUND DO BOTAO */
  color: #fff;
  background-color: #683cc0;
}

/* MY QUALITY SERVICES */

h2 { /* TEXTO MY QUALITY SERVICES */
  color: #683cc0;
  font-size: 50px;
}

.widget-item:hover { /* COR QUE FICA NO HOVER DOS WIDGET */
  background-color: #683cc0;
}

hr { /* LINHA */
  height: 0.2rem;
  background-color: #683cc0;
}

/* MY RECENT WORKS */


#main #works { /* FUNDO MY RECENT WORKS */
  background-image: linear-gradient(90deg, rgba(7, 2, 19, 0.926) 35%, rgb(19, 5, 48) 100%);
}

#main #works ul {
  width: 21rem;
}

#main #works ul li:nth-child(1) { /* DEIXAR SELECIONADO */
  background-color: #683cc0;
}

#main #works ul li:hover {
  background-color: #683cc0 !important;
}

#main #works .wrapper {
  background-image: linear-gradient(90deg, rgb(33, 31, 38) 35%, rgb(26, 22, 38) 100%) !important;
}

#main #works .wrapper .content {
  background-image: linear-gradient(90deg,rgb(24, 12, 55) 35%, rgb(43, 17, 100) 100%) !important;
  bottom: 0;
  left: 10%;
}






#main #resume h2 i {
  margin-right: 1.5rem !important;
}
#main #resume .item {
  background-image: linear-gradient(90deg, rgb(14, 4, 36) 35%, rgb(32, 12, 76) 100%);
  margin-bottom: 1.5rem;
}
#main #resume .item:hover {
  background-image: unset !important;
  background-color: #6036b5;
}
#main #resume .item:hover h5 {
  color: #fff !important;
}
#main #resume .item h5 {
  color: #683cc0;
}





#main #skills {
  background-image: linear-gradient(90deg,rgb(11, 4, 29) 35%, rgb(18, 6, 43) 100%);
}

#main #skills .skill h5 {
  color: #683cc0;
}

#main #skills .skill .wrapper:hover {
  background-color: #683cc0;
}





#main #clientes .wrapper {
  background-image: linear-gradient(90deg, rgb(20, 8, 49) 35%, rgb(43, 17, 100) 100%);
}
#main #clientes .wrapper .logo {
  height: 2rem !important;
}
#main #clientes .wrapper .client {
  height: 5rem !important;
  border-radius: 0.5rem;
  border-bottom-left-radius: 90%;
}
#main #clientes .wrapper i {
  color: #683cc0;
}






#main #blogs {
  background-image: linear-gradient(90deg, rgb(14, 5, 36) 35%, rgb(43, 17, 100) 100%);
}

#main #blogs .wrapper img { /* COMO DAR ZOOM: */
  transition: transform 0.4s;
}
#main #blogs .wrapper:hover img { /* COMO DAR ZOOM: */
  transform: scale(1.1);
}


#main #blogs .wrapper .content {
  background-image: linear-gradient(90deg, rgb(26, 11, 64) 35%, rgb(43, 17, 100) 100%);
  bottom: 1rem;
  width: 100%;
}


#main #blogs .wrapper .content li {
  font-size: 15px;
  color: #683cc0;
}


#main #blogs .wrapper .content li i {
  margin-right: 0.2rem;
}








#main #contact {
  background-image: linear-gradient(90deg,rgb(10, 4, 33) 35%, rgb(8, 8, 8) 100%);
}


#main #contact .wrapper {
  background-image: linear-gradient(90deg,rgb(24, 10, 59) 35%, rgb(43, 17, 100) 100%);
}
#main #contact .wrapper h2 {
  font-size: 3rem;
  color: #683cc0;
}



#main #contact .wrapper input:hover, /* "selecionado" */
#main #contact .wrapper select:hover {
  border-color: #5400fd !important;
}

#main #contact li i {
  background-image: linear-gradient(90deg,rgb(35, 16, 81) 35%, rgb(43, 17, 100) 100%) !important;
}

#main #contact li a:hover { /* HOVER NO LINK*/
  color: #683cc0 !important;
}

#main #contact li:hover i {
  transform: scale(1.2); /* COMO DAR ZOOM: */
}

#main #contact .wrapper input[type="submit"] {
  background-color: #4c35ab; 
  color: #ffffff; 
  border-radius: 0.5rem; 
}

#main #contact .wrapper input[type="submit"]:hover {
  background-color: #1d0834;
  color: #ffffff; 
}






#footer {
  background-image: linear-gradient(90deg, rgb(17, 7, 43) 35%, rgb(43, 17, 100) 100%);
}
#footer img {
  width: 5rem !important;
}
#footer p {
  color: #683cc0;
}