.button.banner {
  color: #ffffff;
  border-color: #ffffff; }
  .button.banner:hover {
    background: #ffffff;
    text-decoration: none;
    color: #12284c; }

.banner__container {
  background-size: cover;
  min-height: 370px;
  background-position: center;
  background-color: #FFF;
  background-blend-mode: luminosity, normal; }
  .banner__container .container {
    padding: 95px 0; }

.banner__overlay {
  min-height: 370px;
  overflow: hidden;
  height: 100%;
  z-index: 2;
  background: #12284cba; }

.banner_title {
  font-size: 2rem;
  margin: 0 auto 9px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 0.83;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff; }
  @media screen and (min-width: 45rem) {
    .banner_title {
      font-size: 2.333rem;
      line-height: 1.19; } }
  @media screen and (min-width: 60rem) {
    .banner_title {
      font-size: 3.056rem;
      line-height: 0.91; } }

.banner__description {
  font-family: "Open Sans", "Tajawal", "Arial", sans-serif;
  margin: 10px auto 20px;
  font-size: 0.8889rem;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff; }
  @media screen and (min-width: 45rem) {
    .banner__description {
      font-size: 1.111rem;
      line-height: 1.35; } }
  @media screen and (min-width: 60rem) {
    .banner__description {
      margin: 9px auto 25px;
      font-size: 1.111rem;
      line-height: 1.35; } }
  .banner__description:lang(ar) {
    text-align: center !important; }

.banner__description-container {
  margin-bottom: 50px; }

.banner__readmore {
  text-align: center;
  max-width: 780px;
  margin: auto; }

.banner__content {
  margin: 0 auto; }