/* Start projects */
.projects {
  background-color: #072340;
}
.projects .container {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.projects .project {
  background: #031a30;
  padding: 10px;
  display: flex;
  border-radius: 30px;
  gap: 20px;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .projects .project {
    flex-direction: column;
  }
}
.project .sec-header {
  color: #dae4fb;
  font-size: 1.6rem;
}
@media (max-width: 575px) {
  .project .sec-header {
    text-align: center;
  }
}
/* Start details section */
.project .details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}
.project .details .name {
  color: #dae4fb;
  font-size: 1.3rem;
  align-self: center;
}
.project .details .image {
  align-self: center;
}
.project .details .image img {
  width: 100%;
  max-width: 250px;
}
@media (max-width: 575px) {
  .project .details .image img {
    min-width: 100%;
  }
}
.project .details .description {
  color: white;
  font-size: 0.9rem;
}
.project .details .buttons {
  display: flex;
  gap: 10%;
}
.project .details .buttons .btn {
  width: 40%;
  padding: 5px;
  color: white;
  font-weight: bold;
  text-align: center;
  border: solid 1px #00eaff;
  cursor: pointer;
  transition: 0.4s;
}

.project .details .buttons a:hover {
  color: black;
  background-color: #00eaff;
}
/* End details section */
/* Start takeaways section */
.project .takeaways {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
  background-color: #072340;
}

.project .takeaways li {
  list-style: none;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
}
/* End takeaways section */
/* Start techs sections */
.technologies {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 20px;
  padding: 10px;
}
.technologies .techs {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.technologies .html {
  color: blue;
}
.technologies .css {
  color: rgb(255, 115, 0);
}
.technologies .js {
  color: gold;
}
/* End techs sections */
/* End projects */ ;