@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
* {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
}

*::selection {
	background-color: #9733ee;
	color: white;
}

::-webkit-scrollbar {
	width: 10px;
	background: transparent;
}

::-webkit-scrollbar-track {
	background: #303030;
}

::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 5px;
}

:root {
	--width-nav: 5%;
}

.noUserSelect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.hero {
	display: flex;
	height: 100vh;
	position: relative;
}

a {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

li {
	list-style: none;
}

.barra-menu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--width-nav);
	background: rgba(30, 30, 30, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	z-index: 50;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 25px 0;
}

.menu {
	position: fixed;
	top: 0;
	bottom: 0;
	left: -100vw;
	width: 25vw;
	background: rgba(30, 30, 30, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	z-index: 30;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
	padding-left: var(--width-nav);
}

.menu.menu-active {
	left: 0;
}

.close-menu {
	display: none;
}

.title-navbar {
	color: white;
	font-weight: bold;
	margin-top: 40px;
}

.close-menu.active-close {
	display: block;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: rgba(30, 30, 30, 0.5);
}

.logo {
	width: 50%;
}

.instagram-nav {
	width: 100%;
	display: flex;
	justify-content: center;
}

.bandera {
	width: 30%;
	pointer-events: none;
}

.info-hero {
	width: 65%;
	background-image: url('/img/hero.jpg');
	padding-left: 10%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	overflow: hidden;
	color: white;
}

.color-bg-hero {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(30, 30, 30, 0.4);
}

.texto-hero {
	padding-top: 20vh;
	position: absolute;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.button-transparent {
	border: 2px solid white;
	background: transparent;
	border-radius: 5px;
	height: 40px;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 15px;
}

.button-transparent:hover {
	background: rgba(255, 255, 255, 0.1);
}

.button-black {
	border: 3px solid black;
	background: transparent;
	border-radius: 5px;
	height: 40px;
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 20px;
}

.button-black:hover {
	background: rgba(0, 0, 0, 0.1);
}

.services-video {
	width: 35%;
	background: #1e1e1e;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	color: white;
	padding: 50px 0;
	font-size: 1.2em;
}

.services-video a {
	color: white;
}

.services-video a:hover {
	color: rgba(255, 255, 255, 0.7);
}

.services-video li {
	margin-bottom: 10px;
}

.services-video img {
	width: 60%;
	border-radius: 5px;
	cursor: pointer;
}

.services-video-container {
	width: 60%;
}

.hero-title {
	font-size: 1.3em;
	color: white;
	font-weight: bold;
	padding-top: 20vh;
}

.hero-effect {
	display: block;
	position: absolute;
	color: transparent;
	font-size: 6.5em;
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
	-moz-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	font-weight: 800;
	font-style: normal;
	text-transform: uppercase;
}

.abstract-effect {
	right: -160px;
	bottom: 218px;
}

.code-effect {
	top: 85px;
	right: -115px;
}

.frase {
	width: calc(100% - var(--width-nav));
	height: 90vh;
	background: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding-left: var(--width-nav);
}

.frase img {
	width: 25%;
}

.frase p {
	font-size: 3em;
}

.frase span {
	font-size: 2em;
}

.texto-frase {
	width: 50%;
}

.info-landing {
	display: flex;
	width: calc(100% - var(--width-nav));
	height: 100vh;
	padding-left: var(--width-nav);
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.img-info-landing {
	width: 40%;
	pointer-events: none;
}

.web-img-landing {
	width: 30%;
	margin-right: 5%;
	pointer-events: none;
}

.text-info {
	width: 50%;
}

.text-info h1 {
	font-size: 3em;
}

.text-info p {
	font-size: 1.5em;
}

.yellow {
	background: #ffc700;
}

.gray {
	background: #eeeeee;
}

footer {
	width: calc(100% - var(--width-nav));
	padding-left: var(--width-nav);
	background: #1e1e1e;
	height: 35vh;
	color: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: center;
	height: 80%;
}

.item-footer-logo {
	width: 100%;
	text-align: center;
}

.item-footer-logo img {
	width: 70%;
}

.item-footer {
	width: 15%;
	height: 70%;
	margin: 0 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.item-footer ul li {
	list-style: none;
	margin: 15px 0;
}

.item-footer ul li a {
	color: white;
}

.item-footer ul li a:hover {
	text-decoration-line: underline;
}

.social-link {
	display: flex;
	align-items: center;
	margin-top: 20px;
}

.social-link img {
	margin-right: 10px;
	width: 15px;
}

nav {
	width: 70%;
}

nav ul a {
	color: white;
}

nav ul a:hover {
	color: rgba(255, 255, 255, 0.7);
}

nav ul li {
	list-style: none;
	margin: 20px 0;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 70%;
}

input[type='text'],
input[type='email'],
input[type='number'] {
	width: calc(100% - 12px);
	height: 50px;
	border: 3px solid #000;
	border-radius: 5px;
	outline: none;
	user-select: auto;
	font-size: 14px;
	padding-left: 12px;
	background: #eeeeee;
	font-weight: bold;
	margin-bottom: 20px;
}

textarea {
	width: calc(100% - 24px);
	height: 60px;
	border: 3px solid #000;
	border-radius: 5px;
	outline: none;
	user-select: auto;
	font-size: 14px;
	padding: 12px;
	resize: none;
	background: #eeeeee;
	font-weight: bold;
	margin-bottom: 20px;
}

textarea:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus {
	border: 3px solid #ffc700;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type='submit'] {
	width: calc(100% + 6px);
	height: 50px;
	border: 3px solid #000;
	border-radius: 5px;
	outline: none;
	user-select: auto;
	font-size: 14px;
	background: black;
	font-weight: bold;
	color: white;
	transition: all 0.2s;
	cursor: pointer;
}

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

.acepto-label a {
	color: black;
	font-weight: bold;
}

.form-checkbox {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.form-checkbox input {
	margin-right: 10px;
}

input[type='submit']:hover {
	background: #10a957;
	border-color: #10a957;
}

.aling-form {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wrap-reverse {
	flex-wrap: wrap-reverse;
}

.web-dev {
	width: calc(100% - calc(40% + var(--width-nav)));
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 20%;
	padding-left: calc(20% + var(--width-nav));
	color: #1a1a1a;
}

.web-dev h1 {
	font-weight: bold;
	font-size: 3.5em;
}

.web-dev-first-gif {
	width: 100%;
	height: 200px;
	margin: 50px 0;
	background: url('https://media3.giphy.com/media/l0EoBBFIUg5t8kKw8/giphy.gif');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.web-dev-first-gif.privacy {
	background: url('https://media1.giphy.com/media/9dFvgd4ID6ne0/giphy.gif?cid=ecf05e47b956ff2c2bae361868346b37154b866804ce0956&rid=giphy.gif');
	background-position-y: -20px;
	background-size: cover;
	background-repeat: no-repeat;
}

.privacy-text {
	font-size: 1.5em;
	text-align: justify;
}

.not-found {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('https://media0.giphy.com/media/5QP2Sd9nssIr15Dsds/giphy.gif?cid=ecf05e477263885d1582dcb7c977addc0053003488e5363f&rid=giphy.gif');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	color: white;
}

.container-not-found {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: var(--width-nav);
	text-align: center;
}

.container-not-found div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.container-not-found h1 {
	font-size: 7em;
	font-family: 'Raleway', sans-serif;
}

.copyright span {
	color: #646464;
	font-size: 14px;
}

.texto-landing {
	width: 90%;
}

.img-info-landing.img-ui-ux {
	width: 30%;
	margin-left: 10%;
}

#ui-ux {
	overflow: hidden;
}

.video-modal {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 10000;
	background: rgba(30, 30, 30, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
	display: flex;
	justify-content: center;
	align-items: center;
}

.video-modal div {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.video-modal div button {
	cursor: pointer;
	outline: none;
}

@media screen and (max-width: 1024px) {
	:root {
		--width-nav: 0;
	}

	.services-video {
		display: none;
	}

	.info-hero {
		width: 100%;
	}

	.barra-menu {
		bottom: initial;
		right: 0;
		width: initial;
		height: 50px;
		flex-direction: initial;
		padding: 0 25px;
	}

	.menu {
		top: -100vh;
		bottom: initial;
		left: 0;
		right: 0;
		width: initial;
		background: #1e1e1e;
		-webkit-backdrop-filter: initial;
		backdrop-filter: initial;
	}

	.menu.menu-active {
		top: 0;
		bottom: 0;
	}

	.logo {
		width: 30px;
	}

	.instagram-nav {
		display: none;
	}

	.bandera {
		display: none;
	}

	.texto-landing {
		width: initial;
	}

	.disminuir {
		font-size: 2em !important;
	}
}
@media screen and (max-width: 768px) {
	.text-info {
		width: 100%;
		margin-bottom: 50px;
	}

	.info-landing {
		height: initial;
		padding: 60px 20px;
	}

	.img-info-landing {
		width: 100%;
	}

	.web-img-landing {
		width: 100%;
		height: initial;
	}

	.text-info h1 {
		font-size: 2em;
	}

	.hero-title {
		padding-top: 10vh;
	}

	.hero-title span {
		font-size: 0.6em;
		line-height: 1;
	}

	.frase {
		height: initial;
		padding: 60px 20px;
	}

	.frase img {
		width: 90%;
		margin-bottom: 40px;
	}

	.texto-frase {
		width: 100%;
	}

	.texto-frase span {
		font-size: 1em;
	}

	.texto-frase p {
		font-size: 2em;
	}

	form {
		width: 90%;
	}

	.footer-container {
		justify-content: space-around;
		font-size: 0.7em;
	}

	.item-footer {
		width: 20%;
		margin: 0;
	}

	.web-dev {
		padding: 100px 0;
	}

	.web-dev-first-gif {
		height: 150px;
	}

	.web-dev h1 {
		font-weight: bold;
		font-size: 1.5em;
	}

	.container-privacy {
		padding: 0 30px;
	}

	.web-img-landing {
		margin: 0;
	}

	.img-info-landing.img-ui-ux {
		width: 100%;
		margin-left: 65px;
	}
}
@media screen and (max-width: 480px) {
	.acepto-label {
		font-size: 0.9em;
	}
}

.scroll-icon {
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	align-items: center;
	height: 2em;
	width: 1.2em;
	font-size: 22px;
	color: rgba(255, 255, 255, 0.5);
	border-radius: 2em;
	border: solid 2px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translate(-50%, 0%);
}

.scroll-icon:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: #fff;
}

.scroll-icon::after {
	content: '';
	width: 5px;
	height: 5px;
	background-color: #fff;
	border-radius: 50%;
	-webkit-animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
	animation: scroll-icon 2.2s infinite cubic-bezier(0.65, 0.05, 0.36, 1);
}

@-webkit-keyframes scroll-icon {
	0% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
		opacity: 0;
	}
	30%,
	70% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(12px);
		transform: translateY(12px);
		opacity: 0;
	}
}
@keyframes scroll-icon {
	0% {
		-webkit-transform: translateY(-12px);
		transform: translateY(-12px);
		opacity: 0;
	}
	30%,
	70% {
		opacity: 1;
	}
	100% {
		-webkit-transform: translateY(12px);
		transform: translateY(12px);
		opacity: 0;
	}
}

#hamburger-icon {
	width: 50%;
	height: 1.5em;
	position: relative;
	display: block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#hamburger-icon .line {
	display: block;
	background: #9c9c9c;
	width: 100%;
	height: 0.06em;
	position: absolute;
	left: 0;
	border-radius: 0.025em;
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
}

#hamburger-icon .line.line-1 {
	top: 0;
}

#hamburger-icon .line.line-2 {
	top: 50%;
}

#hamburger-icon .line.line-3 {
	top: 100%;
}

#hamburger-icon:hover .line,
#hamburger-icon:focus .line {
	background: #fff;
}

#hamburger-icon.active .line-1 {
	transform: translateY(0.75em) translateX(0) rotate(45deg);
	-webkit-transform: translateY(0.75em) translateX(0) rotate(45deg);
	-moz-transform: translateY(0.75em) translateX(0) rotate(45deg);
}

#hamburger-icon.active .line-2 {
	opacity: 0;
}

#hamburger-icon.active .line-3 {
	transform: translateY(-0.75em) translateX(0) rotate(-45deg);
	-webkit-transform: translateY(-0.75em) translateX(0) rotate(-45deg);
	-moz-transform: translateY(-0.75em) translateX(0) rotate(-45deg);
}

@media screen and (max-width: 1024px) {
	#hamburger-icon {
		width: 2em;
	}
}

.gottih-page-contaiiner {
	width: calc(100% - var(--width-nav));
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-left: var(--width-nav);
	color: #1a1a1a;
	position: relative;
}

.gottih-page-contaiiner h1 {
	font-size: 10em;
}

.gottih-page-contaiiner span {
	font-size: 1.5em;
}

.gottih-page-contaiiner p {
	text-align: center;
}

.gottih-parrafo {
	margin-top: 30px;
	width: 50%;
	margin-bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.margin {
	margin-top: 100px;
}

.img-hero-gottih {
	width: 100%;
}

.img-hero-gottih img {
	width: 100%;
}

.img-web-gottih {
	width: 100%;
	display: flex;
	justify-content: center;
	position: relative;
}

.macbook {
	width: 50%;
	height: 100%;
}

.pagos-img {
	width: 15%;
	position: absolute;
	animation: bounce-follower 2.5s ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: 0.5s;
	transform: translate(90%, 0px);
}

.logo-gottih-ac {
	height: 75vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-gottih-ac img {
	width: 30%;
	pointer-events: none;
}

.contenedor-video {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	width: 100%;
}

.contenedor-video video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.color-btn {
	background: linear-gradient(to right, #434343 0%, black 100%);
	color: white;
	font-weight: bold;
	width: 200px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
	margin-top: 20px;
	transition: all 0.1s;
	border: none;
	outline: none;
	cursor: pointer;
}

.color-btn:hover {
	box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1024px) {
	.gottih-page-contaiiner {
		padding-top: 80px;
	}

	.gottih-page-contaiiner h1 {
		font-size: 6.5em;
	}

	.gottih-page-contaiiner span {
		font-size: 1.2em;
	}

	.gottih-parrafo {
		width: 80%;
		margin-bottom: 50px;
	}

	.margin {
		margin-top: 50px;
	}

	.logo-gottih-ac {
		height: 40vh;
	}

	.macbook {
		width: 70%;
	}

	.pagos-img {
		width: 20%;
	}
}
@keyframes bounce-follower {
	0% {
		transform: translate(90%, 0px);
	}
	50% {
		transform: translate(90%, 20px);
	}
	100% {
		transform: translate(90%, 0px);
	}
}