:root {
	--fontHeading: 'PT Sans', sans-serif;
	--fontParraf: 'Open Sans', sans-serif;
	---bcolor: #121212;
	--bcolorHead: #1e1e1e;
	--colorhead: rgb(249 0 77);
	--colorpar: rgb(156 163 175);
}

html {
	box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
	min-height: 100%;

	scroll-behavior: smooth;
}
*,
*:before,
*:after {
	box-sizing: inherit;
	outline: 0;
}

body {
	font-size: 1.6rem;
	font-family: var(--fontParraf);
	line-height: 1.8;
	background-color: var(---bcolor);
	color: white;
	min-height: 100%;
}

/** Globals */

.wrapper {
	width: min(90%, 120rem);
	margin: 0 auto;
}
.wrapper2 {
	width: min(90%, 120rem);
	margin: 0 auto;
}
/* .mainp{
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
} */

a {
	text-decoration: none;
	font-size: 2rem;
	color: white;
}

h1,
h2,
h3,
h5 {
	font-family: var(--fontHeading);
}

h1 {
	font-size: 3.8rem;
	font-weight: bold;
}

h2 {
	font-size: 3.5rem;
}

h5 {
	font-size: 1.8rem;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/** utilitys **/

.no-margin {
	margin: 0;
}

.center-text {
	text-align: center;
}
/* header */
.hero {
	margin-bottom: 5rem;
	margin-top: 5rem;
}
@media (min-width: 768px) {
}

.hero__logos {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	text-align: center;
	margin: 0;
}

/* bar nav */

.hero__barconteiner {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 1;
	height: 6rem;

	align-items: center;
}

.hero__bar {
	padding: 1rem 1rem;

	/* background-color: var(--bcolorHead); */
}
@media (min-width: 768px) {
	.hero__bar {
		display: flex;
		flex-wrap: wrap;
		gap: 0 1rem;
		align-items: center;
		justify-content: space-between;
		padding: 1rem;
	}
	.hero__barconteiner.barconteiner-fixed {
		background-color: var(--bcolorHead);
	}
	.hero__barconteiner {
		height: auto;
	}
}
/* logo nv */
.hero__img {
	display: none;
}
@media (min-width: 867px) {
	.hero__img {
		display: block;
		width: 4rem;
		height: 4.2rem;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;
		-o-border-radius: 50%;
		object-fit: contain;
		background-color: lightseagreen;
	}
}

.logos__icon {
	color: white;
	font-size: clamp(1rem, 5vw, 3.8rem);
}

.logos__tittle {
	color: var(--colorhead);
	line-height: 1.2;
	font-size: clamp(1rem, 4vw, 3.8rem);
}
/* toggle */

.bar__toggle {
	color: var(--colorhead);
	background-color: transparent;
	border: none;

	padding: 0 1rem;
	display: none;
}

/* nav */
.nav__items {
	text-align: center;
	font-size: clamp(1rem, 4.5vw, 1.5rem);
	color: var(--colorpar);
}

.nav__items:hover {
	color: var(--colorhead);
}

.hero__nav {
	display: flex;
	gap: 2rem;
	text-align: center;
}

@media (max-width: 768px) {
	.wrapper2 {
		width: 100%;
		padding: 0;
	}

	.bar__toggle {
		display: flex;
		align-items: center;
		position: absolute;
		padding: 0 2rem 0 0;
		font-size: 3rem;
		right: 0;
		cursor: pointer;
		transition: all 0.5s ease-in-out;
	}
	.hero__bar {
		background-color: var(--bcolorHead);
	}

	.hero__nav {
		flex-direction: column;
		background-color: var(--bcolorHead);
		text-transform: uppercase;
		left: 100%;
		height: 0;
		position: relative;
		transition: all 0.5s ease-in-out;
	}
	.hero__logos {
		justify-content: inherit;
		background-color: var(--bcolorHead);
		padding: 0 1rem;
		height: 6rem;
	}
	.nav__items {
		padding: 1rem 0;
		text-align: center;
	}

	.nav__items:hover {
		background-color: var(---bcolor);
	}

	.hero__nav.active {
		left: 0%;
		height: 100vh;
		transition: all 0.5s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
	}
	.bar__toggle.active {
		display: inline-flex;
		color: white;

		transform: rotate(90deg);
		transition: all 1s ease-in-out;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-webkit-transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-o-transform: rotate(90deg);
	}
}
/* hero information */
.hero__info {
	width: min(92%, 140rem);
	margin: 2rem auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr));
	grid-template-rows: 1fr;
	align-items: center;
	justify-content: space-around;
	grid-auto-flow: row;
	gap: 2rem;
}
@media (min-width: 1414px) {
	.hero__info {
		gap: 9rem;
	}
}
/* hero title */
.hero__texts {
	text-align: start;
	padding-right: 1rem;
	margin: 5rem 0;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}

@media (min-width: 768px) {
	.hero__texts {
		margin: 10rem 0;
		text-align: justify;
	}
}

.hero__tittle {
	color: var(--colorhead);
	line-height: 1.1;
	font-size: 3.4rem;
}
.hero__subtitle {
	color: var(--colorpar);
	margin: 0 0 1rem 0;
	font-size: 2rem;
}
.hero__tittle,
.hero__subtitle {
	padding: 1rem;
	border-left: 3px var(--colorhead) solid;
}
.name {
	color: white;
	font-weight: bold;
	font-size: 6.2rem;
}

/* hero social links */
.hero__links {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.logos__icons {
	font-size: clamp(1rem, 4.5vw + 1.5rem, 3.5rem);
	line-height: inherit;
}
@media (min-width: 768px) {
	.hero__links {
		padding: 1rem 2rem;
	}
}
/* btn download */
.download {
	color: white;
	font-weight: 700;
	background-color: var(--bcolorHead);
	display: block;
	font-size: 1.5rem;
	padding: 0.8rem;
	border: none;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	text-align: center;
}

.download:hover {
	color: var(--colorhead);
	background-color: #fff;
	padding: 1rem;
}
.logos__icons:hover {
	background-color: #fff;
	display: inline;
	padding: 0.2rem;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
}
.hero__links:hover,
.logos__icons:hover {
	color: var(--colorhead);
}

/* editor template */
.hero__code {
	background-color: #1e293b;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);

	max-width: 100rem;
	text-align: center;
}

.code__icons {
	border: 1px solid #334053;
	padding: 0 2rem;
}
.code__editor {
	background-color: #1e293b;
	display: flex;
	flex-direction: column;
}
pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	text-align: start;
	font-size: clamp(0.9rem, 3vw, 1.7rem);
	padding: 0 2rem;
}
.red {
	color: red;
	font-weight: bold;
}
.orange {
	color: orange;
}
.green {
	color: green;
}

.teal {
	color: rgb(14, 231, 231);
}
.amber {
	color: #fbbf24;
}
.white {
	color: white;
	font-weight: 100;
}
/* about setcion */
.about {
	text-align: center;
	padding: 0 1rem 0 1rem;
	width: 100%;
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
@media (min-width: 768px) {
	.about {
		padding: 0 2rem 1rem 2rem;
		margin: 0 auto;
	}
}

.about__title {
	font-weight: 900;
	text-align: center;
	margin-bottom: 5rem;
}
.about__par {
	color: var(--colorpar);
	line-height: 1.8;
	text-align: justify;
	clip-path: polygon(0 100%, 0 100%, 0 0, 0 0);
	font-size: 1.8rem;
}
/* services section */
.services {
	padding: 0 1rem 1rem 1rem;
	margin: 2rem 0;
	text-align: center;
}

.services__title {
	font-size: 3.5rem;
	margin-bottom: 6rem;
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
.services__par {
	color: var(--colorpar);
}

/* services grid */
.services__container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 45rem), 1fr));

	gap: 2rem;
}

.services__items {
	display: flex;
	align-items: center;
	text-align: start;
	gap: 1rem;

	line-height: 1.5;
}

.services__items i {
	font-size: 5rem;
	color: var(--colorhead);
}

@media (min-width: 768px) {
	.services__container {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 45rem), 1fr));
		gap: 5rem;
		margin: 0 auto;
	}
	.services__items i {
		position: relative;
		top: -2rem;
	}
}
.services__text {
	font-size: 2.5rem;
}

.skills {
	text-align: center;
	margin: 2rem 0;
}

.skills__title {
	margin-bottom: 5rem;
}
.skills__container {
	display: flex;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	flex-wrap: wrap;
}

.skills__items {
	background-color: var(--bcolorHead);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	-o-border-radius: 10px;
	font-size: clamp(1rem, 3vw + 1rem, 3.4rem);
	padding: 2rem;
	cursor: pointer;
}

.skills__items:nth-child(0n + 1):hover {
	color: red;
	background-color: white;
}
.skills__items:nth-child(0n + 2):hover {
	color: lightseagreen;
	background-color: white;
}
.skills__items:nth-child(0n + 3):hover {
	color: yellow;
	background-color: white;
}
.skills__items:nth-child(0n + 5):hover {
	color: #c76494;
	background-color: white;
}
.skills__items:nth-child(0n + 4):hover {
	color: cornflowerblue;
	background-color: white;
}

.skills__items > span {
	font-weight: 900;
}
.card-parr {
	text-transform: uppercase;
}
.item__1,
.item__3 {
	clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}

.item__2,
.item__4 {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.portfolio {
	text-align: center;
}

.portoflio___container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 55rem), 1fr));
	gap: 5rem;
}

@media (min-width: 768px) {
	.portoflio___container {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 35rem), 1fr));
	}
}
.portfolio___cards {
	display: flex;
	flex-direction: column;
	height: fit-content;
}
.portfolio___cards {
	background-color: var(--bcolorHead);
	border-radius: 1rem;
	-webkit-border-radius: 1rem;
	-moz-border-radius: 1rem;
	-ms-border-radius: 1rem;
	-o-border-radius: 1rem;
}

.portfolio___cards img {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.portfolio__title,
.about__title,
.services__title,
.skills__title,
.contact_title {
	margin-top: 3rem;
	margin-bottom: 3rem;
	display: inline-block;
	text-transform: uppercase;
	padding: 0 1rem;
	background: rgb(83, 4, 9);
	background: linear-gradient(
		90deg,
		rgba(83, 4, 9, 1) 0%,
		rgba(60, 5, 9, 1) 48%,
		rgba(101, 26, 33, 1) 100%
	);
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
}
@media (min-width: 768px) {
	.portfolio__title,
	.about__title,
	.services__title,
	.skills__title,
	.contact_title {
		margin-top: 0;
		margin-bottom: 10rem;
	}
}
input,
textarea {
	color: white;
	font-weight: 700;
}
/* Contact*/
.sectionct {
	padding-bottom: 10rem;
	text-align: center;
}
.contact_conteiner {
	text-align: center;
	border: 1px solid var(--bcolorHead);
	border-start-start-radius: 1rem;
	width: 100%;
}
@media (min-width: 768px) {
	.contact_conteiner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-row: auto;
		align-items: center;
	}
} /*contac form */

.contact_title {
	grid-column: 1/-1;
}

.contact____first {
	padding: 5rem 1rem;

	grid-column: 1/2;
}
.contact____first a {
	padding: 1rem;
}

.contact__contents {
	padding: 6rem 1rem;
	grid-column: 2/3;
	border-top: 2px var(--bcolorHead) solid;
}

@media (min-width: 768px) {
	.contact__contents {
		border-left: 2px var(--bcolorHead) solid;
	}
}
.form {
	/* border: 1px solid red; */
	padding: 0 25px;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.form-control {
	padding: 1.5rem;
	font-size: 1rem;
	background-color: var(--bcolorHead);
	border: 1px solid transparent;
	border-radius: 8px;
}

.form-control::placeholder {
	color: #fff;
}

.form-control:focus-visible {
	outline: 1px solid lightseagreen;
	border-color: #fff;
}

.btn-form {
	padding: 1.5rem;
	background-color: var(--bcolorHead);
	border: 1px solid transparent;
	border-radius: 8px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	width: 100%;
	display: block;
}
@media (min-width: 768px) {
	.btn-form {
		width: auto;
	}
}

.btn-form:hover {
	background-color: white;
	color: var(--colorhead);
}

.footer__contenedor__texto {
	text-align: center;
}
.footer__contenedor__texto h5 {
	padding: 0;
	padding: 1rem 2rem 0 2rem;
	background-color: var(--bcolorHead);
	color: var(--colorpar);
	font-weight: 100;
}
.separacion {
	padding-top: 2rem;
}
@media (min-width: 768px) {
	.separacion {
		padding-top: 7rem;
	}
}