/* REUSABLE */
.divider {
  width: 100%;
  text-align: center;
  height: 100px;
  background-color: var(--secondary);
}

.divider p {
  font-size: calc(var(--subtitle) - 4px);
  font-weight: 500;
  color: var(--white);
}

.reverse {
  flex-direction: row-reverse;
}

.reverse > .project_img {
  justify-content: flex-end !important;
}

.reverse > .project_img a {
  justify-content: flex-end !important;
}

.colored_bg {
  background-color: #e7f5fd !important;
}

.full_img {
  width: 100% !important;
}

.full_img img {
  width: 80% !important;
}

/* MAIN PROJECTS PAGE */
.banner {
  width: 100%;
  height: 12vh;
  margin-top: 70px;
  background-color: var(--primary);
}

.projects_title {
  font-size: calc(var(--subtitle) + 4px);
  font-weight: 500;
  color: var(--white);
  padding-bottom: 1%;
  text-align: center;
}

.projects {
  width: 100%;
  height: auto;
}

/* PROJECT CARDS HORIZONTAL */
.project {
  width: 100%;
  height: auto;
  min-height: 400px;
  background-color: var(--white);
  padding: 0px 200px;
}

.project_img {
  width: 80%;
}

.project_img img {
  width: 70%;
  min-width: 300px;
}

.project_text {
  width: 100%;
  height: 100%;
}

.project_title {
  color: var(--secondary);
  font-size: calc(var(--subtitle) + 4px);
  font-weight: 600;
  text-align: center;
  padding-bottom: 4%;
  text-align: left;
}

.project_desc {
  text-align: left;
  text-align: justify;
  margin-bottom: 30px;
}

.project_desc a {
  text-decoration: underline;
}

/* PROJECT CARDS VERTICAL */

.projects_vertical {
  gap: 4%;
  padding: 0px 200px;
  flex-wrap: wrap;
}

.p_vertical {
  width: 35vw !important;
  height: auto;
  padding: 0px 0px !important;
}

.p_vertical {
  width: 100%;
  margin-bottom: 5%;
}

.p_vertical .project_text {
  align-items: center;
}

.p_vertical .project_img {
  width: 100%;
  justify-content: center;
  margin-bottom: 5%;
}

.p_vertical .project_img img {
  width: 100%;
}

.p_vertical .project_text .project_desc {
  margin-bottom: 3%;
  text-align: center;
}

/* PROJECTS INDIVUDAL PAGES */
.project_text ul {
  margin-left: 18px;
}
.project_text ul li {
  margin: 10px 0px;
}

/* IMAGE GALLERY */

.gallery {
  width: 100%;
  height: 100%;
  margin-top: 50px;
}

.g_title {
  color: var(--secondary);
}

.g_container {
  width: 100%;
  margin-top: 50px;
  flex-wrap: wrap;
  gap: 2.2%;
  padding: 0px 200px;
}

.g_card {
  flex: 1;
}

.g_img {
  width: 100%;
}

.g_text {
  margin-top: 20px;
}

/* MOBILE */
@media (min-width: 200px) and (max-width: 1500px) {
  .project_img img {
    width: 95%;
  }
}

@media (min-width: 200px) and (max-width: 1200px) {
  .project,
  .projects_vertical .g_container {
    padding: 20px 100px;
  }
}

@media (min-width: 200px) and (max-width: 800px) {
  .banner {
    height: 16vh;
    margin-bottom: 50px;
  }

  .projects_title,
  .g_container {
    padding: 0px 30px;
  }

  .project {
    flex-direction: column !important;
    margin-bottom: 50px;
  }

  .project_text {
    justify-content: center;
    align-items: center;
  }

  .project_title {
    text-align: center;
    margin-top: 40px;
  }

  .project_img {
    justify-content: center;
    align-items: center;
  }

  .project_img a,
  .reverse .project_img a,
  .reverse .project_img {
    justify-content: center !important;
    align-items: center !important;
  }

  .project_img a {
    padding: 25px 0px;
  }

  .divider,
  .project,
  .projects_vertical {
    padding: 0px 30px;
  }

  .projects_vertical {
    flex-wrap: wrap;
  }

  .p_vertical {
    width: 100% !important;
    margin-bottom: 70px;
  }

  .p_vertical,
  .p_vertical .project_img img {
    min-width: 300px;
  }

  .g_container {
    flex-wrap: wrap;
  }

  .g_img {
    min-width: 300px;
  }

  .g_card {
    margin-bottom: 50px;
  }
}