/*Загальні стилі*/
body {
  background: #a0b586;
  padding: 40px 40px 40px 40px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

ol {
  padding-left: 20px;
}

h1 {
  font-weight: 700;
  font-size: 45px;
  line-height: 55px;
  color: #161d2a;
  margin-top: 0;
  margin-bottom: 12px;
}

h2 {
  font-weight: 700;
  font-size: 14px;
  line-height: 17px;
  color: #161d2a;
  margin-top: 0;
  margin-bottom: 8px;
}

h3 {
  color: #161d2a;
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 27px;
}

h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #161d2a;
}

/*Стилі для конкретних блоків*/
#wrap {
  background: #ffffd8;
  display: flex;
  flex-direction: row-reverse;
  max-width: 1200px;
  margin: 0 auto;
}

#main {
  padding: 88px 80px 0px 80px;
  box-sizing: border-box;
}

#side {
  background: #f9eb9d;
  padding-top: 40px;
  padding-bottom: 40px;
  box-sizing: border-box;
  width: 370px;
}

#side-txt {
  padding-left: 40px;
  padding-top: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

#p-about {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #595959;
  margin-top: 0;
  box-sizing: border-box;
}
footer {
  background: #ffffd8;
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
  /* padding: 0 40px 40px 40px; */
}

/*Стилі для класів блоків*/
.contact-span {
  color: #161d2a;
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-right: 8px;
}

.contact-link {
  color: #4b5d7d;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-decoration-line: underline;
}

.skills {
  margin-bottom: 10px;
}

.list-black {
  color: #161d2a;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.side-p {
  margin-top: 0;
  margin-bottom: 4px;
}

.main-div {
  margin-bottom: 32px;
  margin-top: 0;
}

.num-list {
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #161d2a;
}

.num-list-link {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  color: #4b5d7d;
}

.num-list-span {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #595959;
}

.big-link {
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #4b5d7d;
  text-decoration: none;
  text-decoration-skip-ink: none;
}
.green_h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #44483e;
}
.grey {
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: #a8a8a8;
  margin-top: 0;
  margin-bottom: 20px;
}

.list-grey {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #595959;
}

.dash {
  color: #161d2a;
}
.portfolio {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 20px 20px 20px;
}
.portfolio_image_horisontal {
  max-width: 1150px;
  padding: 0;
}
.portfolio_image {
  max-width: 100%;
  padding-top: 8px;
}
.portfolio_image_left {
  padding-right: 20px;
  padding-top: 20px;
  max-width: 550px;
}
.portfolio_block_name {
  padding-top: 40px;
  padding-bottom: 24px;
  align-self: center;
}
.portfolio_block_name_link {
  color: #4b5d7d;
  text-decoration: none;
  text-decoration-skip-ink: none;
  padding-top: 40px;
  padding-bottom: 24px;
  align-self: center;
}
.rytoryka {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Keeps equal spacing */
  gap: 20px; /* Adds space between the two images */
  width: 100%;
}

/* Ensure images scale to fit 50% width minus spacing */
.rytoryka .portfolio_image_reference {
  max-width: calc(20% - 10px);
  width: 100%;
  height: auto;
}
.rytoryka .portfolio_image {
  max-width: calc(80% - 10px);
  width: 100%;
  height: auto;
}
.slyzovyk {
  display: flex;
  flex-direction: row;
  justify-content: space-between; /* Keeps equal spacing */
  gap: 20px; /* Adds space between the two images */
  width: 100%;
}

/* Ensure images scale to fit 50% width minus spacing */
.slyzovyk .portfolio_image_reference {
  width: 100%;
  max-height: calc(40% - 10px);
}
.slyzovyk .portfolio_image {
  max-width: calc(50% - 10px);
  width: 100%;
  height: auto;
}

.pidkova {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

/* Each block acts as a 50% width column containing image + text */
.Pidkova_block_small {
  flex: 1 1 0;
  width: calc(50% - 10px);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}

.portfolio_image_reference {
  width: 45%;
  height: auto;
  object-fit: cover;
}

.portfolio_info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.portfolio_info .portfolio_block_name_small {
  text-align: left;
  margin-top: 20px;
  margin-bottom: 10px;
}

.references {
  flex-direction: column;
}

.left {
  margin-left: 20px;
}
.portfolio_link {
  font-size: 32px;
  color: #4b5d7d;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}
#proj {
  margin-top: 40px;
}

/*Стилі для менших екранів*/
@media screen and (max-width: 960px) {
  body {
    padding: 20px;
  }
  #main {
    padding: 40px;
  }
  .portfolio_block_name {
    text-align: center;
  }
}
@media screen and (max-width: 800px) {
  #side {
    width: 250px;
  }
  img {
    width: 250px;
  }
  #side-txt {
    padding: 20px;
  }
}

@media screen and (max-width: 600px) {
  body {
    padding: 0;
  }
  #side {
    width: 200px;
  }
  img {
    width: 200px;
  }
  #main {
    padding: 20px;
  }
  h1 {
    font-size: 32px;
  }
  /* Media query for mobile screens */
  .leleka_bionika {
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    gap: 8px; /* Space between stacked images */
  }

  .leleka_bionika .portfolio_image {
    max-width: 100%; /* Allow images to take full width */
  }
  .profession {
    text-align: center;
    color: #44483e;
  }
  .my_name {
    text-align: center;
  }
  .portfolio_link {
    font-size: 28px;
  }
  #my_name_background {
    background-color: #fff5be;
  }
  .main-div {
    margin-bottom: 16px;
    margin-top: 0;
  }
  /* Stack Old Design and New Design blocks vertically */
  .pidkova {
    flex-direction: column;
    gap: 32px;
  }

  /* Reset 50% width restrictions on mobile */
  .Pidkova_block_small {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  /* Expand images for proper mobile scaling */
  .portfolio_image_reference {
    width: 40%;
    max-width: 320px; /* Keeps image from blowing up too large */
    height: auto;
  }

  /* Ensure text container spans full width */
  .portfolio_info {
    width: 60%;
  }

  /* Center headings on mobile for better visual balance */
  .portfolio_info .portfolio_block_name_small {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 0px;
  }
}
@media screen and (max-width: 510px) {
  #wrap {
    flex-direction: column;
  }
  #side {
    width: 100%;
  }
  img {
    width: 100%;
  }
  #main {
    width: 100%;
  }
}
/* Hide mobile photo by default on desktop */
.mobile-photo {
  display: none;
}

@media screen and (max-width: 510px) {
  /* Show photo under portfolio link on small screens */
  .mobile-photo {
    display: block;
    width: 100%;
    padding-bottom: 16px;
  }

  /* Hide sidebar photo on small screens */
  #side > img {
    display: none;
  }
  /* Center the container holding the portfolio link */
  #proj {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 16px;
  }

  /* Alternatively, center the link directly */
  .portfolio_link {
    display: block;
    text-align: center;
  }

  .slyzovyk {
    flex-direction: column; /* Stack images vertically */
    align-items: center; /* Center images horizontally */
    gap: 8px; /* Space between stacked images */
  }

  .slyzovyk .portfolio_image {
    max-width: 100%; /* Allow images to take full width */
  }
}