html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

* {
	/* outline: 1px solid red; */
	box-sizing: border-box;

}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
	
}

body {
	line-height: 1;
	background-color: #000000;
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	width: 100%;
}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

nav {
	padding: 0px 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100px;
	background-color: #00000080;
	z-index: 999;
	position: fixed;
	width: 100%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* For Safari support */
	top:0;
}

.menu-items ul {
	display: flex;
	gap: 3rem;
	margin-left: 200px;
}

.menu-items ul li {
	color: rgb(227, 227, 227);
	font-family: "Saira", sans-serif;
	font-size: large;
	font-weight: 100;
	transition: ease 0.7s;
	cursor: pointer;
}

.menu-items ul li:hover {
	color: rgb(255, 255, 255);
	font-family: "Saira", sans-serif;
	font-size: large;
	font-weight: 400;
}

.saira-regular {
	font-family: "Saira", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
	font-variation-settings: "wdth" 100;
  }

#logo {
	display: block;
	height: 20px;
	justify-content: left;
	align-items: flex-end;
}

h1,h2{
	font-size: clamp(3rem, 5vw, 3rem);
}

h1 {
	color: white;
	font-family: "Saira", sans-serif;
	font-weight: 400;
}

h2 {
	color: white;
	font-family: "Saira", sans-serif;
	font-weight: 100;
	transition: ease 1s ;
	cursor: pointer;
}


.text {
	display: flex;
	gap: 0.6rem;
}

.second {
	background-color: #000000;
}

h2:hover {
	color:red;
	font-weight: 400;
}

.words-container-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 40px;
	overflow: hidden;
}

/* .words-container:checked {
	animation: text-move 1s ease-in;
}

@keyframes text-move {
	From {
		transform: translateY(0%);
	} to {
		transform: translateY(-25%);
	}
} */

.section1 {
	display: block;
	height: auto;
	width: auto;
	padding: 90px;
	justify-content: space-between;
	margin-top: 90px;
}

.main-container {
	display: block;
	padding: 10px 5%;
	min-width: 1080px;
	max-width: 1920px;
	margin: 0 auto;
	width: 100%;
	justify-content: center;
}



.intro-text, .intro-image, .logo-container {
	margin-bottom: 90px;
}

.intro-images {
	display: flex;
	gap: 50px;
	justify-content: center;
	padding: 90px;
}

.intro-images img {
	max-width: 30%;	
}


body {
	scrollbar-width: none;     /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
}

body::-webkit-scrollbar {
	display: none;             /* Chrome, Safari, Opera */
}	

h3 {
	color: white;
	font-family: "Saira", sans-serif;
	font-weight: 100;
	font-size: 30pt;
	font-size: clamp(2rem, 3vw, 2rem);
}

h4,h5 {
	font-size: 15pt;
	line-height: 1.3;
	font-size: clamp(1rem, 2vw, 1rem);
}

h4 {
	color: white;
	font-family: "Saira", sans-serif;
	font-weight: 50;
}

h5 {
	color: white;
	font-family: "Saira", sans-serif;
	font-weight: 400;
}


.title {
	margin-bottom: 10px;
}

.main-container img {
	width: 100%;
	display: block;
}

#page-logo {
	margin: 200px 0px;
	width: 400px;
}

.logo-container {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}



.head-subhead {
	margin-bottom: 30px;
}

.info {
	display: flex;
	gap: 200px;
	justify-content: center;
}

.info h4 {
	color: #ffffffae;
}

.info div {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.section2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 90px 90px 0 90px ;
}

.section2-p1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50px;
}

.section2-p1 h5 {
	margin-bottom: 10px;
}
.section2-p1 h4 {
	text-align: center;
}

.section3 {
	display: flex;
	flex-direction: column;
	background-color: #141414;
	padding: 90px;
	gap: 90px;
	justify-content: center;
	align-items: center;
}

.section3 img {
	min-width: 150px;
}


.hero-image {
	aspect-ratio: 16/9;
	object-fit: cover;
}


.image-right, .image-left {
	display: flex;
	width: 100%;
	overflow: hidden;
	align-items:end;
	gap: 40px;
	transition: 1s ease;
}

.landscape169 img {
	flex-shrink: 0;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.portrait916 img {
	aspect-ratio: 9/16;
	object-fit: cover;
}

.works .image-right:hover, .works .image-left:hover{
	background-color: #141414;
	opacity: 90%;
}

.image-right {
	justify-content: right;
	padding: 40px 0 40px 40px;
}

.image-left {
	justify-content: left;
	padding: 40px 40px 40px 0px;
}

.section3-p1 {
	display: flex;
	flex-direction: column;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
}

.landscape img {
	max-width: 1920px;
	justify-content: center;
	align-items: center;
	min-width: 720px;
	height: auto;
	width: 100%;
}

.portrait img {
	max-width: 600px;
	justify-content: center;
	align-items: center;
	min-width: 50px;
	height: auto;
	width: 100%;
}

.section3 h4,h5 {
	flex-shrink: 0;
}

.section4 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 90px;
	gap: 100px
}

.section4-p1 {
	display: flex;
	flex-direction: column;
	width: 700px;
	align-items: center;
}

.section4-p1 h5 {
	margin-bottom: 10px;
}
.section4-p1 h4 {
	text-align: center;
}

.last-section {
	padding: 90px;
	display: flex;
	flex-direction: column;
	gap: 90px;
}

.last-section img {
	height: auto;
	width: 100%;
}

.last-section h1 {
	display: flex;
	justify-content: center;
}

.ad-image {
	display: flex;
	flex-direction: column;
	padding: 90px;
	background-color: #141414;
	justify-content: center;
	align-items: center;
}


.works {
	display: block;
	gap: 50px;
	justify-content: center;
}

.works img {
	max-width: 1000px;
	justify-content: center;
	align-items: center;
	min-width: 720px;
	height: auto;
	width: 100%;
}

.works-container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
	display: block;
	max-width: 1920px;
	margin-top: 180px;
	margin-bottom: 200px;
	justify-content: center;

}

.works-container img {
	width: 100%;
	display: block;
	height: auto;
	overflow-x: hidden;
}

#ArneJacobsen {
	background-color: #920723;
}

#K1Series {
	background: linear-gradient(0deg, #010105, #030821, #4A150C, #282830);
}

#Mamba {
	background: linear-gradient(0deg, #170717, #260626, #711374, #260626);
}

#Exibe {
	background: linear-gradient(0deg, #070D2B, #262C4E, #2C0E50, #1a1a3c);
}


#GoldenWidow {
	background: linear-gradient(0deg, #120E03, #41340F, #6C5D33, #2F2300);
}


#Mate {
	background: conic-gradient(
		#3c3c3c 0deg 90deg,
		#383838 90deg 180deg,
		#3c3c3c 180deg 270deg,
		#383838 270deg 360deg
	  );
  background-size: 300px 300px;
}

#Model {
	background-color: #3D597E;
}

a {
	text-decoration: none;
	color: #ffffff;
}


video {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.twosquare {
	display: flex;
	overflow: hidden;
	
}

.twosquare div {
	display: flex;
	aspect-ratio: 1/1;	
	overflow: hidden;
	width: 50%;
}

.twosquare div img {
	object-fit: cover;
	height: 100%;

}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeInUp 0.6s ease forwards;
  }

.delay-1 {
	animation-delay: 0.3s;
  }

.delay-2 {
animation-delay: 0.6s;
}
  
  @keyframes fadeInUp {
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
  }

.extra-concepts {
	height: 200px;
	background: conic-gradient(
		#E5FF00 0deg 90deg,
		#0033A1 90deg 180deg,
		#E5FF00 180deg 270deg,
		#0033A1 270deg 360deg
	  );
  background-size: 100px 100px;
}

.gradient-body {
	background: linear-gradient(-45deg, #000000, #0e0e0e, #2b2b2b, #0e0e0e, #000000);
	background-size: 400% 400%;
	animation: gradient 30s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* Tablets and small desktops */
@media (max-width: 1024px) {
	.container {
	  padding: 1rem;
	}
  
	.flex-row {
	  flex-direction: column;
	  gap: 1rem;
	}
  
	h1 {
	  font-size: 2rem;
	}
  
	.image-grid img {
	  width: 100%;
	  height: auto;
	}
  }
  
  /* Phones */
  @media (max-width: 768px) {
	nav {
	  flex-direction: column;
	  gap: 0.5rem;
	  align-items: flex-start;
	}
  
	.logo {
	  font-size: 1.5rem;
	}
  
	.nav-links {
	  font-size: 1rem;
	}
  
	.image-grid img {
	  width: 100%;
	}
  
	h1 {
	  font-size: 1.5rem;
	}
  }
  

  footer {
	display: flex;
	justify-content: space-between;
	padding: 10% 20%;
  }

  footer h5 {
	margin-bottom: 10px;
  }

  Footer a {
	text-decoration: underline;
  }