/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.container {
  max-width: 1310px; }
  @media only screen and (max-width: 1500px) {
    .container {
      max-width: 100%; } }

.daminfrastructure {
  background: #E5F7FA;
  width: 100%;
  padding: 30px 0;
  padding-top: 0; }
  @media only screen and (max-width: 767px) {
    .daminfrastructure {
      padding: 20px 0;
      padding-top: 0; } }
  .daminfrastructure ul {
    margin-left: 0; }

.current_capacity {
  width: 100%;
  padding: 42px 0 20px 0; }
  @media only screen and (max-width: 767px) {
    .current_capacity {
      padding: 20px 0 0 0; } }

@media only screen and (max-width: 767px) {
  .capacity_percentage {
    margin-bottom: 35px; } }

.capacity_percentage em {
  font-size: 12px;
  font-style: normal;
  color: #031E2F;
  line-height: 1;
  margin-bottom: 10px; }
  @media only screen and (max-width: 375px) {
    .capacity_percentage em {
      font-size: 10px; } }

.capacity_percentage h4 {
  font-weight: 700;
  letter-spacing: -0.36px;
  font-size: 40px;
  margin-bottom: 10px;
  line-height: 1;
  color: #031E2F; }
  @media only screen and (max-width: 991px) {
    .capacity_percentage h4 {
      font-size: 28px; } }
  @media only screen and (max-width: 375px) {
    .capacity_percentage h4 {
      font-size: 22px; } }

.capacity_percentage p {
  margin-bottom: 0;
  font-size: 16px;
  color: #4F616D; }
  @media only screen and (max-width: 375px) {
    .capacity_percentage p {
      font-size: 9px; } }

.dam-container-inner {
  width: 100%;
  position: relative; }

.dam_img {
  height: 100%;
  position: absolute;
  width: 50%;
  top: 0;
  right: 0; }
  @media only screen and (max-width: 991px) {
    .dam_img {
      position: relative;
      width: 100%; } }
  .dam_img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 0px 5px 5px 0px; }
    @media only screen and (max-width: 991px) {
      .dam_img img {
        height: 300px;
        border-radius: 0px 0px 5px 5px; } }

.dam_content {
  background: #031E2F;
  border-radius: 5px 0px 0px 5px;
  padding: 48px 50px 32px 48px;
  position: relative; }
  @media only screen and (max-width: 991px) {
    .dam_content {
      border-radius: 5px 5px 0 0; } }
  @media only screen and (max-width: 575px) {
    .dam_content {
      padding: 40px 40px 40px 40px; } }
  @media only screen and (max-width: 375px) {
    .dam_content {
      padding: 20px 20px 20px 20px; } }
  .dam_content::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 105px;
    height: 1px;
    background: #102939; }

.dam_content h3 {
  color: #ffffff;
  font-size: 60px;
  letter-spacing: -1.74px;
  font-weight: 300;
  font-family: 'Rubik', sans-serif;
  line-height: normal;
  margin-bottom: 0; }
  @media only screen and (max-width: 767px) {
    .dam_content h3 {
      font-size: 40px; } }
  @media only screen and (max-width: 575px) {
    .dam_content h3 {
      font-size: 34px; } }
  @media only screen and (max-width: 375px) {
    .dam_content h3 {
      font-size: 30px; } }

.dam_content h4 {
  color: #00B0CA;
  font-size: 60px;
  letter-spacing: -1.74px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 20px; }
  @media only screen and (max-width: 767px) {
    .dam_content h4 {
      font-size: 40px; } }
  @media only screen and (max-width: 575px) {
    .dam_content h4 {
      font-size: 34px; } }
  @media only screen and (max-width: 375px) {
    .dam_content h4 {
      font-size: 30px; } }

.dam_timeline {
  margin-bottom: 130px; }
  @media only screen and (max-width: 991px) {
    .dam_timeline {
      margin-bottom: 30px; } }
  .dam_timeline ul {
    list-style: none;
    display: -ms-flexbox;
    display: flex; }
    .dam_timeline ul li {
      margin-left: 30px; }
      .dam_timeline ul li:first-child {
        margin-left: 0; }
      .dam_timeline ul li span img {
        width: 12px;
        display: inline-block;
        vertical-align: middle; }
      .dam_timeline ul li span em {
        font-size: 12px;
        color: #fff;
        font-weight: 400;
        font-style: normal;
        display: inline-block;
        vertical-align: middle;
        padding-left: 7px; }

.moderate_meter {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -moz-align-items: center;
  -ms-align-items: center;
  -ms-flex-align: center;
      align-items: center;
  padding-top: 32px; }
  .moderate_meter .moderate_img {
    width: 84px; }
  .moderate_meter .moderate_content {
    margin-left: 22px; }
    .moderate_meter .moderate_content em {
      font-style: normal;
      font-size: 11px;
      color: #00B0CA;
      margin-bottom: 6px;
      font-weight: 500;
      display: block;
      font-family: 'Rubik', sans-serif;
      line-height: 1; }
    .moderate_meter .moderate_content strong {
      display: block;
      font-weight: 700;
      font-size: 18px;
      color: #ffffff;
      line-height: 1;
      font-family: 'Rubik', sans-serif; }