html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: inherit;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  font: 400 16px/18px 'Roboto', arial, sans-serif;
  color: #0a0a0a;
  background-color: rgb(194 159 133 / 48%);
}
h1 {
  font: bold 21px / 24px 'Roboto', arial, sans-serif;
}
h2 {
  font: bold 16px/18px 'Roboto', arial, sans-serif;
}
/* ------------------------------------START HEADER---------------------------------------- */
.header {
  padding: 33px 0 32px;
  background-color: #f9faf3;
  background-color:rgb(194 159 133);
  color: #150303;
  font: bold 24px/26px 'Allura-Regular', arial, sans-serif, cursive !important;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  /* border: 1px dashed red; */
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  position: relative;
  padding: 25px 0 25px 0px;
  /* font: bold 24px/31px 'PT Serif', arial, helvetica, sans-serif; */
  /* border: 1px solid red; */
}
.logo__text {
  font: bold 50px/31px 'Allura-Regular', arial, helvetica, sans-serif;
}
.logo__circle {
  transform: translateY(-50%);
  position: absolute;
  width: 28px;
  height: 28px;
}
.logo__circle_color_dark-blue {
  left: 5px;
  top: 43%;
  background: #0056ec;
  background: radial-gradient(237.5% 111.8% at 0% 0%, rgb(91, 72, 58) 0%, rgb(38, 36, 37) 100%);
  border-radius: 50%;
  opacity: 0.7;
}
.logo__circle_color_blue {
  left: 13px;
  top: 45%;
  background: #c8dbfb;
  background: radial-gradient(237.5% 111.8% at 0% 0%, rgb(222, 220, 219) 0%, rgb(135, 130, 133) 100%);
  border-radius: 50%;
  opacity: 0.7;
}
.menu {
  display: flex;
  
}
.menu-item {
  margin-right: 30px;
}
.menu-btn {
  display: none;
}
.fi {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ---------------------------------END HEADER-------------------------------- */
/* ---------------------------------START MAIN-------------------------------- */
.about__content {
  display: flex;
  flex-direction: row;
}
.about__title {
  text-align: center;
  margin-bottom: 0.5625rem;
}
img {
  width: 100%;
  display: block;
}
.aboutMe-img {
  overflow: hidden;
  border-radius: 50%;
  width: 14.65625rem;
  height: 15.375rem;
}
.about__right {
  border-left: 1px solid rgba(34, 33, 45, 0.1);
  padding: 0.34375rem 2.34375rem 1.34375rem;
  /* width: 60%; */
}   
._anim-items._active {
  transform: translate(0, 0);
  opacity: 1;
}
._anim-items {
  opacity: 0;
  transform: translate(0, 20%);
  transition: all 0.8s ease 0s;
}
.about__greeting {
  margin-bottom: 0.9375rem;
}
h3 {
  font-size: 0.9375rem;
}
._anim-items._active {
  transform: translate(0, 0);
  opacity: 1;
}
/* ---------------------------------END MAIN-------------------------------- */
/* ---------------------------------START WORKS----------------------------- */
.works-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.25rem !important;
  margin-bottom: 50px;
}
.works-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Добавляет промежутки между элементами (опционально) */
  justify-content: space-between;
  text-align: center;
  margin-bottom: 15px;
}
.works-item {
  background-color: rgb(194 159 133);
  padding: 10px;
  border-radius: 15px;
}

.works-img {
  margin: 0 auto;
  width: 300px;
  border-radius: 12px;
}
.works-link {
  display: inline-block;
  border: 1px solid rgb(90 60 38);
  padding: 10px;
  /* background-color: rgb(194 159 133); */
  border-radius: 12px;
  transition: background-color 0.3s ease; /* Плавный переход (опционально) */
}
.works-link:hover {
  background-color: rgb(168, 124, 88); /* Фон появляется при наведении */
  color: white; /* Изменение цвета текста (опционально) */
}
/* ---------------------------------END WORKS----------------------------- */
/* ---------------------------------START FOOTER-------------------------- */
.footer {
  /* background-color: rgb(194 159 133); */
  background: radial-gradient(237.5% 111.8% at 0% 0%, rgb(189 145 113) 0%, rgb(38, 36, 37) 100%);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.footer-menu {
  display: flex;
}
.menu-item__social-icons {
  margin-right: 20px;
}
/* ---------------------------------END FOOTER-------------------------- */
@media (max-width: 1037px) {
  .works-list {
    justify-content: space-around;
  }
}
@media (max-width: 1020px) {
  .logo__text {
    font: bold 41px / 31px 'Allura-Regular', arial, helvetica, sans-serif;
  }
  .header {
    padding: 15px 0 15px;
  }
}
@media (max-width: 924px) {
  .logo {
    padding: 13px 0 13px 0;
    margin-right: 44px;
  }
  .logo__text {
    font: bold 35px / 31px 'Allura-Regular', arial, helvetica, sans-serif;
  }
}
@media (max-width: 801px) {
  .menu-btn {
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: transparent;
    order: 1;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 50;
  }
  .btn-line {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: #fff;
    height: 2px;
    transition: .3s ease;
  }
  .btn-line:nth-child(1) {
    top: 0;
  }
  .btn-line:nth-child(2) {
    top: 12px;
  }
  .btn-line:nth-child(3) {
    top: 12px;
  }
  .btn-line:nth-child(4) {
    top: 25px;
  }
  .menu-open .btn-line:nth-child(1) {
    transform: scaleX(0); /* первая риска уменьшаеться до нуля */
  }
  .menu-open .btn-line:nth-child(2) {
    transform: rotate(45deg);
  }
  .menu-open .btn-line:nth-child(3) {
    transform: rotate(-45deg);
  }
  .menu-open .btn-line:nth-child(4) {
    transform: scaleX(0); /* 4 риска уменьшаеться до нуля */
  }
  .menu {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgb(194, 159, 133);
    z-index: 50;
    padding-top: 150px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    transform: translateY(-100%);
    transition: .3s ease;
    will-change: transform;
  }
  .menu-open .menu {
    transform: translateY(0);
  }
  .menu-item {
    margin-right: 0;
    padding: 20px 0;
    font: bold 27px / 31px 'Allura-Regular', arial, sans-serif, cursive !important;
}
  .logo {
    padding: 13px 0 13px 0;
    /* margin-right: 44px; */
  }
  .logo__text {
    font: bold 35px / 31px 'Allura-Regular', arial, helvetica, sans-serif;
  }
  .logo__text-block {
    margin: 0 auto;
  }
  .footer-menu {
    display: flex;
  }
}
@media (max-width: 769px) {
  .about__description {
    font: 400 12px / 16px 'Roboto', arial, sans-serif;
    color: #0a0a0a;
  }
}
@media (max-width: 548px) {
  .aboutMe-img {
    overflow: hidden;
    border-radius: 50%;
    width: 10.65625rem;
    height: 11.375rem;
  }
}
@media (max-width: 433px) {
  .logo {
    display: none;
  }
  /* .about__content {
    flex-direction: column;
    align-items: center;
  } */
  .about__content {
    display: flex;
    flex-direction: column;
    align-items: center;
}
  .about__greeting {
    text-align: center;
  }
  .about__right {
    padding: 0;
  }
  p.about__description {
    font: 400 14px / 18px 'Roboto', arial, sans-serif;
    color: #0a0a0a;
  }
  .about__description p{
    max-width: 100%;
  }
  .about__img {
    align-content: center;
  }
  .aboutMe-img {
    /* display: block; */
    /* max-width: 100%; */
    /* align-items: center; */
    width: 10.65625rem;
    height: 11.375rem;
  }
  .works-img {
    margin: 0 auto;
    width: 300px;
    border-radius: 12px;
  }
}
@media (max-width: 376px) {
  .about__description {
    font: 400 14px / 18px 'Roboto', arial, sans-serif;
    color: #0a0a0a;
  }
  .about__description p{
    max-width: 100%;
  }
  .about__right {
    border-left: 1px solid rgba(34, 33, 45, 0.1);
    padding: 0;
    /* width: 60%; */
  }
}

@media (max-width: 330px) {
  .works-img {
    margin: 0 auto;
    width: 290px;
    border-radius: 12px;
  }
}