@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;1,14..32,300&family=Jacquarda+Bastarda+9&display=swap');

body {
  font-family: Inter;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 20%;
  background-color: #ecebef;
  color: #000000;
  margin: 80px auto 80px auto;
  width: 1400px;
}

header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

h1{
  color: #000000;
  font-family: 'Jacquarda Bastarda 9', serif;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 20%;
  align-items: center;
}
nav {
  color: #3909e8;
  font-size: 36px;
  font-family: 'Jacquarda Bastarda 9', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
  line-height: 0.47;
}
a:hover {
  color: #61fd55;
}

h2 {
  color: #000000;
  font-style: light;
  font-family: Inter;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 20%;
  align-items: center;
}

h3 {
  color: #000000;
  font-family: 'Jacquarda Bastarda 9', serif;
  font-size: 36px;
  line-height: 1.5;
  letter-spacing: 20%;
  align-items: center;
}

h4 {
  color: #000000;
  font-family: Inter;
  font-size: 20px;
  line-height: 1.7;
  letter-spacing: 20%;
  align-items: flex-start;
  font-style: light;
}

h5 {
  color: #3909e8;
  font-family: Inter;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 20%;
 
  font-style: light;
  align-items: center;
}

h6{
  color: #3909e8;
  font-family: Inter;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 20%;
  align-items:flex-start;
  font-style: light;
}
a {
  color: #3909e8;
  text-decoration: none;
  margin: 0 0 0 38px;
  transition: 0.75s;
}

section {
  margin: 50px  50px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 32px;
  grid-auto-flow: dense;
 
}
section.brand{
  grid-column: 7 / span 10;
  text-align: center;
}
section.project img {
  grid-column: 1 / span 6;
 width: 800px;
  height: auto;
}
section.project2 img {
  grid-column: 6 / span 8;
   width: 800px;
  height: auto;
}


section.project3 img {
  grid-column: 6/ span 10;
  width: 280px;
  height: auto;
}

section.project4 img {
  grid-column: 3/ span 10;
  width: 800px;
  height: auto;
}

section.project5 img {
  grid-column: 2/ span 10;
  width: auto;
  height: auto;
}
section h1 {
  grid-column: 2/ span 10;
  text-align: left;
}

section h3 {
  grid-column: 2/ span 10;
  text-align: center;
}

section h2 {
  grid-column: 2/ span 10;
  text-align: center;
}

section h4 {
  grid-column: 2/ span 10;
  text-align: left;
}

section h5 {
  grid-column: 2/ span 10;
  text-align: center;
}

section h6 {
  grid-column: 2/ span 10;
  text-align: left;
}

div {
  color: #3909e8;
}