@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
	--primary-color: #4BFFA5;
	--secundary-color: #4269F6;
	--tertiary-color: #23252A;
	--background-color: #000;
	--white-color: #FFFFFF;
	--ligth-blue: #8EA5FA;

	--font-title: "Lora", sans-serif;
	--font-text: "Open Sans", sans-serif;
}

* {
	box-sizing: border-box;
	position: relative;
	min-width: 0;
	padding: 0;
	margin: 0;
}
html{
	scroll-behavior: smooth;
}
body {
	min-height: 100dvh;
	margin-block: 0;
	background: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	text-wrap: balance;
	color: var(--white-color);
	font-family: var(--font-title);
}

p {
	text-wrap: pretty;
	color: var(--white-color);
	font-family: var(--font-text);
}
h2{
	font-size: 2.5rem;
}
.link{
	 font-weight: bold;
	text-decoration: none;
	line-height: 2;
	font-family: var(--font-text);
	transition: 0.7s;
	color: var(--primary-color);
	}
	.link:hover{
		color: var(--secundary-color);
		transition: 0.7s;
	   }
.container {
	max-width: 1200px;
	margin: 0 auto;
}

/*HEADER*/
.header {
	position: sticky;
	top: 0;
	width: 100%;
	height: 80px;
	box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
	background-color: var(--background-color);
	z-index: 100;
}

nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0px;
	max-width: 1200px;
	margin: 0 auto;
}

.logo a {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
}

.logo a span {
	color: #8739fa;
}

.menu {
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu a {
	display: block;
	padding: 7px 30px;
	font-family: var(--font-text);
	font-size: 16px;
	font-weight: 500;
	transition: 0.2s all ease-in-out;
	color: #fff;
	text-decoration: none;
}

.menu:hover a {
	opacity: 0.4;
}

.menu a:hover {
	opacity: 1;
	color: #fff;
}

.menu-icon {
	display: none;
}

#menu-toggle {
	display: none;
}

#menu-toggle:checked~.menu {
	transform: scale(1, 1);
}

@media only screen and (max-width: 950px) {
	.menu {
		flex-direction: column;
		background-color: #151418;
		align-items: start;
		position: absolute;
		top: 70px;
		left: 0;
		width: 100%;
		z-index: 1;
		transform: scale(1, 0);
		transform-origin: top;
		transition: transform 0.3s ease-in-out;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	}

	.menu a {
		margin-left: 12px;
	}

	.menu li {
		margin-bottom: 10px;
	}

	.menu-icon {
		display: block;
		color: #fff;
		font-size: 28px;
		cursor: pointer;
	}
}

/*END HEADER*/
.hero {
	display: flex;
   padding-top: 60px;
	padding-bottom: 40px;
}

.button-default {
	background: var(--primary-color);
	color: var(--tertiary-color);
	padding: 10px 50px 10px 50px;
	font-size: 16px;
	font-family: var(--font-text);
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	transition: 0.5s;
}

.button-outline {
	color: var(--primary-color);
	border: solid 1.5px var(--primary-color);
	padding: 10px 50px 10px 50px;
	font-size: 16px;
	font-family: var(--font-text);
	font-weight: 600;
	border-radius: 30px;
	text-decoration: none;
	transition: 0.5s;
}
.button-default:hover {
	background: var(--secundary-color);
	transition: 0.5s;
	color: var(--white-color);
}
.button-outline:hover {
	color: var(--secundary-color);
	border: solid 1.5px var(--secundary-color);
	transition: 0.5s;
}
.title-hero {
	font-size: 3.25rem;
	line-height: 3.75rem;
	max-width: 522px;
	z-index: 10;
}

.title-hero span {
	color: var(--primary-color);
}

.box-left {
	width: 55%;
}

.box-right {
	width: 45%;
	justify-content: center;
	align-items: center;
	display: grid;
}

.box-left p {
	margin-top: 20px;
	margin-bottom: 40px;
}

.buttons {
	display: flex;
	gap: 20px;
}

.card1 {
	display: flex;
	gap: 9px;
	color: var(--white-color);
	background: var(--tertiary-color);
	border-radius: 20px;
	padding: 10px 20px;
	position: absolute;
	bottom: 63px;
	left: 36px;
	justify-content: center;
	animation: moveUpAndDown 1s infinite alternate;
}

.card1 p {
	width: min-content;
	font-size: 14px;
}

.card2 p {
	width: min-content;
	font-size: 14px;
}

.card1 h4 {
	font-size: 32px;
}

.card2 {
	display: flex;
	gap: 9px;
	color: var(--white-color);
	background: var(--tertiary-color);
	border-radius: 20px;
	padding: 10px 20px;
	position: absolute;
	bottom: 129px;
	right: 36px;
	justify-content: center;
	align-items: center;
	animation: moveRightAndDown 1s infinite alternate;
}

.elipse {
	position: absolute;
	left: 34px;
	width: 299px;
	top: 62px;
}

.about-us {
	height: fit-content;
	text-align: center;
	background: linear-gradient(#020202, 10%, #47494f);
	padding-top: 68px;
	padding-bottom: 68px;
}

.content {
	max-width: 582px;
	margin: 0 auto;
}

.content p {
	margin-bottom: 32px;
}

.content h2 {
	font-size: 2.5rem
}

.bar-item {
	font-family: var(--font-title);
	font-size: 24px;
	color: var(--white-color);
	background: none;
	text-decoration: none;
}
.bar-item:hover {
	color: var(--primary-color)
}
.tab{
	padding: 15px;
	width: 33%;
	justify-content: center;
}
.tab-active{
	color: var(--primary-color);          
}
.tab{
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(0.25turn, rgba(56, 2, 155, 0), rgb(75 255 165), rgb(66 105 246), rgba(56, 2, 155, 0));
	border-image-slice: 1;
}
.grid-container{
	display: grid;
	grid-template-columns: 33% 33% 33%;
	gap: 15px;
	border-bottom: solid 1px #c9c9c9;
	padding-bottom: 10px;
	margin-top: 30px;
}
.grid-two-colum{
	display: grid;
	grid-template-columns: 33% 66%;
	gap: 15px;
	border-bottom: solid 1px #c9c9c9;
	padding-bottom: 10px;
	margin-top: 30px;
}
.grid-item{
	display: grid;
	align-items: center;
}
.grid-item p{
	font-size: 14px;
	text-align: left;
}
.grid-item span{
	color: var(--white-color);
	font-family: var(--font-text);
	font-size: 14px;
}
.cont-center p{
	text-align: center !important;
}
.softskill{
	color: var(--secundary-color) !important;
}
.hardskill{
	color: var(--primary-color) !important;
}
.projetcs-contact{
	background: rgb(66,105,246);
	background: linear-gradient(29deg, rgba(66,105,246,1) 0%, rgba(0,0,0,1) 37%);
	height: fit-content;
	padding-bottom: 40px;
}
.content-title{
	display: grid;
	grid-template-columns: 40% auto;
	gap: 40px;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 26px;
}
.content-title h2{
	font-size: 2.5rem;
}
.card-project{
  padding: 5px;
  flex-basis: 33%;
}
.card-project img{
	width: 100%;
	border-radius: 20px;
	margin-bottom: 12px;
}
.card-project p{
	font-size: 14px;
}
.card-project h5{
	font-size: 20px;
}
.cards-list{
	display: flex;
	gap: 34px;
}
.contact{
	padding-top: 73px;
	padding-bottom: 60px;
}
.work{
	display: flex;
	gap: 10px;
	align-items: center;
}
.work h5{
	font-size: large;
}
.circle{
	width: 22px;
	height: 22px;
	background: var(--secundary-color);
	border-radius: 30px;
}
.title-contact{
	justify-content: center;
}
.title-contact h2{
	margin: 0 auto;
	width: 600px;
	text-align: center;
}
.w3-bar{
	margin-top: 50px;
	display:flex;
	justify-content: space-between;
	gap:32px;
}
/*BTN FORM*/    
.btn {
font-weight: 600;
border: none;
cursor: pointer;
transition: 0.3s;
margin-top: 5px;
}
.swal2-styled.swal2-confirm {
background-color: #1a73e8 !important;
}

.swal2-styled.swal2-confirm:focus {
box-shadow: 0 0 0 3px rgb(26 115 232 / 52%) !important;
}
.inp-group{
display: flex;
justify-content: space-between;
gap: 37px;
margin-bottom: 10px;
}
#form{
width:700px;
margin: 0 auto;
}
/*FIN FORM*/
footer{
width: 100%;
height: 50px;
background: var(--tertiary-color);
text-align: center;
}
.social{
justify-content: center;
display: flex;
gap: 15px;
padding: 10px 0 3px 0;
}
.iconrss:hover{
filter: hue-rotate(90deg);
}
@keyframes moveUpAndDown {
0% {
	transform: translateY(0);
}
100% {
	transform: translateY(-5px);
}
}
@keyframes moveRightAndDown {
0% {
	transform: translate(0);
}
100% {
	transform: translate(1ch, 1mm);
}
}



/* Small devices such as large phones (640px and up) */
@media only screen and (max-width: 768px) {
.container, .header{
	padding: 0 1.5rem 0;
}
p{
	text-align: center;
	font-size: 14px;
}
.title-contact h2 {
width: auto;
font-size: x-large;
}
#form{
width: 100%;
}
.w3-bar{
display:block;
}
.grid-container {
width: 100%;
display: block;
}
.grid-item p {
width: fit-content;
}
.hero {
display: flex;
padding-top: 20px;
padding-bottom: 30px;
flex-direction: column-reverse;
}
.title-hero {
font-size: 2.25rem;
text-align: center;
}
.img-profile{
width: 220px;
}
.card1, .card2{
border-radius: 15px;
}
.card2{
padding: 4px 9px 4px 4px;
}
.card1 h4 {
font-size: 23px;
}
.card1 p {
font-size: 12px;
text-align: initial;
}
.card2 p {
font-size: 12px;
}
.card2 img{
width: 25px;
}
.buttons {
display: grid;
gap: 12px;
}
.box-left, .box-right {
width: 100%;
}
.button-default, .button-outline {
padding: 10px 20px 10px 20px;
text-align: center;
}
.content-title {
display: block;
}
.content-title h2{
font-size: x-large;
text-align: center;
}
.content h2{
font-size: x-large;
}
.cards-list {
display: block;
}
.tab{
width: 100%;
margin: 0 auto;
}
.grid-item p{
font-size: 12px;
}
.inp-group{
display: inline;
}
.grid-item span, .grid-item h4, .grid-item p{
text-align: initial;
}
.about-us{
padding-bottom: 40px;
}
.card-project p{
text-align: left;
}
.work{
margin-bottom: 15px;
}
.brands-wrapper{
	overflow: scroll !important;
}
}

/* Medium devices such as tablets (768px and 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px)  {
.container, .header{
padding: 0 1.5rem 0;
}
p{
text-align: center;
font-size: 14px;
}
.title-hero{
margin: 0 auto;
}
.elipse{
left: 335px;
top: 0;
}
.buttons{
display: flex;
justify-content: center;
}
.w3-bar{
display: flex;
}
.cards-list{
display: grid;
grid-template-columns: 33% 33%;
justify-content: center;
}
}
@media only screen and (min-width: 1025px) and (max-width: 1439px)  {

.container, .header{
padding: 0 1.5rem 0;
}
.grid-container{
gap: 0;
}
}

.brands-wrapper {
	white-space: nowrap;
  overflow:hidden;
	font-size: 0;
	position: relative;
	width: 100%;
	border: 1px solid black;
	box-sizing: border-box;
	}
  
  .brands-slide {
	position: relative;
	left: 0;
	top: 0;
	box-sizing: border-box;
  }
  
  .brands-brand {
	transition: all 0.6s ease;
	display: inline-grid;
	z-index: 1;
    width: 280px;
	font-size: medium;
	font-size: initial;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;
	white-space: wrap;
	}
	.more{
		background-color: transparent;
		cursor: pointer;
		padding: 8px 8px 3px 8px;
	}