/* nunito-sans-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/nunito-sans-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/nunito-sans-v19-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/nunito-sans-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/nunito-sans-v19-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/nunito-sans-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/nunito-sans-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/nunito-sans-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/nunito-sans-v19-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/nunito-sans-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/nunito-sans-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/nunito-sans-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/nunito-sans-v19-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/nunito-sans-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/nunito-sans-v19-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/nunito-sans-v19-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* nunito-sans-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Nunito Sans';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/nunito-sans-v19-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



*{
    box-sizing:border-box;
	interpolate-size: allow-keywords;
}
:root{
	--c-teal: #52bbb5;
	/* --c-teal: #32817D; */
	--c-dark: #1d1d1d;
	

	@media(prefers-reduced-motion: no-preference){
		 --t-std: all 0.3s ease allow-discrete;
		 --t-slow: all 1.5s ease allow-discrete;
	}
	

}
html{
	font-size: 1.25rem; 

	@media(max-width: 105rem){
		font-size: 1.125rem; 
	}
	@media(max-width: 90rem){
		font-size: 1rem; 
	}
}
body{
    margin:0;
    font-family: "Nunito Sans", sans-serif;
    color: #fff;
    background-color: var(--c-teal);
}

p{
	margin: 0 0 1em;
}

h1,h2,h3,h4,h5,h6{
	font-family: "Nunito Sans";
	/* font-weight:bold; */
	/* margin-bottom: 0.25em; */
	/* line-height: 0.9; */
	/* text-wrap: balance; */
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child{
	margin-top: 0em;
}

h1{
	font-size: 3.5rem;
	/* text-transform: uppercase; */
	

	@media(max-width: 39rem){
		font-size: 2.5rem; 
	}
}
h2{
	text-transform:uppercase;
	font-size: 3em;
	
	@media(max-width: 39rem){
		font-size: 2.25rem; 
	}
}
h3{
	font-size: 2.5rem;
	text-transform: uppercase;
	@media(max-width: 39rem){
		font-size: 2rem; 
	}
}
h4{
	font-size: 2.16rem;
	@media(max-width: 39rem){
		font-size: 2rem; 
	}
}
h5{
	font-size: 1.83rem;
	
	@media(max-width: 39rem){
		font-size: 1.75rem; 
	}
}
h6{
	font-size: 1.5rem;
}

a{
	transition: var(--t-std);

}
a:hover{
	color: var(--c-dark);
}

video, img{
	max-width: 100%; 
	display: block; 
}

.btns{
	width: fit-content;
	display: flex;
	flex-direction: column;
	justify-self: center;
	gap:  0.5em;
	margin: 1em 0;
	@media(max-width: 39rem){
		margin-top: 0; 
	}
}

.btn-dark, 
.btn-light{
	border: none;
	background-color: var(--c-dark);
	color: white;
	font: inherit;
	padding: 0.5em 1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: var(--t-std);
	/* line-height: 0.9; */
	appearance: none;
	font-weight: 700;
	display:  flex;
	align-items:  center;
	gap:  0.5em;
	text-align: center;
	justify-content: space-around;
	
	

	&:hover{
		color: var(--c-teal);
		background-color: white; 
		
		@media(prefers-reduced-motion: no-preference){
			scale: 1.1; 
		}
	}

}

.btn-light{
	background-color: white; 
	color: var(--c-teal);
	
	&:hover{
		background-color: var(--c-dark) ;
		color: white; 
	}
}


.btn-instagram:before{
	content: "";
	display:  inline-flex;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" viewBox="0 0 256 256"><path d="M211.756,39.9c2.439,2.458,3.855,5.825,3.855,9.278s-1.406,6.83-3.855,9.278c-2.458,2.458-5.825,3.864-9.288,3.864-.88,0-1.75-.086-2.583-.258-.832-.182-1.664-.44-2.458-.756-.784-.344-1.578-.737-2.267-1.224-.708-.478-1.406-1.014-1.97-1.626-2.458-2.449-3.855-5.825-3.855-9.278,0-.88.086-1.703.258-2.583.134-.842.392-1.664.737-2.458.306-.784.708-1.53,1.186-2.286.478-.689,1.043-1.397,1.664-1.961,4.859-4.898,13.659-4.898,18.576.01ZM233.106,206.835c0,16.902-13.755,30.657-30.657,30.657H53.553c-16.902,0-30.657-13.755-30.657-30.657V49.178c0-16.902,13.746-30.657,30.657-30.657h148.895c16.902,0,30.657,13.746,30.657,30.657v157.657ZM202.449,1.007H53.553C26.99,1.007,5.391,22.605,5.391,49.169l-.019,157.667c0,26.563,21.608,48.162,48.171,48.162h148.895c26.563,0,48.162-21.599,48.162-48.162l.029-157.657c0-26.563-21.618-48.171-48.181-48.171ZM128.001,184.93c-31.394,0-56.924-25.54-56.924-56.924s25.54-56.924,56.924-56.924,56.924,25.54,56.924,56.924-25.54,56.924-56.924,56.924M128.001,53.559c-41.045,0-74.448,33.402-74.448,74.448s33.402,74.448,74.448,74.448,74.448-33.402,74.448-74.448-33.402-74.448-74.448-74.448"/></svg>');
	width: 1.25em;
	aspect-ratio: 1;
	background-size: contain;
	background-repeat: no-repeat;
	filter: invert(63%) sepia(8%) saturate(2309%) hue-rotate(127deg) brightness(102%) contrast(92%);
}
.btn-instagram:hover:before{
	filter: invert(1); 
}


.intro{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	font-weight: 300;
	letter-spacing: -0.02em;
	
	
	& .left-side{
		
	}
	
	& .right-side{
		margin: 0 2em;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		& .img-holder{
			position: relative;
			
			& img:nth-child(1){
			}
			& img:nth-child(2){
				position: absolute;
				transform: translateX(-50%) translateY(-50%);
				top: 39%;
				left: 84%;

				@media(max-width: 48rem){
					width: 20vw; 
				}
				@media(max-width: 39rem){
					width: 30vw; 
				}
			}
		}
	}

	
	& em{
		font-weight: 700;
	}

	& .bigger{
		font-size: 1.5em;
	}

	& ul{
		display: grid;
		grid-template-columns: auto 1px auto;
		width: fit-content;
		color: #1d1d1b;
		font-weight: 600;
		margin: 2em 0;
		gap: 0.5em 1.5em;
		padding: 0;
		
		
		& li{
			list-style-type: none;
			display: flex;
		}

	}

	& h1{
		font-size: 6.5em;
		font-weight: 200;
		line-height: 0.9;
		margin-bottom: 0.35em;
		letter-spacing: -0.02em;
		margin-top: 0.5em;
		

		@media(max-width: 62rem){
			font-size: 4em; 
		}
		@media(max-width: 39rem){
			margin-top: 0; 
		}

		&>span{
			display: inline-block;
			overflow: hidden; 

			@media(prefers-reduced-motion: no-preference){
				
				&:nth-child(1)>span{
					animation-name: moveUp;
					animation-duration: 0.66s;
					animation-fill-mode: forwards;
					animation-iteration-count: 1; 
					animation-delay: 0s;
					display: inline-block;
				}
				&:nth-child(2)>span{
					animation-name: moveRight;
					animation-duration: 0.66s;
					animation-fill-mode: forwards;
					animation-iteration-count: 1;
					animation-delay: 0.33s;
					display: inline-block;
					transform: translateX(-100%);
				}
				&:nth-child(3)>span{
					animation-name: moveDown;
					animation-duration: 0.66s;
					animation-fill-mode: forwards;
					animation-iteration-count: 1; 
					animation-delay: 0.66s;
					display: inline-block;
					transform: translateY(-100%);
				}
				
				&:nth-child(4){
					overflow: hidden;
				
					animation-name: splash;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
					animation-iteration-count: 1; 
					animation-delay: 1.12s;
					display: inline-block;
					transform: scale(0);
				}
			}
		}
	}
	@media(max-width: 48rem){
		gap: 0 1em; 
	}
	@media(max-width: 39rem){
		display: flex; 
		flex-direction: column; 

		& .right-side{
			flex-direction: column-reverse;
		}

		& ul{
			gap: 0.5em 1em;
		}
	}
}

@keyframes moveUp{
	from{
		transform: translateY(100%);
	}
	to{
		transform: none;
		
	}
}
@keyframes moveDown{
	from{
		transform: translateY(-100%);
	}
	to{
		transform: none;
		
	}
}
@keyframes moveRight{
	from{
		transform: translateX(-100%);
	}
	to{
		transform: none;
		
	}
}
@keyframes splash{
	from{
		transform: scale(0);
	}
	66%{
		transform: scale(1.5);
	}
	to{
		transform: scale(1);
		
	}
}

.intro ul li:before{
	content: "";
	border: 3px solid black;
	border-top: none;
	border-right: none;
	aspect-ratio: 2;
	width: 1em;
	transform: translateY(0.35em)  rotateZ(-45deg);
	display: inline-block;
	margin-right: 0.5em;
	align-self: start;
	flex-shrink: 0;
}
.intro ul:before{
	content: "";
	border-right: 1px solid #1d1d1b;
	grid-column: 2;
	grid-row: 1 / -3;
}

header{
	&>.logo{
		display: flex;
		justify-content: center;
		margin: 2em 0;
		
		
		& img{
			width: 17.5rem;
		}

		@media(max-width: 48rem){
			margin: 1em 0; 
		}
	}
}

footer{
	border-top: 1px solid white; 
	padding: 2em 0; 
	margin-top: 4em; 
	text-align: center; 

	& a{
		color: white; 
		text-decoration: none; 
		font-weight: 600; 
	}
}