body {
	font-family: 'montserrat', sans-serif;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	overflow: hidden;
}

:root {
		--white-color: #FFFFFF;
		--gray01:#FAFAFA;
  	--gray02: #54666B;
  	--gray03: #454545;
  	--gray04: #999999;
  	--gray05: #D9D9D9;
  	--main-color: #184E68;
  	--secondary-color: #a1c7d9;
  	--main-color-opacity:rgba(24, 78, 104,0.9);
  	--main-color-opacity-20:rgba(24, 78, 104,0.2);
}

.cutive-mono-regular {
  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
}


::selection {
  background: var(--main-color-opacity-20); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: var(--main-color-opacity-20); /* Gecko Browsers */
}

header {
	width:  calc(100% - 80px);
	position: absolute;
	left: 40px;
	height: 40px;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color:var(--gray03);
	align-items: baseline;
	top: -100px;
	animation-name: header;
 	animation-duration: 1s;
 	animation-delay: 2.2s;
 	animation-fill-mode: forwards;
 	z-index: 20;
}
@keyframes header {
  from {
  	top: -100px;
  }
  to {
  	top: 8px;
  }
}

p {
	margin: 0;
}
.logo {
	font-size: 16px;
	margin: 4px 0 0;
	cursor: default;
	font-weight: 600;
	z-index: 10;
}
.logo a {
	color: var(--main-color);
}
.language-label, .language-label-mobile {
	text-transform: uppercase;
	color:var(--gray02);
	font-size: 14px;
	cursor: pointer;
}
.language-label-mobile {
	display: none;
}
video:focus {
	outline: 0;
}
.vp-center #player {
	min-width: 100%;
	width: 1080px;
}
.vermas {
	color: var(--main-color);
	font-size: 12px;
	top:16px;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
}
.note {
	color: var(--main-color);
	font-size: 12px;
	padding: 8px 0 0;
}
a {
	color:inherit;
	text-decoration: none;
	transition: linear 1s;
	-webkit-transition: linear 1s;
}
a:hover {
	filter: brightness(90%);
}
.horizontal-line {
	display: flex;
  align-items: center;
  justify-content: space-between;
}
.language-label a {
	color: var(--gray03);
}
.contact-info a:hover {
	color: var(--main-color)!important;
}
.horizontal-elements {
	display: flex;
	flex-wrap: wrap;
}
.horizontal-between {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.margin-auto {
	margin: auto;
}
.width-100 {
	width: 100%;
}
.position-relative {
	position: relative;
}
.code {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	margin:0 0 24px;
}
.tag {
	background-color: var(--main-color-opacity-20);
	padding: 0 4px;
	margin: 0 8px 8px 0;
}
.main-title {
	color:var(--white-color);
	cursor: default;
	font-size: 46px;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 2px;
}
.main-sec-title {
	font-size: 40%;
	margin: 6px 0 0;
	opacity: 0.75;
	font-weight: 400;
}
.text-highlighted {
	margin: 16px 0 0;
	font-weight: 600;
}
.secondary-title {
	font-size: 24px;
	margin: 0 0 0 16px;
	color:var(--main-color);
	opacity: 0;
	text-align: center;
	animation-name: secondary-title;
 	animation-duration: 1s;
 	animation-delay: 0.5s;
 	animation-fill-mode: forwards;
 	font-weight: 400;
}
@keyframes secondary-title {
  from {
  	opacity: 0;
  }
  to {
  	opacity: 0.5;
  }
}
.text-description {
	text-align: center;
	font-size: 14px;
	line-height: 18px;
	color: var(--gray03);
	margin: 8px 8px 24px;
}
a.text-description {
	text-decoration: underline;
	margin: 16px auto 0;
	display: block;
}
.main-description {
	font-size: 16px;
	line-height: 18px;
	line-height: 1.4rem;
	color: var(--white-color);
	margin: 16px 0;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.display-none{
	display: none;
}
.welcome-hola {
	font-size: 140px;
	font-weight: 100;
	color:var(--main-color);
	width: 100%;
	height: 100%;
	text-align: center;
	display:grid;
	display: -webkit-grid;
	align-items: center;
	-webkit-align-items:center;
	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
}
.welcome-title-container {
	grid-column: 2 / 2;
  grid-row: 1;
  max-width: 450px;
}
.welcome-img-container {
	position: relative;
	width: 100%;
	max-height: 328px;
	height: 100%;
	grid-column: 1 / 2;
  	grid-row: 1;
}
.welcome-img-position {
	float: right;
	margin: 0 24px;
	text-align:center ;
}
.aboutmelink {
	font-size: 16px;
	color:var(--main-color);
	text-transform: uppercase;
	letter-spacing: 1px;
	height: 60px;
	position: relative;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
	border: 1px solid var(--white-color);
	padding: 8px 16px;
	top: -24px;
	box-shadow: 0 0 4px var(--gray02);
	background-color: var(--white-color);
}
.aboutmelink:hover {
	cursor: pointer;
	letter-spacing: 4px;
	font-weight: 600;
}
.pantone {
	right:40px;
	position: absolute;
	top:32px;
	font-size: 9px;
	color:var(--gray01);
	opacity: 0.9;
	font-weight: 600;
}

.content-container {
	position: absolute;
	scroll-behavior: smooth;
	overflow: overlay;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	overflow-x:hidden; 
	opacity: 0;
	animation-name: content-container;
 	animation-duration: 2s;
 	animation-delay: 1s;
 	animation-fill-mode: forwards;
 	box-shadow: inset 0 0 4px var(--gray01);
}
@keyframes content-container {
  0% {
  	height: 100% ;
	width:  100%;
	top:0;
	left: 0;
	overflow-y: hidden;
	opacity: 0;
  }
  90% {
  	height: calc(100% - 80px);
	width:  calc(100% - 80px);
	top:40px;
	left: 40px;
	overflow-y: hidden;
	opacity: 1;
  }
  100% {
  	height: calc(100% - 80px);
	width:  calc(100% - 80px);
	top:40px;
	left: 40px;
  	overflow-y: overlay;
  	opacity: 1;
  }
}
.content-smaller {
	height: calc(100% - 180px)!important;
}
.project-main-container {
	background-color: var(--gray01);
	border:1px solid var(--gray01);
	text-align:center;
}
.new-project-main-container {
	background-color: var(--gray01);
	border:1px solid var(--gray01);
}
.content-welcome {
	height:100%;
	width: 100%;
	position: absolute;
}
.portfolio-welcome {
	position: absolute;
	background-color:var(--main-color-opacity);
	width: 100%;
	height: 100%;
	right: 0;
	top:0;
	padding: 16px 40px;
	align-items: center;
	display: grid;
	box-sizing: border-box;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
}
.portfolio-welcome a {
	cursor: pointer;
}
.title-right .fa-arrow-down {
	font-size: 22px;
}
.timezone {
	position: absolute!important;
	bottom: 24px;
	left:24px;
	opacity: 0;
	color: var(--main-color);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-6deg);
	-webkit-transform: rotate(-6deg);
	-moz-transform: rotate(-6deg);
	text-align: left;
	line-height: 1.4em;
	font-style: italic;
	font-weight: 600;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
}
.map-container:hover .timezone {
	display: block;
	opacity: 1;
}
.map-container {
	width: 80%;
	margin:16px 40px 0 0;
	position: relative;
	margin: auto;
}
.map-container:hover .map-arg {
	animation-name: map-arg;
 	animation-duration: 0.5s;
 	animation-fill-mode: forwards;
}
@keyframes map-arg {
  0% {
  	top: 0;
  }
  60% {
  	top:-8px;
  }
  80% {
  	top:8px;
  }
  100% {
  	top:0;
  }
}
.map-main {
	width: 100%;
	box-shadow: none!important;
	margin: auto;
}
.img-main-index {
	width: 240px;
	height: 260px;
	object-fit: cover;
	border: 1px solid var(--white-color);
	filter: saturate(0.7);
	box-shadow: 0 0 4px var(--gray04);
	background-color: var(--gray01);
	padding: 8px 8px 24px;
	box-sizing: border-box;
	max-width: 400px;
}
.img-main {
	box-shadow: 0 0 4px var(--gray04);
	background-color: var(--gray01);
	padding: 8px 8px 24px;
	box-sizing: border-box;
	max-width: 400px;
	width: 100%;
	margin: 8px 0;
}
.map-arg {
	position: absolute;
	width: 100%;
	top: 0;
	left:0;
}
.map-arg svg g circle, .map-arg svg g path {
	fill:var(--main-color);
}
.about {
	cursor: default;
	background: var(--white-color);
	width: 0;
	min-width: 0;
	height: calc(100% - 84px);
	left:42px;
	top:42px;
	box-sizing: border-box;
	z-index: 10;
	position: absolute;
	transition: linear 1s;
	-webkit-transition: linear 0.3s;
	overflow:hidden;
	display: flex;
	align-items: center;
}
.about-sec-container {
	margin: auto;
	color: var(--gray03);
	align-items: center;
	text-align: center;
}
.about-sec-container p {
	padding: 4px 32px;
}
.about-hover {
	width: calc(100% - 84px);
	box-shadow: 0 0 4px var(--gray01);
	overflow: auto;
	padding: 24px 16px;
}
.about-highlighted {
	font-size: 24px;
	font-weight: 400;
	line-height: 1.4em;
	margin: 16px 0 32px;
	color: var(--main-color);
}
.content-container-onabout {
	filter: grayscale(100%);
}
.about-text {
	margin: 0 auto;
	max-width: 480px;
	height: calc(100% - 32px);
	font-size: 14px;
	line-height: 22px;
}
.arrow-down {
	position: absolute;
	top: 80%;
	width: 100%;
	margin:auto;
}
.content-portfolio {
	position: absolute;
	top:100%;
	width: 100%;
	min-height: 100%;
	background-color:rgba(240,240,240,.9);
	padding: 16px;
	box-sizing: border-box;
	box-shadow: inset 0 0 4px var(--gray01);
}
	/*-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 91%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 91%);*/
.portfolio-title {
	text-align: right;
}
.portfolio-items-container {
	max-width: 1500px;
	margin: 96px auto 16px;
}
.projects-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 100%;
	margin: auto;
	max-width: 1300px;
}
.crossed-container {
    position: absolute;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    width: 100%;
}
.crossed {
    height: 100%;
    width: 100%;
    background: 
    linear-gradient(to top left,
        rgba(24, 78, 104,0) 0%,
        rgba(24, 78, 104,0) calc(50% - 0.8px),
        rgba(024, 78, 104,0.4) 50%,
        rgba(24, 78, 104,0) calc(50% + 0.8px),
        rgba(24, 78, 104,0) 100%),
    linear-gradient(to top right,
        rgba(24, 78, 104,0) 0%,
        rgba(24, 78, 104,0) calc(50% - 0.8px),
        rgba(24, 78, 104,0.4) 50%,
        rgba(24, 78, 104,0) calc(50% + 0.8px),
        rgba(24, 78, 104,0) 100%);
}
.portfolio-item {
	background-color:var(--white-color);
	width: 240px;
	margin: 16px 8px 0;
	min-height: 200px;
	padding: 16px;
	border: 1px solid var(--main-color-opacity-20);
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
	position: relative;
	box-shadow: 0 0 4px var(--gray01);
	text-align: left;
	filter: inherit!important;
}
a.portfolio-item:hover {
	border: 1px solid var(--main-color)!important;
	cursor: pointer;
	filter: inherit!important;
}
.portfolio-item-personal {
	background-color:var(--main-color-opacity);
	color:var(--white-color);
	border: 1px solid var(--main-color);
}
.portfolio-item-personal .external-link {
	color:var(--white-color);
}
.portfolio-item-personal .client-title, .portfolio-item-personal .project-title, .portfolio-item-personal .project-code {
	color:rgba(255,255,255,.75)!important;
}
.portfolio-item-personal:hover .client-title, .portfolio-item-personal:hover .project-title,  .portfolio-item-personal:hover .tools, .portfolio-item-personal:hover .project-code {
	color:var(--white-color)!important;
}
.portfolio-item-personal .tools {
	background-color: var(--main-color-opacity)!important;
}
.projects-container:hover .portfolio-item:not(:hover) {
	filter: blur(1px);
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
}
.portfolio-item:hover .client-title {
	color:var(--main-color);
}
.portfolio-filters {
	color:var(--main-color);
	cursor: default;
	font-size: 16px;
	text-transform: uppercase;
	width: 100%;
	text-align: center;
}
.portfolio-filters a {
	color:var(--main-color);
	margin: 0 8px;
	font-size: 12px;
	font-weight: 700;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
	position: relative;
}
.portfolio-filters a:hover {
	cursor: pointer;
}
.portfolio-filters a:hover:after, a.vermas:hover:after, .dev-tag-selected:after {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	width: 0;
	background: var(--main-color-opacity-20);
	height: 12px;
	animation-name: vermas;
 	animation-duration: 0.5s;
 	animation-fill-mode: forwards;
}
@keyframes vermas {
  from {
  	width: 0;
  }
  to {
  	width: 100%;
  }
}
.client-title {
	color:var(--gray02);
	text-transform: uppercase;
	font-size: 24px;
	line-height:1.2em;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
	padding: 0 0 8px;
}
.project-info-container {
	align-items: baseline;
	margin: 0 0 88px;
}
.project-title {
	color:var(--gray02);
	font-size: 18px;
	top:2px;
	margin: 16px 0;
	position: relative;
	line-height: 1.4em;
}
.project-date-place {
	font-size: 14px;
	margin: 0 0 16px 0;
}
.project-code {
	font-family: 'Roboto Mono', sans-serif;
	font-size: 14px;
	color:var(--gray03);
	line-height: 1.6em;
	margin: 8px 0 0;
}
.portfolio-item:hover .project-code {
	color: var(--main-color);
}
.tools {
	background-color: var(--gray01);
	position: absolute;
	padding: 16px;
	left:0;
	bottom:0;
	width: 100%;
	box-sizing: border-box;
	color: var(--gray03);
	font-size: 14px;
	line-height: 1.6em;
}
.portfolio-item:hover .tools {
	background-color: var(--main-color-opacity-20);
}

footer {
	width:  calc(100% - 80px);
	left: 40px;
	position: absolute;
	height: 40px;
	bottom:0;
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	color:var(--gray03);
	bottom:-100px;
	animation-name: footer;
 	animation-duration: 1s;
 	animation-delay: 3.2s;
 	animation-fill-mode: forwards;
 	z-index: 20;
}
@keyframes footer {
  from {
  	bottom:-100px;
  }
  to {
  	bottom:0px;
  }
}
.fiscal-info {
	text-transform: uppercase;
	padding: 12px 0 0;
	color:var(--gray02);
	cursor: pointer;
	font-size: 11px;
}
.contact-info {
	padding: 12px 0 0;
	display: flex;
}
.contact-info a {
	color:var(--gray03);
}
.mail-icon {
	display: none;
}
.fa-envelope {
	font-size: 13px;
}
.fa-linkedin {
	margin:0 0 0 16px;
}
.fa-github {
	position: relative;
	margin:0 0 0 16px;
}
footer i {
	font-size: 16px!important;
	line-height: 0.6rem!important;
}

.fiscal-info-modal {
	z-index: 10;
	bottom:30px;
	left: 40px;
	position: fixed;
	height: 88px;
	width: 140px;
	padding: 16px;
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
	display: none;
}
.fiscal-info-modal img {
	width: 56px;
	filter: grayscale(100%);
	transition: ease-out 1s;
	-webkit-transition: ease-out 1s;
}
.fiscal-info-modal img:hover {
	filter: inherit;
}

.project-container {
	max-width: 1300px;
	width: 100%;
	margin: 40px auto;
	box-sizing: border-box;
	padding: 0 24px;
}
.project-container .mobile {
	margin: 8px 0;
	max-width: 31%;
}
.project-container .desktop, video {
	border:1px solid var(--gray05);
	padding: 8px;
	box-sizing: border-box;
	box-shadow: 0 0 4px var(--gray01);
	margin: 4px 0;
}
.webkit-img {
	max-height: 600px;
	margin: auto;
}
.horizvideosx3 video.mobile {
	max-height: 500px;
	height: -webkit-fill-available;
}
.poster {
	border:1px solid var(--gray05);
	padding: 8px;
	box-sizing: border-box;
	margin: auto;
	max-height: 800px;
	background-color: var(--white-color);
	max-width: 100%;
	box-shadow: 0 0 4px var(--gray01);
}
.branding {
	border:1px solid var(--gray05);
	background-color: var(--white-color);
	padding: 8px;
	box-sizing: border-box;
	margin: auto;
	width: 100%;
	box-shadow: 0 0 4px var(--gray01);
}
.mobile img {
	width: 100%;
	border:1px solid var(--gray05);
	background-color: var(--white-color);
	padding: 24px 8px 40px;
	box-sizing: border-box;
	box-shadow: 0 0 4px var(--gray01);
}
.branding-img-desktop {
	display: inherit;
	margin: 0 0 4px;
}
.branding-img-mobile {
	display: none;
}
.project-main-title {
	color: var(--gray02);
	text-transform: uppercase;
	font-size: 32px;
	line-height: 1.2em;
	font-weight: 300;
}  
.project-subtitle-container {
	font-weight: 400;
	color:var(--main-color);
	margin: 24px 0 0;
	width: 100%;
	text-transform: uppercase;
}
.about-text .project-date {
	margin: 8px auto;
}
.project-date {
	letter-spacing: 0.1em;
	color: var(--main-color);
	font-size:12px;
	font-weight: 600;
	margin: 8px auto;
	position: relative;
	width: fit-content;
	width: -webkit-fit-content;
}
.project-date:after {
	content: '';
	border-bottom:1px solid var(--main-color);
	display: block;
	width: 100%;
	padding: 4px 0 0;
}
.project-description {
	font-size: 16px;
	line-height: 1.5em;
	margin: 4px 8px 16px 0;
	width: 100%;
} 
.project-container-code {
	margin: 8px;
	width: 100%;
	line-height: 1.6em;
	z-index: 10;
	position: relative;
	color: var(--gray02);
}
.separator {
	margin: 40px 0;
	width: 100%;
	height: 2px;
	background-color: var(--white-color);
}
.product-design-pri {
	position: absolute;
	width: 25%;
	left: 15%;
	top: 11%;
	z-index: 5;
}
.external-link {
	padding: 4px;
	font-weight: 700;
}
.external-link i {
	margin: 0 4px;
}


/* Hero Section */
.hero {
    background-color: var(--main-color);
    color: #ffffff;
    padding: 4rem 1.5rem;
    border: 1px solid var(--secondary-color);
}
.hero-container {
	max-width: 1200px;
	margin: auto;
}

.hero-title {
    font-weight: 100;
    font-size: 2.25rem;
    margin-bottom: 3rem;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.hero-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-block {
}

.info-label {
    color: var(--secondary-color);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.info-label-small {
    color: var(--white-color);
    font-size: 0.8rem;
    margin:1rem 0 0.5rem;
    line-height: 1.2rem;
}

.info-label-dark {
    color: #537585;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.info-text {
    font-size: 1rem;
    line-height: 1.7;
}

.info-list {
    list-style: disc;
    padding-left: 1.5rem;
    margin-top: 1rem;
}

.info-list li {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}
.tools-solution-space {
	margin: -56px;
	height: 0;
}

.divider {
		display: none;
    height: 1px;
    background-color: #537585;
    width: 100%;
    margin: 0 0 56px;
}

.hero-image-container {
    width: 100%;
}

.hero-image {
    width: 100%;
    height: auto;
}

/* Main Content */
.main-content {
    padding: 4rem 1.5rem;
    margin: auto;
    max-width: 1200px;
}

.content-section {
    margin-bottom: 6rem;
}

.section-title {
    color: var(--main-color);
    font-size: 1.875rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-weight: 500;
    color: #537585;
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
}

.section-highlighted-text {
    font-weight: 500;
    color: var(--white-color);
    font-size: 1.5rem;
    font-style: italic;
    display: block;
}

.section-text {
    color: var(--main-color);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.section-text-dark {
    color: #1c1a23;
}

.section-header {
    margin-bottom: 2rem;
}

.section-header-simple {
    margin-bottom: 2rem;
}

.content-image {
    width: 100%;
    height: auto;
}
.content-image-max {
	max-width: 330px;
	width: 100%;
	margin: auto;
}

.image-caption {
    padding: 1rem;
    border: 1px solid var(--secondary-color);
    height: fit-content;
    box-sizing: border-box;
    max-width: 100%;
}

.image-caption p {
    color: var(--main-color);
    font-size: 0.875rem;
    line-height: 1.7;
}

.image-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.docusign-image-container {
    position: relative;
}

.arrow-indicator {
    display: none;
}

.arrow-svg {
    width: 4rem;
    height: 1rem;
    color: var(--secondary-color);
}

.two-column, .three-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* User Testing Section */
.user-testing {
    margin-bottom: 6rem;
}

.testing-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.testing-info {
    margin-bottom: 1rem;
}

.testing-quotes {
    background-color: var(--main-color);
    padding: 2rem 1.5rem;
}

.quotes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.quote-card {
    color: #ffffff;
    border: 1px dashed var(--secondary-color);
    padding: 8px 16px;
}

.quote-text {
    font-style: italic;
    font-size: 0.875rem;
    line-height: 1.7;
}

.quote-bold {
    font-weight: 700;
}

/* Thank You */
.thank-you {
    text-align: center;
    padding: 1rem 0;
}

.thank-you-text {
    color: var(--secondary-color);
    font-size: 1.875rem;
}

.tmrw-generalcomponents {
	background-color: #00122E;
	padding: 16px;
	border-radius: 8px;
	width: 100%;
	box-sizing: border-box;
}
.tmrw-generalcomponents-content {
	border: 1px solid var(--secondary-color);
	padding: 8px;
	margin: 8px 0;
	border-radius: 8px;
	box-sizing: border-box;
}
.tmrw-img-max {
	max-width: 250px;
	margin: 0 auto;
}
.users-icons {
	width: 20px;
	height: fit-content;
}
.users-labels {
	font-weight: 600;
	color: var(--secondary-color);
	padding: 0 16px 0 8px;
}
/* Results Section */
.result-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.results-label {
	text-align: center;
	font-size: 0.7rem;
}

.result-circle {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-percentage {
    position: absolute;
    font-size: 32px;
    font-weight: 300;
    color: var(--main-color);
}
		/* Tablet Styles */
		@media (min-width: 768px) {
		    .hero {
		        padding: 5rem 3rem;
		    }

		    .hero-title {
		        font-size: 3.75rem;
		        margin-bottom: 4rem;
		    }

		    .main-content {
		        padding: 6rem 3rem;
		    }

		    .content-section {
		        margin-bottom: 8rem;
		    }

		    .section-title {
		        font-size: 2.25rem;
		    }

		    .section-subtitle {
		        font-size: 1.5rem;
		    }

		    .section-text,
		    .quote-text,
		    .image-caption p {
		        font-size: 1rem;
		    }

		    .info-label {
		        font-size: 1.25rem;
		    }

		    .info-text,
		    .info-list li {
		        font-size: 1.125rem;
		    }

		    .testing-quotes {
		        padding: 2rem;
		    }

		    .quotes-grid {
		        grid-template-columns: repeat(2, 1fr);
		        gap: 2rem;
		    }

		    .thank-you-text {
		        font-size: 2.25rem;
		    }
		}

		/* Desktop Styles */
		@media (min-width: 1024px) {
		    .hero {
		        padding: 6rem 6rem;
		    }

		    .hero-title {
		        font-size: 4.5rem;
		    }

		    .hero-grid {
		        grid-template-columns: repeat(2, 1fr);
		        gap: 4rem;
		    }

		    .main-content {
		        padding: 6rem 6rem;
		    }

		    .two-column {
		        grid-template-columns: repeat(2, 1fr);
		    }
		    .three-column {
		        grid-template-columns: repeat(3, 1fr);
		    }

		    .testing-content {
		        grid-template-columns: 2fr 3fr;
		        gap: 3rem;
		    }

		    .arrow-indicator {
		        display: block;
		        position: absolute;
		        top: 50%;
		        right: 15%;
		        transform: translateY(-50%);
		    }
		    .divider {
		    	display: block;
		    }
		    .tools-solution-space {
		    	height: 17px;
		    	margin: 0;
		    }

		    .content-image-max {
					margin: 0;
				}
				.tmrw-generalcomponents {
					padding: 40px;
				}
				.tmrw-generalcomponents-content {
					padding: 24px 48px;
					margin: 24px 0;
				}
				.tmrw-img-max {
					max-width: 550px;
					margin: 0 auto;
				}
		}

		/* Large Desktop Styles */
		@media (min-width: 1280px) {
		    .hero {
		        padding: 6rem 8rem;
		    }

		    .main-content {
		        padding: 6rem 8rem;
		    }
		}

		/* Extra Large Desktop Styles */
		@media (min-width: 1536px) {
		    .hero {
		        padding: 6rem 10rem;
		    }

		    .main-content {
		        padding: 6rem 10rem;
		    }
		}

		@media only screen and (max-width: 393px) {

			.portfolio-welcome-open {
				height:calc(100% + 90px)!important;
			}
		}

		@media only screen and (min-width: 394px) {

			.portfolio-welcome-open {
				height:calc(100% + 60px)!important;
			}
		}

		@media only screen and (max-width: 700px) {
			header, footer {
				width: calc(100% - 40px);
				left: 20px;
			}
			.welcome-hola {
				font-size: 80px;
			}
			.horizontal-between {
				justify-content: center;
			}
			.portfolio-welcome {
				width:100%;
				min-height: 100%;
				box-sizing: border-box;
				position: relative;
				padding: 16px;
			}
			.welcome-title {
				transform:inherit;
				left:0;
			}
			.main-sec-title {
				font-weight: 600;
			}
			.title-right {
				font-size: 28px;
				position: absolute;
				left: 24px;
				width: 100%;
				text-align: center;
			}
			.portfolio-item {
				margin: 16px 8px;
			}
			.main-title {
				font-size: 22px;
				text-align: center;
				position: relative;
			}
			.secondary-title {
				margin: 0;
			}
			.mail-icon {
				display: block;
				margin:0 16px 0 0;
				top:-1px;
				position: relative;
			}
			.mail-label, .language-label, .not-mobile, .pantone {
				display: none;
			}
			.display-flex {
				display: flex;
			}
			.mas-info {
				color: var(--white);
				font-size: 16px;
				padding: 13px 0 0 8px;
			}
			.language-label-mobile {
				display: block;
			}
			.project-container .mobile {
				box-sizing: border-box;
				margin: 8px 0;
				max-width: 100%;
			}
			.content-container-onabout {
				filter: inherit;
			}
			.aboutmelink {
				top: 8px;
			}
			.img-main-index {
				display: none;
			}
			.content-container {
				animation-name: content-container-mobile;
			}
			footer i {
				font-size: 20px!important;
			}
			@keyframes content-container-mobile {
			  0% {
			  	height: 100% ;
				width:  100%;
				top:0;
				left: 0;
				overflow-y: hidden;
				opacity: 0;
			  }
			  90% {
			  	height: calc(100% - 80px);
				width:  calc(100% - 40px);
				top:40px;
				left: 20px;
				overflow-y: hidden;
				opacity: 1;
			  }
			  100% {
			  	height: calc(100% - 80px);
				width:  calc(100% - 40px);
				top:40px;
				left: 20px;
			  	overflow-y: overlay;
			  	opacity: 1;
			  }
			}
			.fa-github {
				margin: 0 0 0 26px;
			}
			.branding-img-desktop {
				display: none;
			}
			.branding-img-mobile {
				display: inherit;
				margin: 0 0 4px;
			}
			.portfolio-welcome {
				display: block;
			}
			.portfolio-filters {
				line-height: 32px;
			}
			.welcome-img-container {
				max-height: 80px;
			}
			.welcome-title-container {
				grid-column: 0;
			  grid-row: 0;
			  text-align: center;
			  margin: auto;
			}
			.img-main-index {
				opacity: 0;
			}
			.welcome-img-position
			{
				float: none;
				margin: 0;
			}
		}

		@media only screen and (max-width: 571px) {
			.square-item {
				display: none!important;
			}
		}

		@media only screen and (max-height: 450px) and (min-width: 700px) {
			.pantone {
				display: none;
			}
			.main-title {
				font-size: 18px;
			}
			.img-main-index {
				display: none;
			}
			.aboutmelink {
				top: -23px;
				height: 16px;
				vertical-align: middle;
			}
			.welcome-img-position {
				display: grid;
				height: 100%;
			}
		}
		@media only screen and (max-height: 450px) and (max-width: 699px) {
			.pantone {
				display: none;
			}
			.main-title {
				font-size: 18px;
			}
			.aboutmelink {
				top: 8px;
			}
			.img-main-index {
				display: none;
			}
		}