/* Homepage Styles */
.homepage-hero-text-container {
  max-width: 633px;
  width: 100%;
  margin: 0 auto;
}

.homepage-hero-container {
  min-height: 600px;
  display: flex;
}



.wp-block-uagb-container.uagb-is-root-container {
  width: 100%;
}

/* grid container to have two columns, equal width. 
First will have an image set at the background. 
Second will have title, text and a button. 
The second column will have a triangle pattern on the left side of the container. */
.grid-2-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0px !important;
}

/* Triangle patter css is in style.css */

/* the grid-2-col-1 is an empty div with a background image set. It needs height to be set to 100% of the parent */
.grid-2-col-with-bg-image {
  background-image: url('/wp-content/uploads/2025/06/homepage-image-2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

.stay-connected-image-container .stay-connected-image-one img {
  max-width: 150px;
}

.stay-connected-image-container .stay-connected-image-two img {
  max-width: 200px;
}

/* make the margin left proportional to the viewport width */
.stay-connected-image-container .stay-connected-image-two {
  margin-left: calc(100vw * -0.10) !important;
}

@media (max-width: 768px) {
  .grid-2-col {
    grid-template-columns: 1fr !important;
  }

  .homepage-hero-container {
    min-height: 500px;
  }
}

@media (max-width: 480px) {
  .stay-connected-image-container .stay-connected-image-one img {
    max-width: 130px;
  }

  .stay-connected-image-container .stay-connected-image-two img {
    max-width: 160px;
  }

  .stay-connected-image-container .stay-connected-image-two {
    margin-left: calc(100vw * -0.05) !important;
  }

  .homepage-hero-container {
    min-height: 400px;
  }
}