@charset "UTF-8";
/* CSS Document */

body, html {height:100%; margin:0; padding: 0;}

body {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  background-color: #080808;
  font-family: "Inter", sans-serif;
}

.mobile-on {
 display: none;
}

.chapeau {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 24px;
 font-style: normal;
 font-weight: 400;
 line-height: 150%; /* 36px */
 margin: 0;
}

h2 {
color: #FFF;
font-family: "Inter", sans-serif;
font-size: 52px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 8px 100px 0 0;
}

h3 {
color: #FFF;
font-family: "Inter", sans-serif;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: normal; 
margin: 0;
}

.header {
 width: 100%;
 box-sizing: border-box;
 display: flex;
 height: 100px;
 padding: 24px 56px 8px 56px;
 justify-content: space-between;
 align-items: center;
 flex-shrink: 0;
}

.logo h1 {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 32px;
 font-style: normal;
 font-weight: 600;
 line-height: normal;
}

.logo {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 32px;
 font-style: normal;
 font-weight: 600;
 line-height: normal;
}


.payoff {
 color: #FFF;
 text-align: right;
 font-family: "Inter", sans-serif;
 font-size: 24px;
 font-style: normal;
 font-weight: 400;
 line-height: normal;
}

nav {
/*  display: flex;
  align-items: center;
  justify-content: center;*/
}

nav a {
	color: #fff;
	text-decoration: none;
	display: block;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0px 0px 0px;  
  transform: translateX(60px); 
}

.title-back{
  color: #FFF;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

.pagetitle h1 {
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 64px 0 0 0;
  text-align: center;
  animation: fadeIn 0.5s 1 ease-out;
  -webkit-animation: fadeIn 0.5s 1 ease-out;
  -moz-animation: fadeIn 0.5s 1 ease-out;
  -o-animation: fadeIn 0.5s 1 ease-out;
  -ms-animation: fadeIn 0.5s 1 ease-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.arrow {
  display: inline-flex;
  align-items: center;
  transition: all 0.1s ease-in 0s;
}

.btn-back:hover .arrow {
  transform: translateX(-10px);
}

.external {
  display: inline-flex;
  align-items: center;
  transition: all 0.1s ease-in 0s;
}

.fact-content:hover .external {
  transform: translateX(10px);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto auto auto auto auto auto;
  column-gap: 16px;
  row-gap: 16px;
  width: 100%;
  height: calc(100% - 100px);
  box-sizing: border-box;
  padding: 16px;
}

.item {
  box-sizing: border-box;
  padding: 32px 40px;
  border-radius: 8px;
}

.item:hover{
	cursor: pointer;
}

.item-4 a, .item-5 a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
} 

.item-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 6;
  border: 1px solid #FF6B00;
  background: #080808 url("../img/portret.png") no-repeat right bottom;
  background-size: 350px auto;
  background-blend-mode: multiply;
  transition: all 0.3s ease-out 0s;
  padding-right: 180px !important;
}

.item-1:hover {
  background: #FF6B00 url("../img/portret.png") no-repeat right bottom;
  background-size: 380px auto;
  background-blend-mode: normal;
}

.item-2 {
  grid-column: 4 / 7;
  grid-row: 1 / 6;
  border: 1px solid #7A3DFF;
  background:  url("../img/iphone-overlay.png") no-repeat right bottom, url("../img/iphone-13-small.png") no-repeat right bottom, #080808;
  background-size: 280px auto, 320px auto;
  background-blend-mode: multiply, multiply;
  transition: all 0.3s ease-out 0s;
}

.item-2:hover {
  background: url("../img/iphone-overlay.png") no-repeat right bottom, url("../img/iphone-13-small.png") no-repeat right bottom, #7A3DFF;
  background-size: 350px auto, 350px auto;
  background-blend-mode: normal, normal;
}

.item-3 {
  grid-column: 1 / 7;
  grid-row: 6 / 8;
  border: 1px solid #ED52CB;
  display: flex;
  padding: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: all 0.3s ease-out 0s;
}

.item-3:hover {
  background-color: #ED52CB;
  cursor: default;
}

.contact-wrap {
  display: flex;
  align-items: center;
  gap: 40px;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

.btn-contact {
  display: flex;
  padding: 16px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 60px;
  background: #FFF;
  color: #080808;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 24px */
  transition: all 0.1s ease-in-out 0s;
}

.item-3:hover .btn-contact {
  transform: rotate(-4deg);
}

 .item-3 a {
	text-decoration: none;
}

.btn-contact:hover {
  background: #52ED74;
}

.item-4 {
  grid-column: 1 / 3;
  grid-row: 8 / 10;
  border: 1px solid #EE1D36;
  transition: all 0.3s ease-out 0s;
}

.item-4:hover {
  background-color: #EE1D36;
}

.item-5 {
  grid-column: 3 / 5;
  grid-row: 8 / 10;
  border: 1px solid #146EF5;
  transition: all 0.3s ease-out 0s;
}

.item-5:hover {
  background-color: #146EF5;
}

.item-6 {
  grid-column: 5 / 7;
  grid-row: 8 / 10;
  border: 1px solid #00D722;
  transition: all 0.3s ease-out 0s;
}

.item-6:hover {
  background-color: #00D722;
}

/*Profile*/
.profile-wrapper{
  display: flex;
  width: 80%;
  margin: 24px auto 20px auto;
  max-width: 1600px;
  flex-direction: column;
  align-items: flex-start;
  gap: 80px;
  padding: 56px;
  box-sizing: border-box;
}

.profile-content {
display: flex;
align-items: center;
align-self: center;
flex-direction: column;
flex-wrap: wrap;
gap: 32px;
}

.profile-content p{
width: 50%;
color:#FFF;
font-family: "Inter", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 128%; /* 25.6px */
margin: 0;
}

.profile-subtitle{
align-self: stretch;
margin-top: 24px;
}

.profile-subtitle h3{
text-align: center;
}

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

.page-wrapper-orange{
	border: solid #FF6B00;
	border-width: 1px 0;
	border-radius: 24px;
	margin: 16px;
}

.contact-widget-wrap {
  border: 1px solid #ED52CB;
  border-radius: 8px;
  display: flex;
  padding: 40px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: all 0.3s ease-out 0s;
}

.contact-widget-wrap:hover {
  background-color: #ED52CB;
  cursor: default;
}

.contact-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

.contact-widget:hover .btn-contact {
  transform: rotate(-4deg);
}

 .contact-widget a {
	text-decoration: none;
}

/*Portfolio*/

iframe {
    aspect-ratio: 16 / 9;
    width: 100% !important;
	border-radius: 12px;
}

.portfolio {
	height: auto;
	padding-bottom: 20px;
}

.page-wrapper-purple{
	border: solid #7A3DFF;
	border-width: 1px 0;
	border-radius: 24px;
	margin: 16px;
}

.projects-wrapper{
  display: flex;
  width: 80%;
  margin: 24px auto 90px auto;
  max-width: 1600px;
  flex-direction: column;
  align-items: flex-start;
  gap: 160px;
  padding: 56px;
  box-sizing: border-box;
}

.project-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  max-width: 1800px;
}

.project-thumb a{
  color: #FFF;
  text-decoration: none;
}

.project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 72px;
  align-self: stretch;
  max-width: 1800px;
}

.project a{
  color: #FFF;
  text-decoration: none;
}


.case-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.case-content h2{
  align-self: stretch;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  margin: 0 0 32px 0px;
}

.project-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  animation: fadeIn 0.5s 1 ease-out;
  -webkit-animation: fadeIn 0.5s 1 ease-out;
  -moz-animation: fadeIn 0.5s 1 ease-out;
  -o-animation: fadeIn 0.5s 1 ease-out;
  -ms-animation: fadeIn 0.5s 1 ease-out;
}

.project-title {
}

.project-title h1 {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 52px;
 font-style: normal;
 font-weight: 600;
 line-height: 120%; /* 36px */
  margin: 8px 0 0 0 ;
}

.project-title h2 {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 52px;
 font-style: normal;
 font-weight: 600;
 line-height: 120%; /* 36px */
}

.project-subtitle {
 color: #FFF;
 font-family: "Inter", sans-serif;
 font-size: 24px;
 font-style: normal;
 font-weight: 400;
 line-height: 150%; /* 36px */
 margin: 0;
}


.project-hero {
	width: 100%;
	height: auto;
	margin-top: 24px;
}

.project-hero img{
	width: 100%;
	height: auto;
	border-radius: 12px;
	opacity: 0;
	animation: fadeIn 0.5s 0.5s 1 normal forwards ease-out;
	-webkit-animation: fadeIn 0.5s 0.5s 1 normal forwards ease-out;
	-moz-animation: fadeIn 0.5s 0.5s 1 normal forwards ease-out;
	-o-animation: fadeIn 0.5s 0.5s 1 normal forwards ease-out;
	-ms-animation: fadeIn 0.5s 0.5s 1 normal forwards ease-out;
}

.btn-project {
  display: flex;
  padding: 16px 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  border: 1px solid #FFF;
  background: #080808;
  color: #FFF;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 24px */
  transition: all 0.1s ease-in-out 0s;
}

.btn-project:hover {
  background: #FFFFFF;
  color: #080808;
}

.project-content {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  align-self: stretch;
  flex-direction: row;
  margin-top: 8px;
}

.project-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  flex: 1 0 0;
  max-width: 400px;
}

.fact-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
  padding-left: 8px;
}

.team {
	border-left: 2px solid #ED52CB;
}

.role {
	border-left: 2px solid #FFAE13;
}

.responsibilities {
	border-left: 2px solid #00D722;
}

.website {
	border-left: 2px solid #146EF5;
}

.fact-title {
  align-self: stretch;
  color: #FFF;
 font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 21.6px */
}

.fact-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #FFF;
 font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 125%; /* 22.5px */
}

.project-results {
display: flex;
width: 72%;
flex-direction: column;
align-items: flex-start;
gap: 24px;
/*padding: 40px 36px 48px 16px;
border-radius: 8px;
border: 1px solid #fff;*/
}

.results-title h2{
  align-self: stretch;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  margin: 0 0 4px 0px;
}

.challenge h2{
  align-self: stretch;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  margin: 0 0 24px 0px;
}

.results-content {
display: flex;
align-items: flex-start;
gap: 32px;
color:#FFF;
font-family: "Inter", sans-serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 128%; /* 25.6px */
}

.results-column  {
flex: 1 0 0;
}

.results-list{
margin: 0;
display: flex;
flex-direction: column;
gap: 24px;
}


/*Legal*/


.legal-content {
display: flex;
align-items: center;
align-self: center;
flex-direction: column;
flex-wrap: wrap;
gap: 32px;
}

.legal-content p{
width: 50%;
color:#FFF;
font-family: "Inter", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 128%; /* 25.6px */
margin: 0;
}

.legal-subtitle{
align-self: stretch;
margin-top: 24px;
}

.legal-subtitle h3{
text-align: center;
}

.page-wrapper-green{
	border: solid #00D722;
	border-width: 1px 0;
	border-radius: 24px;
	margin: 16px;
}

@media (max-width: 1700px) {

h2 {
  margin: 8px 0 0 0;
}
}

@media (min-width: 768px) and (max-width: 1043px) {
	
.mobile-on {
 display: none;
}
	
.header {
 padding: 24px 48px 8px 48px;
}
	
.payoff{
		font-size: 20px;
	}
	
.item {
  padding: 32px;
}
	
.item-3 {
  padding: 0px 8px 8px 8px;
}
	
.item-3:hover .btn-contact {
  transform: none;
}

.contact-wrap {	
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 32px;
}
	
.contact-widget {
  padding: 0px 8px 8px 8px;
}
	
.contact-widget:hover .btn-contact {
  transform: none;
}

.contact-widget-wrap {	
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  font-size: 32px;
}
	
h2 {
  color: #FFF;
 font-family: "Inter", sans-serif;
  font-size: 37px;
  font-style: normal;
  font-weight: 600;
  line-height: normal; 
  margin: 0;
}
	
.profile-wrapper {
    width: 100%;
} 
	
.projects-wrapper {
    width: 100%;
} 
	
.fact-title {
  font-size: 16px;
}

.fact-content {
  font-size: 16px;
}

.project-results {
display: flex;
width: 70%;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}

.results-content {
  color:#FFF;
 font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 128%; /* 25.6px */
}

}

@media (min-width: 768px) and (max-width: 868px) {

.payoff{
		color: #080808;
	}	
}

@media (min-width: 768px) and (max-width: 820px) {
ul {
	padding-inline-start: 14px;
}
	
.profile-content p{
width: 75%;
}
	
.legal-content p{
width: 75%;
}
	
.project-title h2 {
  color: #FFF;
 font-family: "Inter", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: normal; 
  margin: 0;
}
	
.project-subtitle {
		font-size: 20px;
	}
	
.projects-wrapper {
    width: 100%;
} 
	
.project-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	align-self: stretch;
}

.project-hero {
	width: 100%;
	height: auto;
	border-radius: 12px;
	overflow: hidden;
}

.project-hero img{
	width: 100%;
	height: auto;
}
	
.project-facts {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
	flex-wrap: wrap;
    gap: 24px;
    flex: 1 0 0;
    max-width: none;
  }

.project-results {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
	
.results-title {
		margin: 0 0 4px 0;
}
	
.team {
	order: 1;
	flex-basis: 60%;
}

.role {
	order: 2;
	flex-basis: 30%;
}

.responsibilities {
	order: 3;
	flex-basis: 60%;
}

.website {
	order: 4;
	flex-basis: 30%;
}
	
.project-results {
	margin-top: 16px;
}
}

@media (max-width: 767px) {

.mobile-off {
 display: none;
}
	
.mobile-on {
 display: block;
}

body, html {
	height:inherit; 
	margin:0; 
	padding: 8px 0 4px 0;
	}
	
ul {
	padding-inline-start: 14px;
}

	nav{
		order: 3;
	}
	
h2 {
  color: #FFF;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal; 
  margin: 0;
}
	
.chapeau {
 font-size: 20px;
 margin: 0 0 8px 0;
 line-height: 100%;
}

.header {
  padding: 16px 0px 20px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
  height: auto;
}
	
.logo h1 {
 color: #FFF;
 font-size: 32px;
 font-style: normal;
 font-weight: 600;
 line-height: normal;
 margin: 0;
}
	
.logo {
  order: 1;
}

.payoff {
 text-align: center;
 font-size: 20px;
 order: 2;
}
	
.btn-back {
  display: flex; 
  gap: 16px;
  margin: 0px 0px 10px 0;
  align-items: center;
  justify-content: center;
  transform: translateX(0px); 
  align-self: flex-end;
}
	
.title-back{
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
}

.pagetitle h1 {
  color: #FFF;
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  margin: 56px 0 24px 0;
}
	
.grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto auto auto;
  height: auto;
}
	
	
.item {
  padding: 24px;
}
	
.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: #080808 url("../img/portret.png") no-repeat right bottom;
  background-size: 160px auto;
  background-blend-mode: normal;
  padding-bottom: 56px;
  padding-right: 96px !important;
  transition: none;
}
	
.item-1:hover {
  background: #FF6B00;
}

.item-2 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background: url("../img/iphone-overlay.png") no-repeat right bottom, url("../img/iphone-13-small.png") no-repeat right bottom, #080808;
  background-size: 150px auto, 150px auto;
  background-blend-mode: normal, normal;
  padding-bottom: 56px;
  transition: none;
}
	
.item-2:hover {
  background: #7A3DFF;
}

.item-3 {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
  padding: 24px;
  transition: none;
}
	
.item-3:hover .btn-contact {
  transform: none;
}
	
.contact-wrap {	
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  font-size: 32px;
  text-align: left;
}
	
.btn-contact {
  border-radius: 60px;
  border: 1px solid;
  background: #080808;
  border-color: #FFF;
  color: #FFF;
  font-size: 20px;
}

.item-4 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
  transition: none;
}

.item-5 {
  grid-column: 1 / 2;
  grid-row: 5 / 6;
  transition: none;
}

.item-6 {
  grid-column: 1 / 2;
  grid-row: 6 / 7;
  transition: none;
}

/*Profile*/
.profile-wrapper{
  display: flex;
  width: 100%;
  margin: 45px auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 88px;
  padding: 0px 16px 16px;
  box-sizing: border-box;
}

.profile-content {
display: flex;
align-items: center;
align-self: center;
flex-direction: column;
flex-wrap: wrap;
gap: 32px;
}

.profile-content p{
width: 100%;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 128%; /* 25.6px */
}

.profile-subtitle{
align-self: stretch;
}

.profile-subtitle h3{
text-align: center;
}

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

.page-wrapper-orange{
	border-left: 0px;
	border-right: 0px;
	border-radius: 24px;
	margin: 0px;
}	
	
	
/*Portfolio*/

.page-wrapper-purple {
	border-left: 0px;
	border-right: 0px;
	border-radius: 24px;
	margin: 0px;
}	

.projects-wrapper{
  display: flex;
  width: 100%;
  margin: 45px auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 88px;
  padding: 0px 16px 16px;
  box-sizing: border-box;
}

.project {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  align-self: stretch;
  max-width: 2000px;
}

.project a{
  color: #FFF;
  text-decoration: none;
}

.project-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.project-title {
  align-self: stretch;
}
	
.project-title h1{
  font-size: 40px;
}
	
.project-title h2 {
  font-size: 40px;
}

.project-subtitle {
 color: #FFF;
 font-size: 18px;
 font-style: normal;
 font-weight: 400;
 line-height: 120%; /* 36px */
 margin: 0;
}

.project-content {
  flex-direction: column;
  gap: 28px;
}

.project-hero {
	width: 100%;
	height: auto;
	border-radius: 12px;
	overflow: hidden;
}

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

.project-facts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  max-width: none;
}

.fact-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 4px;
  flex: 1 0 0;
  padding-left: 8px;
}

.team {
	border-left: 2px solid #ED52CB;
}

.role {
	border-left: 2px solid #FFAE13;
}

.responsibilities {
	border-left: 2px solid #00D722;
}

.website {
	border-left: 2px solid #146EF5;
}

.fact-title {
  align-self: stretch;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  line-height: 120%; /* 21.6px */
}

.fact-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  line-height: 125%; /* 22.5px */
}

.project-results {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 0px;
margin-top: 8px;
}

.results-title h2{
align-self: stretch;
color: #FFF;
font-style: normal;
font-weight: 600;
line-height: 120%; /* 28.8px */
margin: 0;
}
	
.challenge h2{
  align-self: stretch;
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 28.8px */
  margin: 0 0 48px 0px;
}

.results-content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px 24px 24px 0px;
gap: 28px;
color:#FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 128%; /* 25.6px */
}

.results-column  {
flex: 1 0 0;
}

.results-list{
margin: 0;
display: flex;
flex-direction: column;
gap: 24px;
}

/* Legal */

.legal-content p{
width: 100%;
}
.page-wrapper-green{
	border-left: 0px;
	border-right: 0px;
	border-radius: 24px;
	margin: 0px;
}	

}