.banner-container {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    min-height: 450px;
    z-index: 999;
    background: url('/img/baner.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: calc(100vh + 100px);
  }

  .banner-container::before {
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    background: #000000;
    opacity: 0.3;
    height: 100%;
  }
  
  @media only screen and (max-width: 1024px) {
    .banner-container {
      background-position: 37% 50%;
      height: 100vh;
      grid-template-columns: 1fr;
      align-items: center;
    }
  }
  
.main-slogan-container {
    display: flex;
    padding-left: 140px;
    justify-content: center;
    flex-direction: column;
    z-index: 1001;
    color: #FFFFFF;
  }
  
  @media only screen and (max-width: 1024px) {
    .main-slogan-container {
      padding: 0 36px 0 36px;
      align-items: center;
    }
  }

  @media only screen and (max-width: 425px) {
    .main-slogan-container {
      padding: 0 20px 0 20px;
    }
  }

  .slogan-name {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 90px;
    padding-bottom: 28px;
  }
  
  .slogan-text {
    font-size: 35px;
    padding-bottom: 43px;
    font-weight: 100;
  }
  
  .slogan-button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    max-width: 207px;
    font-size: 19px;
    height: 48px;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
  }

  .slogan-button:hover {
    background-color: #FFFFFF;
    color: #2B70A6;
  }
  
  @media (max-width: 1440px) {
    .slogan-name {
      font-size: 65px;
    }
  
    .slogan-text {
      font-size: 22px;
    }
  }
  
  @media (max-width: 1024px) {
    .slogan-name {
      font-size: 50px;
    }
  
    .slogan-text {
      text-align: center;
    }

    .slogan-button {
      width: 100%;
    }
  }
  
  .main-logo-container {
    position: relative;
    min-height: calc(100vh + 100px);
  }
  
  @media only screen and (max-width: 1024px) {
    .main-logo-container {
      position: relative;
      min-height: 100vh;
    }
  }
  
  .main-arrow {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 24px;
    width: 0;
    height: 0;
    border-width: 100px 90px 100px 0;
    border-color: transparent #FFF transparent transparent;
    border-style: solid;
  }
  
  .logo-element-1 {
    background-color: #FFF;
    position: absolute;
    height: 120px;
    width: 190px;
    right: 230px;
    top: 35%;
    transform: translate(0%, -50%);
    border-radius: 0 65px 65px 0;
  }
  
  .logo-element-2 {
    background-color: #FFF;
    position: absolute;
    height: 120px;
    width: 190px;
    right: 230px;
    top: 65%;
    transform: translate(0%, -50%);
    border-radius: 0 65px 65px 0;
  }
  
  @media (max-width: 1440px) {
      .logo-element-2 , .logo-element-1 {
        right: 150px;
      }
    }

  @media (max-width: 1024px) {
      .main-logo-container {
        display: none;
      }
  }

  @media only screen and (max-width: 425px) {
    .slogan-name {
      font-size: 38px;
      padding-bottom: 28px;
    }
  
    .slogan-text {
      font-size: 18px;
      padding-bottom: 43px;
    }
  }
  
  .about-container {
    position: relative;
    padding-bottom: 135px;
    min-height: 1080px
  }
  
  .adout-decorator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  
  .career-slider-container > h1, .about-info-container {
    padding: 84px 100px 85px 115px;
  }
  
  .about-header-text {
    font-family: 'Red Hat Display', sans-serif;
    font-size: 90px;
    font-weight: bold;
    padding-bottom: 80px;
    color: #2D2D2D;
  }
  
    .about-text-container {
      display: grid;
      padding-bottom: 170px;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      grid-template-rows: auto;
      grid-gap: 135px;
      padding-right: 181px;
    }
  
    .about-text-container > p {
      font-size: 20px;
      line-height: 1.5;
    }
  
    .about-icon-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto;
      padding-right: 32px;
    }
  
    @media (max-width: 1440px) {
      .about-text-container, .about-icon-container {
        padding-right: 0;
      }

      .about-text-container {
        grid-gap: 67.5px;
      }
    }

    @media only screen and (max-width: 1024px) {
      .about-info-container {
        padding: 45px 40px 0 40px;
      }

      .about-header-text {
        font-size: 40px;
        padding-bottom: 50px;
      }

      .about-container {
        padding-bottom: 75px;
      }

      .about-text-container {
        grid-gap: 50px;
      }

      .about-text-container {
        grid-template-columns: 1fr;
        padding-bottom: 50px;
      }

      .about-icon-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }

      .icon-container:not(:last-child) {
        padding-bottom: 77.5px;
      }
    }

    @media only screen and (max-width: 375px) { 
      /*.about-info-container {*/
      /*  padding: 48px 20px 75px 50px;*/
      /*}*/
/* 
      .left-arrow {
        top: 59px;
        left: 20px;
        border-width: 20px 0 20px 20px;
      } */

      /*.small-arrow-right {*/
      /*  top: 59px;*/
      /*  right: 25px;*/
      /*  border-width: 20px 20px 20px 0;*/
      /*}*/

      .about-text-container > p {
        font-size: 18px;
      }
    }

    .icon-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .img-size-box {
      /* border:1px solid red; */
      padding-bottom: 90px;
    }
  
    .img-size-box > img {
      width: 210px;
      height: 210px;
    }

    @media (max-width: 1024px) {
      .img-size-box > img {
        width: 100px;
        height: 100px;
      }
    }
  
    .icon-container > h5 {
      color: #2B70A6;
      font-size: 27px;
      padding-bottom: 20px;
    }
  
    .icon-container > span {
      color: #2D2D2D;
      font-size: 20px;
    }

    .career-slider-container {
      background-color: #F8F8F8;
      position: relative;
    }

    .career-slider-container > h1 {
      font-family: 'Red Hat Display', sans-serif;
      /* padding: 80px 0 90px 140px; */
      font-size: 90px;
    }

    
    @media (max-width: 1024px) {
      .career-slider-container > h1 {
        padding: 45px 0 50px 75px;
        font-size: 45px;
      }
    }

    @media (max-width: 1024px) {
      .career-slider-container > h1 {
        padding: 45px 0 50px 40px;
      }

      .icon-container > img {
        padding-bottom: 45px;
      }

      .img-size-box {
        padding-bottom: 30px;
      }
    }

    @media (max-width: 375px) {
      .icon-container > span {
        font-size: 18px;
        text-align: center;
      }
    }

  .swiper-container {
      cursor: grab;
      width: 100%;
      padding-bottom: 175px;
    }

    .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
      position: absolute;
      bottom: 87.5px;
    }

    .swiper-slide {
      height: 580px;
      background-image: url('/img/career-photo.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      display: flex;
      align-items: flex-end;
    }

    .swiper-slide-5 {
      display: flex;
      justify-content: center;
    }

    @media (max-width: 1024px) {
      .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 450px;
      }
    }

    .offer-container {
      position: absolute;
      z-index: 1001;
      text-align: center;
      color: #FFFFFF;
      padding: 40px;
    }

    .offer-container > h1 {
      font-family: 'Red Hat Display', sans-serif;
      padding-bottom: 35px;
      font-size: 27px;
    }

    .swiper-slide-5 > .offer-container > h1 {
      padding-bottom: 150px;
    }

    .offer-container > p {
      padding-bottom: 110px;
      font-size: 20px;
    }

    @media (max-width: 1024px) {
      .swiper-slide {
        display: flex;
        justify-content: center;
      }
      .offer-container > h1 {
        padding-bottom: 40px;
        font-size: 21px;
      }
      .offer-container > p {
        display: none;
      }
    }

    .offer-container > a {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      text-decoration: none;
      cursor: pointer;
      width: 207px;
      height: 48px;
      border: 1px solid #FFFFFF;
      background-color: transparent;
      color: #FFFFFF;
      font-size: 19px;
    }

    @media (max-width: 1024px) {
      .swiper-slide {
        display: flex;
        justify-content: center;
      }
      .offer-container {
        padding: 15px;
      }

      .swiper-slide-5 > .offer-container > h1, .offer-container > h1 {
        padding-bottom: 40px;
        font-size: 21px;
      }
      .offer-container > p {
        display: none;
      }

      .offer-container > a {
        width: 165px;
      }
    }

    .offer-container > a:hover {
      background-color: #FFFFFF;
      color: #2B70A6;
    }

    .swiper-slide::before {
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
    }

    /* @media (max-width: 1440px) {
      .offer-container {
        padding: 30px;
      }
      .offer-container > h1 {
        padding-bottom: 15px;
        font-size: 20px;
      }
      .offer-container > p {
        padding-bottom: 50px;
        font-size: 15px;
      }
      .offer-container > button {
        font-size: 15px;
        width: 160px;
        height: 40px;
      }
    } */

    .swiper-slide-1::before {
      background: transparent linear-gradient(212deg, #2B70A6 0%, #53B3FF 100%) 0% 0% no-repeat padding-box;
      mix-blend-mode: multiply;
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
    }

    .swiper-slide::after {
      background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
      display: block;
      content: "";
      position: absolute;
      bottom: 0px;
      right: 0px;
      left: 0px;
      height: 50%;
    }

    .swiper-slide-2::before {
      background-color: #1CA9E7;
      mix-blend-mode: multiply;
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
    }

    .swiper-slide-3::before {
      background-color: #807F7F;
      mix-blend-mode: multiply;
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
    }

    .swiper-slide-4::before {
      background-color: #432BA6;
      mix-blend-mode: multiply;
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
      
    }

    .swiper-slide-5::before {
      background-color: #650303;
      mix-blend-mode: multiply;
      display: block;
      content: "";
      position: absolute;
      top: 0px;
      right: 0px;
      left: 0px;
      height: 100%;
    }

    /* @media (max-width: 1440px) {
      .swiper-slide {
        height: 420px;
      }
    } */

    .swiper-pagination-bullet.swiper-pagination-bullet-active {
      width: 102px;
      height: 5px;   
      background-color: #2D2D2D; 
      border-radius: 0;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0;
    }
    .swiper-pagination-bullet {
      width: 102px;
      height: 5px;   
      border-bottom: 1px solid #E5E5E5;
      opacity: 1;
      background: none; 
      border-radius: 0;
    }

    @media (max-width: 1024px) {
      .swiper-pagination-bullet, .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 78px;
      } 
    }

    @media (max-width: 375px) {
      .swiper-pagination-bullet, .swiper-pagination-bullet.swiper-pagination-bullet-active {
        width: 50px;
      }
    }