@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

* {
  margin            : 0;
  padding           : 0;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}

body {
  overflow-x: hidden !important;
}

body::-webkit-scrollbar {
  /* WebKit */
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  width             : 5px;
  height            : 100%;
}

p,
a {
  font-size      : 14px;
  line-height    : 25px;
  text-decoration: none;
  margin-bottom  : 0px !important;
}

.loading-container {
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  min-height     : 100vh;
  background     : #fafafa;
  display        : flex;
  align-items    : center;
  justify-content: center;
  z-index        : 1000000;
}

.loading {
  font-size     : 24px;
  letter-spacing: 2px;
}

.loading img {
  filter: grayscale(0%);
  width : 190px;
}

.progress-loading .ant-progress-bg {
  height: 4px !important;
}

.progress-loading .ant-progress-text {
  font-size: 0.7rem !important;
  color    : #f86168 !important;
}

.content {
  padding-top: 0px !important;
  margin     : 0px !important;
}

.title-type-1 {
  font-size  : 24px;
  line-height: 28px;
  font-weight: bold;
  overflow   : hidden;
}

.title-type-1 span {
  color: #1175bb;
}

.title-type-2 {
  font-size   : 18px;
  line-height : 21px;
  overflow    : hidden;
  font-weight : bold;
  padding-left: 0px !important;
  width       : 100% !important;
  padding-left: 0;
}

.article .content .download_img {
  margin-right: 10px;
}

.title-type-2 span {
  color: #1175bb;
}

.short-description {
  overflow: hidden;
}

.button {
  display      : inline-block;
  width        : 100px;
  height       : 30px;
  background   : #1175bb;
  border-radius: 25px;
  font-weight  : bold;
  text-align   : center;
}

.button.active {
  width: 130px;
}

.padding {
  padding-right: 174px;
  padding-left : 175px;
}

.flex {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  -webkit-box-pack : justify;
  -ms-flex-pack    : justify;
  justify-content  : space-between;
}

.contact,
.contact-footer {
  height: 100%;
}

.contact>p,
.contact-footer>p {
  text-transform: uppercase;
  font-weight   : bold;
}

.contact .address,
.contact .phone,
.contact .email,
.contact-footer .address,
.contact-footer .phone,
.contact-footer .email {
  margin-top      : 20px;
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
}

.contact .address img,
.contact .phone img,
.contact .email img,
.contact-footer .address img,
.contact-footer .phone img,
.contact-footer .email img {
  width       : 20px;
  height      : 20px;
  margin-right: 20px;
}

.contact .address p,
.contact .phone p,
.contact .email p,
.contact-footer .address p,
.contact-footer .phone p,
.contact-footer .email p {
  width      : calc(100% - 40px);
  line-height: 25px;
  padding    : 0;
}

header {
  position          : fixed;
  top               : 0;
  left              : 0;
  width             : 100%;
  height            : 70px;
  -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
  box-shadow        : 0px 4px 4px rgba(0, 0, 0, 0.15);
  background        : #fff;
  z-index           : 100;
}

header .header-logo p {
  font-size  : 18px;
  line-height: 21px;
  font-weight: 600;
  color      : #1175bb;
  margin-left: 10px;
}

header .header-logo p span {
  font-weight: bold;
}

header .user-res {
  display : none;
  position: relative;
}

header .user-res .box {
  position          : absolute;
  bottom            : -120px;
  right             : 0;
  min-width         : 180px;
  height            : 150px;
  padding-top       : 20px;
  padding-left      : 20px;
  background        : #fff;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  box-shadow        : 0px 0px 4px rgba(0, 0, 0, 0.15);
  border-radius     : 8px;
  z-index           : -100;
  opacity           : 0;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
}

header .user-res .box p {
  color: #000;
}

header .user-res .box .image-box {
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
  margin-bottom   : 20px;
}

header .user-res .box .image-box img {
  width        : 50px;
  height       : 50px;
  border-radius: 50%;
  margin-right : 10px;
}

header .user-res .box .image-box p {
  font-weight: bold;
}

header .user-res .box .content p {
  margin-bottom     : 10px;
  border-radius     : 6px;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
  font-weight       : normal;
}

header .user-res .box .content p:hover {
  background: #f2f2f2;
}

header .user-res .box.active {
  bottom : -160px;
  opacity: 1;
  z-index: 100;
}

header .navigation {
  height       : 30px;
  margin-bottom: 0px;
}

header .navigation li {
  list-style : none;
  margin-left: 50px;
}

header .navigation li a {
  line-height: 16px;
  color      : #1175bb;
}

header .navigation li .active {
  font-weight: bold;
}

header .navigation li:last-child {
  margin-left: 0px;
}

header .navigation li:last-child .user {
  position        : relative;
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
  width           : 130px;
  height          : 30px;
  background      : #1175bb;
  border-radius   : 25px;
  color           : #fff;
  cursor          : pointer;
  margin-left     : 22px;
}

header .navigation li:last-child .user>img {
  position: relative;
  left    : 4px;
  height  : 25px;
  width   : 25px;
}

header .navigation li:last-child .user>p {
  margin-left : 10px;
  margin-right: 10px;
  max-width   : 100px;
  overflow    : hidden;
}

header .navigation li:last-child .user .box {
  position          : absolute;
  display           : none;
  bottom            : -120px;
  left              : 0;
  width             : 270px;
  height            : 150px;
  padding-top       : 20px;
  padding-left      : 20px;
  background        : #fff;
  -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
  box-shadow        : 0px 0px 4px rgba(0, 0, 0, 0.15);
  border-radius     : 8px;
  z-index           : -100;
  opacity           : 0;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
}

header .navigation li:last-child .user .box p {
  color: #000;
}

header .navigation li:last-child .user .box .image-box {
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
  margin-bottom   : 20px;
}

header .navigation li:last-child .user .box .image-box img {
  width        : 50px;
  height       : 50px;
  border-radius: 50%;
  margin-right : 10px;
}

header .navigation li:last-child .user .box .image-box p {
  font-weight: bold;
}

header .navigation li:last-child .user .box .content p {
  margin-bottom     : 10px;
  border-radius     : 6px;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
  font-weight       : normal;
}

header .navigation li:last-child .user .box .content p:hover {
  background: #f2f2f2;
}

header .navigation li:last-child .user .box.active {
  display: initial;
  bottom : -160px;
  opacity: 1;
  z-index: 100;
}

header .navigation li:last-child .sign-out {
  display: none;
}

header .navigation li:last-child a {
  margin-left: 50px;
}

header .navigation li:last-child .button {
  position   : relative;
  margin-left: 50px;
  line-height: 30px;
  color      : #fff;
  border     : 1px solid #1175bb;
}

header .navigation li:last-child .button.animation {
  overflow: hidden;
}

header .navigation li:last-child .button.animation .bg-animation {
  position          : absolute;
  top               : 0;
  right             : -100%;
  width             : 100%;
  height            : 100%;
  background        : #fff;
  color             : #1175bb;
  border-radius     : 25px;
  line-height       : 30px;
  -webkit-transition: 0.3s;
  -o-transition     : 0.3s;
  transition        : 0.3s;
  font-size         : 14px;
}

header .navigation li:last-child .button.animation.active2 {
  -webkit-animation: buttonAnimate 1.5s ease-in infinite;
  animation        : buttonAnimate 1.5s ease-in infinite;
}

header .navigation li:last-child .button.animation:hover {
  color: #1175bb;
}

header .navigation li:last-child .button.animation:hover .bg-animation {
  right: 0px;
}

header .navigation li:last-child .dn {
  position: relative;
}

header .navigation li:last-child .dn:after {
  content   : '';
  position  : absolute;
  top       : -7px;
  right     : -25px;
  width     : 1px;
  height    : 30px;
  background: #1175bb;
}

header .navigation li:last-child .dn.dn2:after {
  top: 0px;
}

.chat-box {
  position             : fixed;
  bottom               : 50px;
  right                : 20px;
  z-index              : 90;
  display              : -webkit-box;
  display              : -ms-flexbox;
  display              : flex;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
}

.chat-box img {
  cursor: pointer;
  width : 50px;
  height: 50px;
}

.call-now {
  position     : fixed;
  bottom       : 50px;
  left         : 20px;
  padding      : 0px 15px;
  height       : 40px;
  background   : #1175bb;
  border-radius: 25px;
  z-index      : 90;
  cursor       : pointer;
}

.call-now a {
  color       : #fff;
  text-align  : center;
  margin-right: 10px;
}

.call-now img {
  width            : 20px;
  height           : 20px;
  -webkit-animation: ring 1s ease-in-out infinite;
  animation        : ring 1s ease-in-out infinite;
}

@-webkit-keyframes buttonAnimate {
  0% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: translateX(-7px) scale(1) skew(1deg);
    transform        : translateX(-7px) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: translateX(7px) scale(1) skew(1deg);
    transform        : translateX(7px) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: translateX(-7px) scale(1) skew(1deg);
    transform        : translateX(-7px) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: translateX(7px) scale(1) skew(1deg);
    transform        : translateX(7px) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }
}

@keyframes buttonAnimate {
  0% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: translateX(-7px) scale(1) skew(1deg);
    transform        : translateX(-7px) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: translateX(7px) scale(1) skew(1deg);
    transform        : translateX(7px) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: translateX(-7px) scale(1) skew(1deg);
    transform        : translateX(-7px) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: translateX(7px) scale(1) skew(1deg);
    transform        : translateX(7px) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: translateX(0px) scale(1) skew(1deg);
    transform        : translateX(0px) scale(1) skew(1deg);
  }
}

@-webkit-keyframes animateCall {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform        : scale(1) rotate(0deg);
  }

  100% {
    -webkit-transform: scale(1.1) rotate(-15deg);
    transform        : scale(1.1) rotate(-15deg);
  }
}

@keyframes animateCall {
  0% {
    -webkit-transform: scale(1) rotate(0deg);
    transform        : scale(1) rotate(0deg);
  }

  100% {
    -webkit-transform: scale(1.1) rotate(-15deg);
    transform        : scale(1.1) rotate(-15deg);
  }
}

@-webkit-keyframes ring {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    transform        : rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    transform        : rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    transform        : rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    transform        : rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }
}

@keyframes ring {
  0% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }

  10% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    transform        : rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    transform        : rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    transform        : rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    transform        : rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }

  100% {
    -webkit-transform: rotate(0) scale(1) skew(1deg);
    transform        : rotate(0) scale(1) skew(1deg);
  }
}

.header-res {
  display: none;
}

.pagination {
  width            : 100%;
  min-height       : 30px;
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  -webkit-box-pack : center;
  -ms-flex-pack    : center;
  justify-content  : center;
  -ms-flex-wrap    : wrap;
  flex-wrap        : wrap;
  margin-bottom    : 0px !important;
}

.pagination li {
  list-style: none;
  margin    : 0px 15px 0px 0px;
  cursor    : pointer;
}

.pagination li p {
  width        : 15px;
  height       : 100%;
  text-align   : center;
  border-radius: 7.5px;
  color        : #000;
}

.pagination .active p {
  background: #1175bb;
  color     : #fff;
}

.banner-home {
  position        : relative;
  top             : 70px;
  height          : 600px;
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
}

.banner-home img {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  z-index : -1;
}

.banner-home .content {
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  width                : 45%;
}

.banner-home .content .title-type-2 {
  color      : #fff;
  font-size  : 36px;
  line-height: 42px;
  text-align : center;
  font-weight: normal;
}

.banner-home .content .title-type-2 span {
  font-weight: bold;
  color      : #fff;
}

.banner-home .content .short-description {
  margin-top : 30px;
  font-size  : 18px;
  color      : #fff;
  font-weight: 300;
  text-align : center;
}

.banner-home .content .button {
  margin-top : 30px;
  width      : 170px;
  height     : 50px;
  line-height: 50px;
  color      : #fff;
}

.utilities-list .item {
  margin-top: 20px;
}

.utilities-list .item .image-box {
  width : 20px;
  height: 20px;
}

.utilities-list .item .image-box img {
  width : 100%;
  height: 100%;
}

.utilities-list .item>.content {
  width: calc(100% - 40px);
}

.utilities-list .item>.content .title-type-2 {
  font-size  : 18px;
  line-height: 21px;
}

.utilities-list .item>.content .short-description {
  margin-top: 10px;
  min-height: 50px;
  max-height: 75px;
}

.utilities-home .utilities-box {
  margin-top: 50px;
}

.utilities-home .utilities-box>.image-box {
  width : 48.5%;
  height: 440px;
}

.utilities-home .utilities-box>.image-box img {
  width : 100%;
  height: 100%;
}

.utilities-home .utilities-box>.content {
  width: 48.5%;
}

.utilities-home .utilities-box>.content>.short-description {
  margin-top: 20px;
}

.utilities-home .utilities-box>.content .why-choose-gpp {
  margin-top: 20px;
}

.utilities-home .utilities-box>.content .why-choose-gpp .why-choose-box {
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
}

.utilities-home .utilities-box>.content .why-choose-gpp .why-choose-box img {
  width : 70px;
  height: 70px;
}

.utilities-home .utilities-box>.content .why-choose-gpp .why-choose-box .title-type-2 {
  font-family: 'Roboto';
  font-weight: bold;
  margin-top : 20px;
  line-height: 25px;
  font-size  : 18px !important;
  text-align : center;
}

.utilities-home .utilities-box>.content .why-choose-gpp .why-choose-box .title-type-2 span {
  color: #1175bb;
}

.utilities-home .utilities-box.active-1,
.utilities-home .utilities-box.active-3 {
  -webkit-box-orient   : horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction   : row-reverse;
  flex-direction       : row-reverse;
}

.utilities-home .utilities-box.active-2 {
  position        : relative;
  height          : 700px;
  margin-top      : 50px;
  padding-left    : 0px;
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
  background      : #f1f9ff;
  padding-top     : 64px;
}

.utilities-home .utilities-box.active-2>p {
  position   : absolute;
  top        : 50px;
  font-size  : 96px;
  line-height: 144px;
  color      : #fff;
  font-weight: bold;
  font-family: 'Poppins' !important;
  z-index    : 0;
}

.utilities-home .utilities-box.active-2>.image-box {
  width  : 57.5%;
  height : 636px;
  z-index: 1;
}

.utilities-home .utilities-box.active-2>.image-box img {
  width : 100%;
  height: 100%;
}

.utilities-home .utilities-box.active-2>.content {
  width  : 42.5%;
  z-index: 1;
}

.utilities-home .utilities-box.active-2>.content>.short-description {
  height: 50px;
}

.utilities-home .utilities-box.active-1 {
  margin-top: 140px;
}

.utilities-home .utilities-box.active-3 {
  margin-top: 70px;
}

.utilities-home .utilities-box.active-3>.image-box {
  height: 300px;
}

.price-list-container {
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : center;
  -ms-flex-pack        : center;
  justify-content      : center;
  padding-top          : 120px;
}

.price-list-container>.content-main {
  text-align: center;
  width     : 48.5%;
}

.price-list-container>.content-main>.short-description {
  margin-top: 20px;
  height    : 75px;
}

.price-list-container .price-list {
  width            : 100%;
  margin-top       : 30px;
  -webkit-box-align: start;
  -ms-flex-align   : start;
  align-items      : flex-start;
}

.price-list-container .price-list .price-box {
  width             : 31.5%;
  -webkit-box-shadow: 0px 0px 20px #c1e3f9;
  box-shadow        : 0px 0px 20px #c1e3f9;
}

.price-list-container .price-list .price-box>.content-box {
  border-radius: 8px 8px 0px 0px;
  padding      : 0px 20px 0px 30px;
  width        : 100%;
  height       : 150px;
  background   : -webkit-gradient(linear, left top, left bottom, from(#f87c82), to(#f86168));
  background   : -o-linear-gradient(top, #f87c82 0%, #f86168 100%);
  background   : linear-gradient(180deg, #f87c82 0%, #f86168 100%);
}

.price-list-container .price-list .price-box>.content-box .image-box {
  width : 90px;
  height: 90px;
}

.price-list-container .price-list .price-box>.content-box .image-box img {
  width  : 100%;
  height : 100%;
  opacity: 0.2;
}

.price-list-container .price-list .price-box>.content-box .content {
  text-align: right;
}

.price-list-container .price-list .price-box>.content-box .content p {
  color: #fff;
}

.price-list-container .price-list .price-box>.content-box .content p:nth-child(1) {
  font-weight: 600;
}

.price-list-container .price-list .price-box>.content-box .content p:nth-child(2) {
  font-weight: bold;
  font-size  : 36px;
  line-height: 25px;
  margin-top : 20px;
  font-family: 'Lato' !important;
}

.price-list-container .price-list .price-box>.content-box .content p:nth-child(3) {
  margin-top: 20px;
}

.price-list-container .price-list .price-box .utilities-list {
  padding: 0px 20px 0px 20px;
  height : 500px;
}

.price-list-container .price-list .price-box .utilities-list .item .content .short-description {
  min-height: 25px;
  max-height: 50px;
}

.price-list-container .price-list .price-box:nth-child(2) .content-box {
  background: -webkit-gradient(linear, left top, left bottom, from(#34a5df), to(#2077be));
  background: -o-linear-gradient(top, #34a5df 0%, #2077be 100%);
  background: linear-gradient(180deg, #34a5df 0%, #2077be 100%);
}

.price-list-container .price-list .price-box:nth-child(3) .content-box {
  background: -webkit-gradient(linear, left top, left bottom, from(#b758d8), to(#684eb0));
  background: -o-linear-gradient(top, #b758d8 0%, #684eb0 100%);
  background: linear-gradient(180deg, #b758d8 0%, #684eb0 100%);
}

.sign-up-container {
  margin-top  : 50px;
  padding-top : 50px;
  padding-left: 75px;
  background  : #f1f9ff;
  height      : 700px;
}

.sign-up-container .image-box {
  width : 52.5%;
  height: 100%;
}

.sign-up-container .image-box img {
  width : 100%;
  height: 100%;
}

.sign-up-container .sign-up-form {
  width: 44.5%;
}

.sign-up-container .sign-up-form .title-type-1 {
  line-height: 36px;
}

.sign-up-container .sign-up-form .short-description {
  margin-top: 20px;
}

.sign-up-container .sign-up-form form {
  margin-top: 20px;
}

.sign-up-container .sign-up-form form input {
  width        : 100%;
  height       : 50px;
  background   : #fff;
  border-radius: 8px;
  margin-top   : 15px;
  margin-bottom: 15px;
  border       : none;
  padding-left : 30px;
  outline-color: #1175bb;
}

.sign-up-container .sign-up-form form input::-webkit-input-placeholder {
  line-height: 16px;
  font-size  : 14px;
  color      : #000;
}

.sign-up-container .sign-up-form form input::-moz-placeholder {
  line-height: 16px;
  font-size  : 14px;
  color      : #000;
}

.sign-up-container .sign-up-form form input:-ms-input-placeholder {
  line-height: 16px;
  font-size  : 14px;
  color      : #000;
}

.sign-up-container .sign-up-form form input::-ms-input-placeholder {
  line-height: 16px;
  font-size  : 14px;
  color      : #000;
}

.sign-up-container .sign-up-form form input::placeholder {
  line-height: 16px;
  font-size  : 14px;
  color      : #000;
}

.sign-up-container .sign-up-form form .error {
  color: red;
}

.sign-up-container .sign-up-form form button {
  width           : 170px;
  border          : none;
  cursor          : pointer;
  height          : 50px;
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
}

.sign-up-container .sign-up-form form button p {
  margin-right: 10px;
  color       : #fff;
}

.sign-up-noti {
  position             : fixed;
  bottom               : 150px;
  right                : -100%;
  -webkit-transition   : 0.3s;
  -o-transition        : 0.3s;
  transition           : 0.3s;
  cursor               : pointer;
  width                : 300px;
  min-height           : 40px;
  background           : #fff;
  z-index              : 1000;
  padding              : 10px 20px;
  border-radius        : 8px;
  -webkit-box-pack     : start;
  -ms-flex-pack        : start;
  justify-content      : flex-start;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
}

.sign-up-noti img {
  margin-right: 10px;
}

.sign-up-noti p {
  line-height: 40px;
}

.sign-up-noti p span {
  font-weight: bold;
}

.sign-up-noti.active.fail p {
  color: red;
}

.sign-up-noti.active.fail p i {
  color: red;
}

.sign-up-noti.active {
  right: 20px;
}

.sign-up-container.active {
  position: relative;
  width   : 100%;
  height  : calc(100vh - 50px);
}

.sign-up-container.active .image-box {
  max-height: 650px;
}

.article-box {
  -ms-flex-wrap   : wrap;
  flex-wrap       : wrap;
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
}

.article-box .article {
  width       : 31.5%;
  margin-right: 2.75%;
}

.article-box .article .image-box {
  position: relative;
  height  : 205px;
}

.article-box .article .image-box img {
  width : 100%;
  height: 100%;
}

.article-box .article .image-box .date-box {
  position   : absolute;
  top        : 30px;
  left       : -10px;
  height     : 50px;
  width      : 50px;
  color      : #1175bb;
  border     : 1px solid #1175bb;
  background : #fff;
  text-align : center;
  font-family: 'Lato' !important;
}

.article-box .article .image-box .date-box p:nth-child(1) {
  margin-top : 5px;
  font-size  : 18px;
  line-height: 22px;
  font-weight: bold;
}

.article-box .article .image-box .date-box p:nth-child(2) {
  line-height: 17px;
}

.article-box .article .content .title-type-2 {
  margin-top : 30px !important;
  font-weight: 600;
  height     : 42px;
  font-size  : 18px !important;
  color      : #000 !important;
}

.article-box .article .content .short-description {
  display: none;
}

.article-box .article.active {
  margin-right: 0px;
}

.articles-home {
  padding-top: 70px;
}

.articles-home>.title-type-1 {
  text-transform: uppercase;
  text-align    : center;
  margin-bottom : 50px !important;
}

.articles-home>.title-type-1.active {
  text-transform: uppercase;
}

.articles-home .article-box .article:nth-child(1),
.articles-home .article-box .article:nth-child(2) {
  width        : 48.5%;
  margin-bottom: 30px;
}

.articles-home .article-box .article:nth-child(1) .image-box,
.articles-home .article-box .article:nth-child(2) .image-box {
  height: 320px;
}

.articles-home .article-box .article:nth-child(1) .content .title-type-2,
.articles-home .article-box .article:nth-child(2) .content .title-type-2 {
  margin-top: 30px;
  height    : 21px;
}

.articles-home .article-box .article:nth-child(1) .content .short-description,
.articles-home .article-box .article:nth-child(2) .content .short-description {
  display   : inline-block;
  margin-top: 10px;
  height    : 50px;
}

.evaluate-home {
  margin-top: 70px;
}

.evaluate-home .title-type-1 {
  text-align: center;
}

.evaluate-home .evaluate-box {
  position           : relative;
  margin-top         : 50px;
  height             : 400px;
  background         : url('../images/home/evaluate-home.png');
  background-size    : cover;
  background-position: center;
  -webkit-box-pack   : end;
  -ms-flex-pack      : end;
  justify-content    : flex-end;
}

.evaluate-home .evaluate-box .evaluate-list {
  width : 63%;
  height: 100%;
}

.evaluate-home .evaluate-box .evaluate-list .slick-arrow {
  position         : absolute;
  top              : 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform    : translateY(-50%);
  transform        : translateY(-50%);
  left             : -200px;
  height           : 40px;
  width            : 40px;
  border-radius    : 50%;
  border           : 1px solid #1175bb;
  background       : #fff;
  z-index          : 120;
  outline          : none;
  cursor           : pointer;
}

.evaluate-home .evaluate-box .evaluate-list .slick-arrow span {
  display: none;
}

.evaluate-home .evaluate-box .evaluate-list .slick-arrow.slick-prev {
  left               : -260px;
  background-image   : url('/static/web/images/home/slick-prev.svg');
  background-repeat  : no-repeat;
  background-position: center;
}

.evaluate-home .evaluate-box .evaluate-list .slick-arrow.slick-next {
  background         : #1175bb;
  background-image   : url('/static/web/images/home/slick-next.svg');
  background-repeat  : no-repeat;
  background-position: center;
}

.evaluate-home .evaluate-box .evaluate-list .evaluate {
  position     : relative;
  margin-right : 50px;
  width        : 100%;
  height       : 400px;
  padding      : 30px 25px 0px 25px;
  background   : #1175bb;
  border-radius: 8px;
  color        : #fff;
}

.evaluate-home .evaluate-box .evaluate-list .evaluate img:nth-child(1) {
  width : 50px;
  height: 36px;
}

.evaluate-home .evaluate-box .evaluate-list .evaluate img:nth-child(2) {
  position         : absolute;
  top              : 255px;
  right            : 20px;
  width            : 50px;
  height           : 36px;
  -webkit-transform: rotateZ(180deg);
  -ms-transform    : rotate(180deg);
  transform        : rotateZ(180deg);
}

.evaluate-home .evaluate-box .evaluate-list .evaluate .short-description {
  margin-top: 10px;
  max-height: 200px;
}

.evaluate-home .evaluate-box .evaluate-list .evaluate .person {
  margin-top   : 19px;
  width        : 50px;
  height       : 50px;
  border-radius: 50%;
}

.evaluate-home .evaluate-box .evaluate-list .evaluate .author {
  margin-top: 10px;
}

.active-footer {
  display: none;
}

footer {
  height     : 400px;
  padding-top: 50px;
  background : #fff;
  border-top : 1px solid #eeeeee;
}

footer .footer_res {
  display: none;
}

footer.padding {
  padding-left  : 0px !important;
  padding-bottom: 0px !important;
  padding-right : 0px !important;
}

footer .logo-footer {
  width                : 30%;
  height               : 100%;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-align    : start;
  -ms-flex-align       : start;
  align-items          : flex-start;
  -webkit-box-pack     : start;
  -ms-flex-pack        : start;
  justify-content      : flex-start;
}

footer .logo-footer .sign-up-footer {
  width     : 100%;
  margin-top: 30px;
}

footer .logo-footer .sign-up-footer p {
  line-height: 16px;
}

footer .logo-footer .sign-up-footer form {
  position  : relative;
  margin-top: 20px;
  width     : 90%;
  height    : 40px;
  background: #fff;
  padding   : 0px 10px 0px 20px;
}

footer .logo-footer .sign-up-footer form input {
  width  : 100%;
  height : 40px;
  border : none;
  outline: none;
}

footer .logo-footer .safe-container {
  margin-top: 20px;
}

footer .logo-footer .safe-container p {
  text-transform: uppercase;
  font-weight   : bold;
}

footer .categories {
  width : 10%;
  height: 100%;
}

footer .categories p {
  text-transform: uppercase;
  font-weight   : bold;
}

footer .categories ul li {
  list-style: none;
  margin-top: 20px;
}

footer .categories ul li a {
  color: #000;
}

footer .articles-footer {
  width                : 21%;
  height               : 100%;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-align    : start;
  -ms-flex-align       : start;
  align-items          : flex-start;
  -webkit-box-pack     : start;
  -ms-flex-pack        : start;
  justify-content      : flex-start;
}

footer .articles-footer>p {
  text-transform: uppercase;
  font-weight   : bold;
}

footer .articles-footer .article {
  width     : 100%;
  margin-top: 20px;
}

footer .articles-footer .article .image-box {
  width : 40px;
  height: 40px;
}

footer .articles-footer .article .image-box img {
  width        : 100%;
  height       : 100%;
  border-radius: 50%;
}

footer .articles-footer .article .content {
  width: 100%;
}

footer .articles-footer .article .content .title-type-2 {
  font-size  : 14px;
  line-height: 25px;
  height     : 25px;
  font-weight: normal;
  color      : #000;
}

footer .articles-footer .article .content .date {
  font-size  : 13px;
  line-height: 15px;
  color      : rgba(0, 0, 0, 0.5);
  margin-top : 5px;
}

footer .contact-footer {
  width: 28%;
}

footer .contact-footer.active {
  display: none;
}

.reserved-res {
  width         : 100%;
  margin-top    : 30px;
  text-align    : center;
  padding-top   : 10px;
  padding-bottom: 30px;
  border-top    : 1px solid rgba(0, 0, 0, 0.3);
}

.banner-utilities {
  position     : relative;
  top          : 70px;
  margin-bottom: 120px;
  height       : 550px;
}

.banner-utilities img {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  z-index : -1;
}

.banner-utilities .content {
  padding              : 0px 20px;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : center;
  -ms-flex-pack        : center;
  justify-content      : center;
  width                : 40%;
  height               : 54.5%;
  background           : rgba(255, 255, 255, 0.8);
  border-radius        : 8px;
  -webkit-box-shadow   : 0px 0px 4px rgba(0, 0, 0, 0.15);
  box-shadow           : 0px 0px 4px rgba(0, 0, 0, 0.15);
}

.banner-utilities .content .title-type-2 {
  text-transform: uppercase;
  line-height   : 25px;
  color         : #1175bb;
}

.banner-utilities .content .short-description {
  text-align: center;
  margin-top: 10px;
  height    : 100px;
}

.banner-utilities .content .button {
  width        : 65%;
  height       : 40px;
  border-radius: 8px;
  line-height  : 40px;
  font-weight  : 600;
  color        : #fff;
  margin-top   : 20px;
}

.utilities-page .utility {
  margin-bottom: 100px;
}

.utilities-page .utility .image-box {
  width : 48.5%;
  height: 340px;
}

.utilities-page .utility .image-box img {
  width : 100%;
  height: 100%;
}

.utilities-page .utility .content {
  width: 40%;
}

.utilities-page .utility .content .title-type-2 {
  color: #1175bb;
}

.utilities-page .utility .content .short-description {
  margin-top: 20px;
  max-height: 100px;
}

.utilities-page .utility:last-child {
  margin-bottom: 50px;
}

.utilities-page .utility.active {
  -webkit-box-orient   : horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction   : row-reverse;
  flex-direction       : row-reverse;
}

.utilities-page .utility.active .image-box {
  width: 43.5%;
}

.article-page {
  padding-top: 120px;
}

.article-page .title-type-1 {
  text-align   : center;
  margin-bottom: 50px !important;
}

.article-page .article-box .article {
  margin-bottom: 50px;
}

.article-page .article-box .article .content .title-type-2 {
  margin-top: 30px;
  height    : 21px;
  color     : #000 !important;
}

.article-page .article-box .article .content .short-description {
  display   : block;
  margin-top: 10px;
  height    : 75px;
}

.article-details-page {
  padding-top      : 120px;
  padding-bottom   : 50px;
  -webkit-box-align: start;
  -ms-flex-align   : start;
  align-items      : flex-start;
  min-height       : 100vh;
}

.article-details-page .details {
  width: 65.5%;
}

.article-details-page .details .main {
  margin-top: 20px;
}

.article-details-page .details .main img {
  width: 100%;
}

.article-details-page .articles-related {
  width: 31.5%;
}

.article-details-page .articles-related .list-item {
  margin-top: 20px;
}

.article-details-page .articles-related .list-item .item {
  margin-bottom   : 10px;
  -webkit-box-pack: start;
  -ms-flex-pack   : start;
  justify-content : flex-start;
}

.article-details-page .articles-related .list-item .item img {
  width       : 15px;
  height      : 15px;
  margin-right: 10px;
}

.article-details-page .articles-related .list-item .item .short-description {
  color     : #1175bb;
  max-height: 50px;
}

.contact-page {
  padding-top   : 140px;
  padding-bottom: 50px;
}

.contact-page .contact-box {
  width             : 100%;
  background        : #f7fdff;
  -webkit-box-shadow: 4px 4px 10px #c1e3f9;
  box-shadow        : 4px 4px 10px #c1e3f9;
}

.contact-page .contact-box .content {
  width  : 43%;
  padding: 0px 30px;
}

.contact-page .contact-box .content .title-type-2 {
  margin-top : 20px;
  font-weight: normal;
}

.contact-page .contact-box .content .contact {
  width: 100%;
}

.contact-page .contact-box .content .title-2 {
  margin-top : 50px;
  font-weight: bold;
  font-size  : 18px;
}

.contact-page .contact-box .content .title-2 span {
  color: #1175bb;
}

.contact-page .contact-box .image-box {
  width : 57%;
  height: 450px;
}

.contact-page .contact-box .image-box .title-type-2,
.contact-page .contact-box .image-box .short-description {
  display: none;
}

.contact-page .contact-box .image-box iframe {
  width : 100%;
  height: 100%;
  border: none;
}

.sign-in-page,
.sign-up-page {
  position             : relative;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : justify;
  -ms-flex-pack        : justify;
  justify-content      : space-between;
  min-height           : 100vh;
  padding-top          : 100px;
  padding-bottom       : 20px;
}

.sign-in-page>img,
.sign-up-page>img {
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  z-index       : -1;
  -webkit-filter: brightness(75%);
  filter        : brightness(75%);
}

.sign-in-page .page-logo img:nth-child(1),
.sign-up-page .page-logo img:nth-child(1) {
  height: 80px;
}

.sign-in-page form,
.sign-up-page form {
  width      : 370px;
  padding-top: 30px;
}

.sign-in-page form .input-box,
.sign-up-page form .input-box {
  position: relative;
}

.sign-in-page form .input-box img,
.sign-up-page form .input-box img {
  position: absolute;
  top     : 20px;
  left    : 0;
  cursor  : pointer;
}

.sign-in-page form input[type='text'],
.sign-in-page form input[type='email'],
.sign-in-page form input[type='password'],
.sign-up-page form input[type='text'],
.sign-up-page form input[type='email'],
.sign-up-page form input[type='password'] {
  width        : 100%;
  height       : 40px;
  margin-bottom: 20px;
  margin-top   : 10px;
  outline      : none;
  outline-color: transparent !important;
  border       : none;
  border-bottom: 1px solid #fff;
  background   : transparent !important;
  padding-left : 45px;
  font-size    : 14px;
  line-height  : 16px;
  font-weight  : 600;
  color        : #fff;
}

.sign-in-page form input[type='text']:hover,
.sign-in-page form input[type='email']:hover,
.sign-in-page form input[type='password']:hover,
.sign-in-page form input[type='text']:focus,
.sign-in-page form input[type='email']:focus,
.sign-in-page form input[type='password']:focus,
.sign-up-page form input[type='text']:hover,
.sign-up-page form input[type='email']:hover,
.sign-up-page form input[type='password']:hover,
.sign-up-page form input[type='text']:focus,
.sign-up-page form input[type='email']:focus,
.sign-up-page form input[type='password']:focus {
  background: transparent;
}

.sign-in-page form input::-webkit-input-placeholder,
.sign-up-page form input::-webkit-input-placeholder {
  font-size  : 14px;
  line-height: 16px;
  font-weight: 600;
  color      : #fff;
}

.sign-in-page form input::-moz-placeholder,
.sign-up-page form input::-moz-placeholder {
  font-size  : 14px;
  line-height: 16px;
  font-weight: 600;
  color      : #fff;
}

.sign-in-page form input:-ms-input-placeholder,
.sign-up-page form input:-ms-input-placeholder {
  font-size  : 14px;
  line-height: 16px;
  font-weight: 600;
  color      : #fff;
}

.sign-in-page form input::-ms-input-placeholder,
.sign-up-page form input::-ms-input-placeholder {
  font-size  : 14px;
  line-height: 16px;
  font-weight: 600;
  color      : #fff;
}

.sign-in-page form input::placeholder,
.sign-up-page form input::placeholder {
  font-size  : 14px;
  line-height: 16px;
  font-weight: 600;
  color      : #fff;
}

.sign-in-page form .input-box .ant-input,
.sign-up-page form .input-box .ant-input {
  border       : none;
  border-bottom: 1px solid #fff;
}

.sign-in-page form .input-box .ant-input:hover,
.sign-up-page form .input-box .ant-input:hover {
  border-color: #fff;
}

.sign-in-page form .input-box img,
.sign-up-page form .input-box img {
  margin-left: 5px;
}

.sign-in-page form .has-error .ant-input,
.sign-up-page form .has-error .ant-input {
  border-color      : #f86168;
  border-top        : none !important;
  border-left       : none !important;
  border-right      : none !important;
  border-bottom     : 1px solid #f86168;
  outline           : 0;
  -webkit-box-shadow: none !important;
  box-shadow        : none !important;
}

.sign-in-page form .has-error .ant-input:hover,
.sign-up-page form .has-error .ant-input:hover {
  border-color: #f86168;
}

.sign-in-page form .has-error .ant-input::-webkit-input-placeholder,
.sign-up-page form .has-error .ant-input::-webkit-input-placeholder {
  color: #f86168;
}

.sign-in-page form .has-error .ant-input::-moz-placeholder,
.sign-up-page form .has-error .ant-input::-moz-placeholder {
  color: #f86168;
}

.sign-in-page form .has-error .ant-input:-ms-input-placeholder,
.sign-up-page form .has-error .ant-input:-ms-input-placeholder {
  color: #f86168;
}

.sign-in-page form .has-error .ant-input::-ms-input-placeholder,
.sign-up-page form .has-error .ant-input::-ms-input-placeholder {
  color: #f86168;
}

.sign-in-page form .has-error .ant-input::placeholder,
.sign-up-page form .has-error .ant-input::placeholder {
  color: #f86168;
}

.sign-in-page form .ant-input:focus,
.sign-in-page form .ant-input-focused,
.sign-up-page form .ant-input:focus,
.sign-up-page form .ant-input-focused {
  -webkit-box-shadow: none !important;
  box-shadow        : none !important;
}

.sign-in-page form .save-user,
.sign-up-page form .save-user {
  margin-bottom: 20px;
  margin-top   : 10px;
}

.sign-in-page form .save-user .save-password,
.sign-up-page form .save-user .save-password {
  position    : relative;
  margin-right: 10px;
  cursor      : pointer;
  outline     : none;
  border      : 1px solid #fff;
}

.sign-in-page form .save-user .save-password:after,
.sign-up-page form .save-user .save-password:after {
  content      : '';
  position     : absolute;
  top          : -1px;
  left         : 0;
  width        : 15px;
  height       : 15px;
  border-radius: 4px;
  background   : #fff;
}

.sign-in-page form .save-user .save-password:checked:after,
.sign-up-page form .save-user .save-password:checked:after {
  background: #f86168;
}

.sign-in-page form .save-user .save-password.phongkham:checked:after,
.sign-up-page form .save-user .save-password.phongkham:checked:after {
  background: #3fbea9;
}

.sign-in-page form .save-user label,
.sign-up-page form .save-user label {
  font-size  : 14px;
  line-height: 16px;
  color      : #fff;
  cursor     : pointer;
}

.sign-in-page form .save-user a,
.sign-up-page form .save-user a {
  line-height: 16px;
  color      : #fff;
}

.sign-in-page form input[type='submit'],
.sign-up-page form input[type='submit'] {
  margin-top   : 10px;
  height       : 40px;
  width        : 100%;
  background   : #f8676e;
  border-radius: 0px;
  border       : none;
  cursor       : pointer;
  color        : #fff;
}

.sign-in-page form .button.phongkham,
.sign-up-page form .button.phongkham {
  background: #3fbea9;
}

.sign-in-page form>p,
.sign-up-page form>p {
  margin-top: 30px;
  color     : #fff;
  text-align: center;
}

.sign-in-page form>p a,
.sign-up-page form>p a {
  margin-left    : 10px;
  line-height    : 16px;
  font-weight    : bold;
  text-decoration: underline;
  color          : #fff;
}

.sign-in-page form>span,
.sign-up-page form>span {
  margin-top: 25px;
  display   : block;
  text-align: center;
  color     : #fff;
}

.sign-in-page form .social,
.sign-up-page form .social {
  -webkit-box-pack: center;
  -ms-flex-pack   : center;
  justify-content : center;
  margin-top      : 30px;
}

.sign-in-page form .social img,
.sign-up-page form .social img {
  cursor: pointer;
}

.sign-in-page form .social img:nth-child(2),
.sign-up-page form .social img:nth-child(2) {
  margin: 0px 30px;
}

.sign-in-page>p,
.sign-up-page>p {
  color     : #fff;
  text-align: center;
  margin-top: 30px;
}

.sign-in-page>p a,
.sign-up-page>p a {
  color      : #3a8bf4;
  margin     : 0 5px;
  font-weight: 600;
}