.page-banner {
  padding: calc(var(--pb-padding-top-and-bottom)/2) 0 calc(var(--pb-padding-top-and-bottom)/2);
}

.pb__bg--color {
  background: var(--background-color);
}

.pb__bg--gradient {
  background: var(--background-gradient-first-color);
}

.pb__bg--image {
  background-image: var(--background-image-src);
  background-size: var(--background-image-size);
  background-position: var(--background-image-position);
}

.pb__eyebrow {
  background-color: var(--pb-eyebrow-background-color)!important;
  border-color: var(--pb-eyebrow-background-color)!important;
}

.pb__h1 {
  text-align: left;
  color: var(--pb-heading-colors);
  margin-top: 0;
}

.pb__short-desc {
  width: 100%;
  text-align: justify;
}

{# START --- Buttons styles of the Page Banner #}

.pb__btns {
  display: block;
  width: 100%;
}

.pb__btn--primary,
.pb__btn--secondary {
  display: block;
  width: 100%;
  text-align: center;
}

.pb__btn--primary:not(:last-child),
.pb__btn--secondary:not(:last-child) {
  margin-bottom: 0.75rem;
}

.pb__btn--primary {
  color: var(--general-white);
  background-color: var(--pb-button-color);
  border-color: var(--pb-button-color)!important;
}

.pb__btn--secondary {
  color: var(--pb-button-color);
  border-color: var(--pb-button-color)!important;
}

.pb__btn--primary:hover {
  background-color: var(--pb-button-hover-color);
  border-color: var(--pb-button-hover-color)!important;
}

.pb__btn--secondary:hover {
  background-color: var(--pb-button-hover-color);
}

{# END --- Buttons styles of the Page Banner #}
.pb__video-container {
  width: 100%;
}

.pb__text-container + .pb__video-image {
  margin-top: 2rem;
}

.pb__video,
.pb__image {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius-large);
  box-shadow: var(--drop-shadow-large);
}

.pb__video {
  object-fit: cover;
}

.pb__image {
  object-fit: contain;
}

@media (min-width: 480px) {
  
}

@media (min-width: 600px) {  
  .pb__btns {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }
  
  .pb__btns {
    gap: 1rem;
  }
  
  .pb__btn--primary,
  .pb__btn--secondary {
    width: auto;
  }
  
  .pb__btn--primary:not(:last-child),
  .pb__btn--secondary:not(:last-child) {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 768px) {
  .pb__text-container + .pb__video-image {
    margin: 5rem auto 0;
  }
  
  .pb__h1 {
    text-align: var(--heading-text-alignment);
  }

  .pb__short-desc {
    text-align: var(--description-text-alignment);
  }
  
  .pb__btns {
    justify-content: var(--button-horizontal-alignmanet);
    align-items: var(--button-horizontal-alignmanet);
  }
}

@media screen and (min-width: 992px) {
  .page-banner {
    padding: var(--pb-padding-top-and-bottom) 0;
  }
  
  .pb__bg--gradient {
    background: var(--background-gradient);
    background-size: 120%;
    animation: animateGradient forwards 2s ease-in-out;
  }

  .pb__text-container {
    width: 100%;
    margin: auto;
  }
  
  .pb__short-desc {
    width: var(--description-text-width);
    margin: 0 auto;
  }

  .pb__video-container {
    width: 80%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1366px) {
  
}

@keyframes animateGradient {
  0% {
    background-position: 0%, 100%;
  }
  100% {
    background-position: 65%, 35%; 
  }
}