/* ------------------------------------------ water-chiller-cooler-dtl ------------------------------------ */

.water-chiller-cooler-dtl {

  padding-top: 110px;

  padding-bottom: 110px;

}



.color-title {

  font-family: "Roboto Cn";

  font-weight: bold;

  color: #253278;

  line-height: 1.2;

  font-size: 30px;

  margin-bottom: 20px;

}

.color-title > span {

  font-family: "Roboto Cn";

  font-weight: bold;

  color: #30a8c1;

  line-height: 1.2;

  font-size: 30px;

}



.project-steps .resp-tabs-list {

  display: flex;

  column-gap: 20px;

  border-bottom: 1px solid #30a8c1;

}

.project-steps .resp-tabs-list > li {

  min-width: 200px;

  height: 62px;

  text-align: center;

  background-color: #eaf4f6;

  color: #253278;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: "Roboto Cn";

  font-weight: bold;

  font-size: 18px;

  line-height: 1.2;

  letter-spacing: 1px;

  text-transform: uppercase;

  border: 0px;

  position: relative;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

.project-steps .resp-tabs-list > li.resp-tab-item.resp-tab-active {

  background-color: #30a8c1;

  color: white;

}

.project-steps .resp-tabs-list > li:hover {

  background-color: #30a8c1;

  color: white;

}

.project-steps .resp-tabs-list > li > img {

  display: none;

}

.project-steps .resp-tabs-list > li.resp-tab-item.resp-tab-active > img {

  display: block;

  position: absolute;

  bottom: -10px;

  left: calc(50% - 11.5px);

}

.project-steps .resp-tabs-container > div.resp-tab-content {

  border: 0px;

  padding: 0px;

}

.project-steps .resp-tabs-list > li.resp-tab-item.resp-tab-active:after {

  position: absolute;

  content: "";

  width: 0;

  height: 0;

  border-left: 12px solid transparent;

  border-right: 12px solid transparent;

  border-top: 12px solid #30a8c1;

  bottom: -11px;

  left: 50%;

  margin-left: -10px;

}

.project-steps .resp-tabs-container {

  background-color: transparent;

  padding-top: 65px;

}

.project-steps

  .resp-tabs-container

  > div.resp-tab-content

  .helf-section

  .right-side

  .img-wrap {

  float: right;

}

/* right-side */

.project-detail-side {

  background-color: #30a8c1;

  padding: 12px 40px 12px 44px;

}

.project-detail-side > li {

  padding: 30px 0px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.project-detail-side > li:last-of-type {

  border-bottom: 0px;

}

.pjct-main-title {

  font-family: "Roboto Cn";

  font-weight: bold;

  text-transform: uppercase;

  margin-bottom: 20px;

  color: white;

  font-size: 20px;

  line-height: 1.1;

}

.pjct-sub-title {

  font-family: "Roboto Cn";

  font-weight: bold;

  margin-bottom: 12px;

  color: white;

  font-size: 16px;

  line-height: 1.2;

}

.pjct-text {

  font-family: "Roboto";

  font-weight: normal;

  font-size: 16px;

  color: white;

  line-height: 1.6;

}

ul.pjct-icon-list {

  display: flex;

  align-items: center;

  column-gap: 10px;

}

/* ul.pjct-icon-list > li { display: flex; align-items: center; justify-self: center; } */

ul.pjct-icon-list > li > a > span {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border: 1px solid white;

  border-radius: 50%;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

ul.pjct-icon-list > li > a > span > img {

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

ul.pjct-icon-list > li > a > span:hover {

  border-color: #253278;

}

ul.pjct-icon-list > li > a > span:hover > img {

  filter: invert(69%) sepia(54%) saturate(1770%) hue-rotate(216deg)

    brightness(97%) contrast(94%);

}

/* right-side */

/* ------------------------------------------ water-chiller-cooler-dtl ------------------------------------ */



/* ------------------------------------------ project-galley-slider ------------------------------------ */



.slider-icon-container {

  position: relative;

}

.project-gallery {

  background-color: #253278;

  padding-top: 90px;

  padding-bottom: 90px;

}

.project-gallery .section-title-40 {

  color: white;

  margin-bottom: 35px;

}

.galley-slid > a > img {

  width: 100%;

}

.galley-slid {

  border-right: 1px solid #253278;

}

.project-galley-slider,

.project-galley-slider .slick-track .slick-slide > * {

  height: 100%;

}

.project-galley-slider .slick-slide > div,

.project-galley-slider .slick-slide > div .galley-slid a.fancybox {

  height: 100%;

}

.project-galley-slider .slick-slide div .galley-slid {

  height: 100%;

}

.project-galley-slider .slick-slide > div .galley-slid a.fancybox {

  background: #fff;

  display: flex !important;

  height: 100%;

  align-items: center;

  justify-content: center;

}

.project-galley-slider .slick-dots li button {

  font-size: 0;

  line-height: 0;

  display: block;

  width: 15px;

  height: 15px;

  padding: 0px;

  cursor: pointer;

  background-color: rgba(255, 255, 255, 0.2);

  border-radius: 50%;

}

.project-galley-slider .slick-dots li button:before {

  width: 15px;

  height: 15px;

  border: 0;

  border-radius: 50%;

  content: "";

  font-family: "slick";

  font-size: 6px;

  line-height: 20px;

  position: absolute;

  top: 0;

  left: 0;

}

.project-galley-slider .slick-dots li.slick-active button:before {

  background-color: #30a8c1;

}

.project-galley-slider .slick-dots {

  bottom: -50px;

}

/* ------------------------------------------ project-galley-slider ------------------------------------ */



/* ------------------------------------------ feature-project-slider-sec ------------------------------------ */



.feature-project-slider-sec {

  padding-top: 90px;

  padding-bottom: 90px;

}

.feature-project-slider-sec .section-title {

  margin-bottom: 38px;

}

/* ------------------------------------------ feature-project-slider-sec ------------------------------------ */



/* Super Large devices (large desktops, less than 1600px) */

@media (max-width: 1599.98px) {

  .water-chiller-cooler-dtl {

    padding-top: 100px;

    padding-bottom: 100px;

  }

  .helf-section.w-75-25 > .left-side {

    padding-right: 50px;

  }

  .helf-section.w-75-25 > .right-side {

    padding-left: 30px;

  }

  .feature-project-block .project-box {

    margin-left: 5px;

    margin-right: 5px;

  }

}



/* Extra Large devices (large desktops, less than 1440px) */

@media (max-width: 1439.98px) {

  .water-chiller-cooler-dtl,

  .project-gallery,

  .feature-project-slider-sec {

    padding-top: 80px;

    padding-bottom: 80px;

  }

  .inner-pg-banner .helf-section > .left-side {

    padding-left: 100px;

  }

  .helf-section.w-75-25 > .left-side {

    padding-right: 40px;

  }

  .helf-section.w-75-25 > .right-side {

    padding-left: 20px;

  }

  .project-steps .resp-tabs-list > li {

    font-size: 16px;

  }

  .project-steps

    .resp-tabs-container

    > div.resp-tab-content

    .helf-section

    .right-side

    .img-wrap {

    padding-left: 10px;

    padding-right: 10px;

  }

  .water-chiller-cooler-dtl {

    padding-left: 10px;

    padding-right: 10px;

  }

}



/* Large devices (desktops, less than 1200px) */

@media (max-width: 1199.98px) {

  .water-chiller-cooler-dtl,

  .project-gallery,

  .feature-project-slider-sec {

    padding-top: 70px;

    padding-bottom: 70px;

  }

  .helf-section.w-75-25 > .left-side {

    padding-right: 25px;

  }

  .helf-section.w-75-25 > .right-side {

    padding-left: 10px;

  }

  .project-detail-side {

    padding: 12px 15px 12px 15px;

  }

  .project-steps .resp-tabs-list {

    column-gap: 7px;

  }

  .inner-pg-banner .helf-section > .left-side {

    padding-left: 50px;

  }

}



/* Medium devices (tablets, less than 992px) */

@media (max-width: 991.98px) {

  .inner-pg-banner .helf-section > .left-side,

  .inner-pg-banner .helf-section > .right-side {

    width: 50%;

  }

  .inner-pg-banner .helf-section > .left-side {

    padding-left: 30px;

  }

  .helf-section.w-75-25 {

    flex-wrap: wrap;

    flex-direction: column;

    row-gap: 25px;

  }

  .helf-section.w-75-25 > .left-side,

  .helf-section.w-75-25 > .right-side {

    width: 100%;

    padding-left: 0px;

    padding-right: 0px;

  }

  .project-detail-side {

    padding: 12px 15px 12px 15px;

    display: flex;

    column-gap: 20px;

    flex-wrap: wrap;

    justify-content: flex-start;

  }

  .project-detail-side > li {

    width: 31%;

  }

  .project-detail-side > li:last-of-type {

    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  }

  .project-galley-slider.slick-initialized.slick-slider.slick-dotted {

    padding-left: 10px;

    padding-right: 10px;

  }

  .project-steps .resp-tabs-container {

    padding-top: 40px;

  }

}



/* Small devices (landscape phones, less than 768px) */

@media (max-width: 767.98px) {

  .water-chiller-cooler-dtl,

  .project-gallery,

  .feature-project-slider-sec {

    padding-top: 50px;

    padding-bottom: 50px;

  }

  .project-steps .resp-tabs-list > li {

    height: 43px;

    font-size: 14px;

    min-width: 170px;

  }

  .project-steps .resp-tabs-list {

    width: 100%;

    overflow-x: scroll;

    overflow-y: visible;

    border-bottom: 0px;

    position: relative;

    overflow-y: clip;

    padding-bottom: 10px;

  }

  .project-steps .resp-tab-content > .helf-section {

    flex-wrap: wrap;

    flex-direction: column;

    row-gap: 25px;

  }

  .project-steps .resp-tab-content > .helf-section > .left-side,

  .project-steps .resp-tab-content > .helf-section > .right-side {

    width: 100%;

    padding-left: 0px;

    padding-right: 0px;

  }

  .project-steps .resp-tabs-list::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    border-top: 1px solid #30a8c1;

    z-index: 0;

    bottom: 9px;

    width: 700px;

  }

  .project-steps

    .resp-tabs-container

    > div.resp-tab-content

    .helf-section

    .right-side

    .img-wrap {

    float: none;

  }

  .inner-pg-banner .helf-section > .left-side,

  .inner-pg-banner .helf-section > .right-side {

    width: 100%;

  }

  .project-detail-side > li {

    width: 44%;

    min-width: 225px;

  }

  .water-chiller-cooler-dtl {

    padding-left: 0px;

    padding-right: 0px;

  }

  .project-steps .resp-tabs-container {

    padding-top: 30px;

  }

}



/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {

  .inner-pg-banner .helf-section > .left-side {

    padding-left: 10px;

  }

  .project-detail-side {

    column-gap: 6px;

  }

  .project-detail-side > li {

    padding-top: 15px;

    padding-bottom: 15px;

  }

  .water-chiller-cooler-dtl,

  .project-gallery,

  .feature-project-slider-sec {

    padding-top: 40px;

    padding-bottom: 40px;

  }

}