/* banner */
.banner-component {
  --banner-height: 750px;
  /* --banner-bg-color: var(--vivid-sky-blue); */
  --banner-bg-color: var(--ocean-blue);
  --banner-row-vr-padding: 50px;
  --banner-title-color: var(--very-dark-gray);

  height: var(--banner-height);
  overflow: hidden;
}

.banner-texts-white {
  --banner-title-color: var(--white);
}

.banner-row {
  padding: var(--banner-row-vr-padding) var(--page-hr-padding);
  background: none no-repeat center center var(--banner-bg-color);
  height: var(--banner-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.banner-with-pattern .banner-row {
  --baner-pattern-img: url(../img/banner_pattern.svg);
  background-image: var(--baner-pattern-img);
  overflow: hidden;
}

.banner-row-inner {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}


/* title */

.banner-title {
  margin: 0;
  color: var(--banner-title-color);
}

.banner-style-1 .banner-title {
  line-height: 1.2608695652173914;
}

.banner-content-section {
  max-width: 610px;
  position: relative;
  z-index: 1;
}

.banner-title.animate-on-load {
  opacity: 0;
  transform: translateX(-50px);
}

body.page-loaded .banner-title.animate-on-load {
  opacity: 1;
  transform: translateX(0px);
  transition: all 0.5s linear var(--page-animation-delay);
}

/* banner img */

.banner-img.animate-on-load {
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.5s linear var(--page-animation-delay);
}

body.page-loaded .banner-img.animate-on-load {
  opacity: 1;
  transform: translateY(0px);
}

/* banner bg */

.banner-bg-img-section {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
}

.banner-bg-img {
  height: 100%;
}

/* color-patterns */

.color-patterns {
  width: 100%;
  display: grid;
  grid-template-columns: 10% 20% 30% 40%;
  position: relative;
}

.color-item {
  --item-bg: var(--pale-yellow);
  background: var(--item-bg);
  height: 32px;
}

.color-item-2 {
  --item-bg: var(--bright-green);
}

.color-item-3 {
  --item-bg: var(--aqua-blue);
}

.color-item-4 {
  --item-bg: var(--teal-blue);
}


.banner-component.with-color-patterns {
  position: relative;
}

.banner-component.with-color-patterns .color-patterns {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* .color-patterns animation */

.color-patterns:after {
  content: "";
  width: 100%;
  height: 100%;
  background: var(--light-gray);
  position: absolute;
  right: 0;
  top: 0;
  transition: width 2s linear var(--page-animation-delay);
}

body.page-loaded .color-patterns:after {
  width: 0%;
}

/* img pos-abs */

.banner-component.img-abs {
  position: relative;
}

.banner-component.img-abs .banner-img-wrap {
  position: absolute;
  right: 0;
  bottom: 0;
}