main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 0 7%;
  gap: 96px;
  margin-bottom: 135px;
}

.bloc {
  width: 100%;
  margin-top: 64px;
}

img {
  width: 100%;
  height: auto;
  border-radius:24px;
}

.project {
transition: 0.6s;
transform: translateY(60px);
transition: opacity 0.8, transform 0.8s ease;
}


.project.show {
transform: translateY(0);
}

.about-me{
  display:flex;
  flex-direction:column;
  gap:24px;
}


section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1024px;
  height: auto;
  margin: auto;
  gap: 96px;
}

.quote,
blockquote {
  color: #5d5d5d;
  font-family: var(--font-secondary), sans-serif;
  font-weight:350;
  font-size: 24px;
  font-style: italic;
  line-height: 40px;
  /* 121.212% */
}

.actions {
  color: var(--text-button);
  text-decoration: underline;
}

.content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 72px;
}

.heading-h3{
  color: var(--title-color);
  font-family: var(--font-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  margin: 0;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding-top:64px;
}

.main-text{
  font-size:20px;
  line-height:38px;
}


@media only screen and (max-width:1023px) {
  main{
  padding-top:97px;
}  
}


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

section{
  gap:48px;
}

b{
  font-size:18px !important;
}

.quote{
font-size:21px;
}
  }


.icons{
  width:24px;
  height:24px;
  border-radius:0px;
}

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

  main{
  padding-top:133px;
  gap:32px;
}

.bloc{
  margin-top:0px;
}

  .quote,
blockquote {
  font-size: 18px;
}


.heading-h3{
  font-size:24px;
}
}