/**
 * #.# 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.
 */
.hero-wave {
  height: 590px;
  background-size: cover;
  background-position: center center;
  position: relative; }
  .hero-wave:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(/wp-content/themes/sunwater/images/bg_tp.png) no-repeat;
    width: 52%;
    height: 64%;
    z-index: 1;
    background-position: right top; }
    @media only screen and (max-width: 1500px) {
      .hero-wave:after {
        width: 60%;
        height: 64%;
        z-index: 1;
        background-position: right center; } }
    @media only screen and (max-width: 1023px) {
      .hero-wave:after {
        width: 75%; } }
    @media only screen and (max-width: 767px) {
      .hero-wave:after {
        width: 100%; } }
    @media only screen and (max-width: 375px) {
      .hero-wave:after {
        width: 100%;
        background-size: 100% 100%;
        height: 50%;
        padding-left: 0; } }
  .hero-wave .hero-detail-wave {
    bottom: 6px;
    max-width: 700px;
    padding-right: 100px;
    position: absolute;
    z-index: 5;
    padding-left: 15px; }
    .hero-wave .hero-detail-wave h4 {
      font-size: 46px; }
    .hero-wave .hero-detail-wave p {
      font-size: 20px; }
    .hero-wave .hero-detail-wave h4 {
      color: #031E2F;
      font-weight: 700; }
      @media only screen and (max-width: 1023px) {
        .hero-wave .hero-detail-wave h4 {
          font-size: 40px; } }
      @media only screen and (max-width: 575px) {
        .hero-wave .hero-detail-wave h4 {
          font-size: 28px; } }
      @media only screen and (max-width: 375px) {
        .hero-wave .hero-detail-wave h4 {
          font-size: 20px; } }
    .hero-wave .hero-detail-wave .buttons_style .bg_btn {
      background: #031E2F;
      font-size: 16px;
      color: #fff;
      border: 1px solid #031E2F; }
    .hero-wave .hero-detail-wave p {
      color: #031E2F;
      font-weight: 300;
      line-height: 1.8;
      padding-right: 100px; }
      @media only screen and (max-width: 1023px) {
        .hero-wave .hero-detail-wave p {
          padding-right: 0; } }
      @media only screen and (max-width: 575px) {
        .hero-wave .hero-detail-wave p {
          font-size: 14px; } }
    @media only screen and (max-width: 1500px) {
      .hero-wave .hero-detail-wave {
        padding-left: 15px;
        max-width: 50%;
        padding-right: 0; } }
    @media only screen and (max-width: 767px) {
      .hero-wave .hero-detail-wave {
        max-width: 65%; } }
    @media only screen and (max-width: 375px) {
      .hero-wave .hero-detail-wave {
        max-width: 50%;
        padding-right: 15px;
        bottom: -3px; } }

.hero-wave-light:after {
  background: url(/wp-content/themes/sunwater/images/background-light.png) no-repeat;
  background-position: right top; }

.hero-wave-green:after {
  background: url(/wp-content/themes/sunwater/images/bg_tp.png) no-repeat;
  background-position: right top; }

.hero-wave-dark .hero-detail-wave h4 {
  color: white; }

.hero-wave-dark .hero-detail-wave p {
  color: white; }

.hero-wave-dark .hero-detail-wave .buttons_style .bg_btn {
  background-color: #00B0CA;
  border-color: #00B0CA;
  color: #031E2F; }

.hero-wave-dark:after {
  background: url(/wp-content/themes/sunwater/images/background-dark.png) no-repeat;
  background-position: right top; }