/*Colors*/
/*font*/
/* Font Weights */
#projects {
  background-color: #f6f6f6;
  box-sizing: border-box;
  padding: 60px 80px;
}

.strong-white {
  display: flex;
  align-items: center;
  text-transform: uppercase;
  gap: 0px 16px;
  background-color: white !important;
  color: #264555 !important;
}
.strong-white svg path {
  fill: #264555;
}
.strong-white:hover {
  background-color: #66b6cc !important;
  color: white !important;
}
.strong-white:hover svg path {
  fill: #ffffff;
}

.top-prgcts-flex-numb {
  display: flex;
  justify-content: space-between;
  gap: 24px 30px;
  flex-wrap: wrap;
  position: relative;
  align-items: center;
}

.left-side-block-k {
  order: 1;
}

.right-side-block-k {
  display: flex;
  position: relative;
  align-items: center;
  height: 100%;
  order: 2;
}
.right-side-block-k h1 {
  color: #264555;
  /* Heading/L */
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 43.2px */
  text-transform: uppercase;
}

/*Progress bar*/
/*=============*/
.flex-cnb-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: nowrap;
}

.left-side-bar-im {
  box-sizing: border-box;
  display: block;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
}
.left-side-bar-im img {
  display: block;
  margin-left: auto;
  width: 100%;
}

.right-side-bar-im {
  box-sizing: border-box;
  display: block;
  width: -moz-max-content;
  width: max-content;
  height: -moz-max-content;
  height: max-content;
  max-width: 66px;
}
.right-side-bar-im img {
  display: block;
  margin-right: auto;
  width: 100%;
}

.progress-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.progress-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 0px 0;
}

.progress-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 10px;
  background-color: #f6f6f6;
  border-radius: 6px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #61bad2;
  width: 0%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-right: 1px solid black;
}

.progress-percent {
  position: absolute;
  color: #ffffff;
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  min-width: 48px;
  line-height: 140%; /* 25.2px */
  text-transform: uppercase;
  border-radius: 13332.565px;
  background: var(--light-blue, #61bad2);
  /* Main */
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  padding: 11.999px 14px;
  justify-content: center;
  align-items: center;
  top: -20px;
}

.progress-image {
  position: absolute;
  top: -25px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  top: -60px;
}

.progress-image-img {
  width: 36px;
}

.flex-container-dfga {
  display: flex;
  position: relative;
  padding-top: 63px;
  gap: 20px 20px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-container-dfga .left-side-dfga {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  position: relative;
  font-weight: 300;
  font-size: 26px;
  line-height: 29.28px;
  font-family: "Ubuntu", sans-serif;
  color: #0f1207;
}
.flex-container-dfga .left-side-dfga span {
  font-size: 32px;
  font-weight: 700;
  line-height: 36.37px;
}
.flex-container-dfga .right-side-dfga {
  display: block;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  position: relative;
}

.projects-flex {
  display: flex;
  width: 100%;
  position: relative;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 48px;
}
.projects-flex a {
  display: block;
  position: relative;
  text-decoration: none !important;
}

.project-card {
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 10px 0px rgba(0, 0, 0, 0.05);
  min-width: 300px; /* Ensures the minimum width is 300px */
  max-width: 100%;
  box-sizing: border-box;
  background-color: white;
  border-radius: 24px;
  padding: 24px 24px 36px 24px;
  box-sizing: border-box;
}
.project-card img {
  width: 100%;
  position: relative;
}
.project-card .project-name {
  color: #264555;
  font-family: Montserrat, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 28.8px */
  text-transform: uppercase;
  padding-top: 35px;
  padding-bottom: 48.5px;
}
.project-card:hover {
  box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.15), 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
}

.flex-prg-descr {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding-top: 60px;
}

.prg-top-ds {
  padding-bottom: 8px;
  color: rgba(38, 69, 85, 0.7);
  /* Body/S */
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
}

.prg-bold-pd {
  color: #264555;
  /* Link/M */
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 25.2px */
  text-transform: uppercase;
}

.special-par-gh {
  width: 100%; /* Adjust the width as needed */
  line-height: 1.5; /* Adjust line height for readability */
  max-height: 4.5em; /* Restrict height to 3 lines */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for truncated text */
  display: -webkit-box; /* Use for multi-line truncation */
  -webkit-line-clamp: 3; /* Limit to 3 lines */
  -webkit-box-orient: vertical; /* Set the box orientation */
  padding-bottom: 0px !important;
}

@media (min-width: 786px) {
  .project-card {
    flex: 1 1 400px; /* Allows the item to grow, shrink, and sets the base size to 300px */
    min-width: 300px; /* Ensures the minimum width is 300px */
    max-width: calc(50% - 16px); /* Ensures responsiveness for three items per row */
  }
}
@media (min-width: 1100px) {
  .project-card {
    flex: 1 1 400px; /* Allows the item to grow, shrink, and sets the base size to 300px */
    min-width: 300px; /* Ensures the minimum width is 300px */
    max-width: calc(33.33% - 16px); /* Ensures responsiveness for three items per row */
  }
}
@media (max-width: 678px) {
  #projects {
    padding: 24px 20px;
  }
  .left-side-block-k {
    order: 2;
  }
  .right-side-block-k {
    order: 1;
  }
  .right-side-block-k h1 {
    font-size: 24px;
  }
  .top-prgcts-flex-numb {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (min-width: 1500px) {
  #projects {
    background-color: #f6f6f6;
    box-sizing: border-box;
    padding: 60px 10rem;
  }
}/*# sourceMappingURL=main.css.map */