/************************************
Template Name: Lintas Lima Benua
Version : 1.0

Daftar Isi
-------------------------------------
1. Pengaturan Umum
2. Header Menu
3. Home Section Hero
4. Home Section 1
5. Home Section 2
6. Home Section 3
7. Home Section 4
8. Home Footer
9. About Section 1
10. About Section 2
11. About Section 3
12. About Section 4
13. About Section 5
14. About Section 6
15. Services Section 1
16. Services Section 2
17. Services Section 3
18. Services Section 4
19. Services Section 5
20. Services Section 6
************************************/
/************************************
1. Pengaturan Umum
************************************/
body {
  font-family: 'proxima','Montserrat', sans-serif;
}

/************************************
2. Header Menu
************************************/
.header__nav {
  z-index: 9999;
}

.header__btn-merah {
  background-color: red;
}

.header__nav-item a {
  color: rgba(0, 0, 0, 0.7);
}

.header__nav-item a:hover {
  color: #000;
}

.header__nav-item-scroll a {
  font-size: 80%;
  color: rgba(0, 0, 0, 0.7);
}

.header__nav-item-scroll a:hover {
  color: #000;
}

.header__logo_top {
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
}

.header__mobile-logo {
  height: 40px;
}

#menu-up {
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
}

#menu-mobile {
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
}

/************************************
3. Home Section Hero
************************************/
.home-section-hero {
  background-image: url(../assets/hero@2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.home-section-hero .home-section-hero__swipe-buttons {
  width: 100%;
  bottom: 20px;
  position: absolute;
  z-index: 9999;
}

.home-section-hero .home-section-hero__swipe-prev {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: #6C6C6C;
}

.home-section-hero .home-section-hero__swipe-next {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: red;
}

.home-section-hero .home-section-hero__action-button a {
  display: block;
  width: 150px;
  padding: 10px 30px;
  background-color: #FF0000;
  border-radius: 24px;
  font-size: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
}

.home-section-hero .home-section-hero__action-button a:hover {
  background-color: #fff;
  color: #000;
}

.home-section-hero .home-section-hero__action-button a:hover span {
  display: none;
}

.home-section-hero .home-section-hero__action-button a:hover::after {
  content: 'ABOUT US';
}

.home-section-hero .swiper-container {
  width: 100%;
  height: 100vh;
  min-height: 650px;
}

.home-section-hero .swiper-slide {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.home-section-hero .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  position: relative;
}

.home-section-hero .home-section-hero__text-wrapper {
  width: 100%;
  position: absolute;
}

.home-section-hero .home-section-hero__title {
  color: #fff;
  font-size: 51px;
  font-weight: 700;
  text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.6);
  line-height: 50px;
  position: relative;
}

.home-section-hero .home-section-hero__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: -10%;
  left: 0;
}

.home-section-hero .home-section-hero__subtitle {
  font-size: 32px;
  font-weight: 700;
  color: #E6E6E6;
  text-shadow: 2px 3px 6px rgba(28, 28, 28, 0.6);
  line-height: 80px;
  font-style: italic;
  margin-bottom: 50px;
}

@media only screen and (max-width: 768px) {
  .home-section-hero .swiper-container {
    width: 100%;
    position: relative;
  }
  .home-section-hero .home-section-hero__title {
    color: #fff;
    font-size: 51px;
    font-weight: 700;
    text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.6);
    position: relative;
  }
  .home-section-hero .home-section-hero__title:after {
    background: red;
    border-radius: 10px;
    content: "";
    height: .25rem;
    position: absolute;
    width: 2rem;
    top: -10%;
    left: 0;
  }
  .home-section-hero .home-section-hero__subtitle {
    font-size: 20px;
    font-weight: 700;
    color: #E6E6E6;
    text-shadow: 2px 3px 6px rgba(28, 28, 28, 0.6);
    line-height: 60px;
    font-style: italic;
    margin-bottom: 0px;
  }
}

.home-section-hero .home-section-hero__mouse {
  text-align: center;
}

.home-section-hero .home-section-hero__mouse a {
  font-size: 32px;
  color: #fff;
  text-shadow: 2px 3px 6px rgba(28, 28, 28, 0.6);
}

/************************************
4. Home Section 1
************************************/
.home-section1 {
  margin: 40px 0;
  padding: 20px 0 60px 0;
  background-image: url(../assets/img_home/repeat-grid11@2x.svg), url(../assets/img_home/repeat-grid12@2x.svg);
  background-position: 120% 0%, 100% 100%;
  background-repeat: no-repeat;
  background-size: 80%;
  margin-bottom: 50px;
}

.home-section1 .home-section1__title {
  font-weight: 700;
  color: #254095;
  position: relative;
}

.home-section1 .home-section1__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: 15px;
  left: 0;
}

.home-section1 .home-section1__content {
  font-size: 22px;
  line-height: 1.8;
}

.home-section1 .home-section1__image {
  position: relative;
}

.home-section1 .home-section1__utama {
  z-index: 8888;
  position: absolute;
  height: 100%;
}

.home-section1 .home-section1__grid12 {
  position: absolute;
  bottom: -50px;
  right: 0px;
}

.home-section1 .home-section1__grid11 {
  position: absolute;
  top: -100px;
  right: 0px;
}

.home-section1 .home-section1__learn-more {
  margin: 30px 0 40px 0;
}

.home-section1 .home-section1__learn-more-button {
  color: #fff;
  background-color: red;
  font-size: 10px;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 30px;
}

.home-section1 .home-section1__info {
  z-index: 9900;
  position: absolute;
  left: 0px;
  bottom: 0px;
  background-color: #fff;
}

.home-section1 .home-section1__info1 {
  text-align: center;
  padding: 20px 20px;
  display: inline-block;
  font-size: 12px;
}

.home-section1 .home-section1__info1 .experience1 {
  font-size: 30px;
  color: red;
}

.home-section1 .home-section1__info1 .experience2 {
  font-size: 10px;
  font-weight: 600;
  color: #6A6A6A;
}

.home-section1 .home-section1__info2 {
  text-align: center;
  padding: 20px 20px;
  display: inline-block;
  font-size: 12px;
}

.home-section1 .home-section1__info2 .armada1 {
  font-size: 30px;
  color: #254095;
}

.home-section1 .home-section1__info2 .armada2 {
  font-size: 10px;
  font-weight: 600;
  color: #6A6A6A;
}

@media only screen and (min-width: 576px) {
  .home-section1 {
    background-position: 120% 0%, 100% 100%;
  }
  .home-section1 .home-section1__info1 .experience1 {
    font-size: 41px;
  }
  .home-section1 .home-section1__info1 .experience2 {
    font-size: 14px;
  }
  .home-section1 .home-section1__info2 .armada1 {
    font-size: 41px;
  }
  .home-section1 .home-section1__info2 .armada2 {
    font-size: 14px;
  }
}

@media only screen and (min-width: 768px) {
  .home-section1 {
    background-position: 220% 0%, 220% 60%;
    background-size: auto;
    padding: 80px 0 40px 0;
  }
  .home-section1 .home-section1__info1 .experience1 {
    font-size: 31px;
  }
  .home-section1 .home-section1__info1 .experience2 {
    font-size: 10px;
  }
  .home-section1 .home-section1__info2 .armada1 {
    font-size: 31px;
  }
  .home-section1 .home-section1__info2 .armada2 {
    font-size: 10px;
  }
}

@media only screen and (min-width: 992px) {
  .home-section1 {
    background-position: 130% 0%, 130% 100%;
    background-size: auto;
    padding: 80px 0 40px 0;
  }
}

@media only screen and (min-width: 1200px) {
  .home-section1 {
    background-position: 110% 0%, 110% 120%;
    background-size: auto;
    padding: 80px 0 80px 0;
  }
  .home-section1 .home-section1__info1 .experience1 {
    font-size: 41px;
  }
  .home-section1 .home-section1__info1 .experience2 {
    font-size: 14px;
  }
  .home-section1 .home-section1__info2 .armada1 {
    font-size: 41px;
  }
  .home-section1 .home-section1__info2 .armada2 {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1400px) {
  .home-section1 {
    background-position: 110% 0%, 110% 120%;
    background-size: auto;
    padding: 80px 0 80px 0;
  }
}

@media only screen and (min-width: 1600px) {
  .home-section1 {
    background-position: 90% 0%, 90% 120%;
    background-size: auto;
    padding: 80px 0 80px 0;
  }
}

/************************************
5. Home Section 2
************************************/
.home-section2 {
  background-image: url(../assets/about2@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-section2 .container {
  padding: 60px 0;
}

.home-section2 .home-section2__overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.85);
  color: #fff;
}

.home-section2 .home-section2__title {
  font-weight: 700;
  color: #fff;
  font-size: 34px;
  position: relative;
}

.home-section2 .home-section2__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: 10px;
  left: 0;
}

.home-section2 .home-section2__content {
  font-size: 22px;
  line-height: 1.3;
  color: #fff;
  padding-bottom: 70px;
}

.home-section2 .home-section2__box {
  background-color: #242424;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 20px;
}

.home-section2 .home-section2__box:hover {
  background-color: red;
}

.home-section2 .home-section2__box--merah {
  background-color: red;
}

.home-section2 .home-section2__box-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 20px;
}

.home-section2 .home-section2__box-content {
  font-weight: 500;
}

.home-section2 .home-section2__box-content-header {
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 2px;
  padding-bottom: 10px;
  line-height: 1;
}

@media only screen and (min-width: 1200px) {
  .home-section2 .container {
    padding: 150px 0;
  }
  .home-section2 .home-section2__title {
    font-size: 44px;
  }
}

/************************************
6. Home Section 3
************************************/
.home-section3 {
  background-image: url(../assets/img_home/section3-grid.svg), url(../assets/img_home/section3-left.svg), url(../assets/img_home/section3-right.svg);
  background-position: -110% 50%, -100% 50%, 100% 0%;
  background-repeat: no-repeat;
  background-size: 80%,80%,50%;
}

.home-section3 .home-section3__title {
  font-weight: 700;
  color: #254095;
  position: relative;
}

.home-section3 .home-section3__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: 30px;
  left: 0;
}

.home-section3 .home-section3__swipe-buttons {
  width: 100%;
  bottom: 10%;
  position: absolute;
  z-index: 9999;
}

.home-section3 .home-section3__swipe-prev {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: #6C6C6C;
}

.home-section3 .home-section3__swipe-next {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: red;
}

.home-section3 .home-section3__content-right-title {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 3px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.home-section3 .home-section3__content-right-title a {
  text-decoration: none;
  color: #212529;
}

.home-section3 .home-section3__content-right-title a:hover {
  color: red;
}

.home-section3 .home-section3__content-right-content {
  font-size: 16px;
  list-style-type: none;
  padding-left: 0;
}

.home-section3 .home-section3__content-right-item {
  padding: 10px 0;
}

@media only screen and (min-width: 576px) {
  .home-section3 {
    background-position: -110% 55%, -150% 50%, 120% 0%;
  }
}

@media only screen and (min-width: 768px) {
  .home-section3 {
    margin-top: 50px;
    padding-bottom: 100px;
    background-position: -110% 85%, -30% 200%, 110% 0%;
    background-size: auto;
  }
}

@media only screen and (min-width: 992px) {
  .home-section3 {
    margin-top: 50px;
    background-position: -20% 85%, -30% 100%, 110% 0%;
  }
}

@media only screen and (min-width: 1200px) {
  .home-section3 {
    margin-top: 100px;
    margin-bottom: 50px;
    background-position: -20% 95%, -10% 100%, 105% 0%;
  }
}

@media only screen and (min-width: 1400px) {
  .home-section3 {
    background-position: -20% 95%, -10% 100%, 105% 0%;
  }
}

@media only screen and (min-width: 1600px) {
  .home-section3 {
    background-position: 5% 95%, 0% 100%, 95% 0%;
  }
}

/************************************
7. Home Section 4
************************************/
.home-section4 {
  background-image: url(../assets/g193@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-section4 a {
  text-decoration: none;
  color: #C4C5C7;
}

.home-section4 .container {
  padding: 100px 0;
}

.home-section4 .home-section4__overlay {
  color: #fff;
}

.home-section4 .home-section4__title {
  font-weight: 500;
  color: #fff;
  font-size: 50px;
  font-weight: 700;
}

.home-section4 .home-section4__content {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 500;
  color: #C4C5C7;
  padding-bottom: 70px;
}

.home-section4 .home-section4__bio-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.home-section4 .home-section4__bio-subtitle {
  font-size: 18px;
  font-weight: 500;
  color: #C4C5C7;
}

.home-section4 .home-section4__bio-subtitle span {
  display: inline-block;
  vertical-align: top;
}

.home-section4 .home-section4__bio-subtitle--red {
  color: red;
  margin-right: 10px;
}

.home-section4 input[type="text"], .home-section4 input[type="text"]:focus,
.home-section4 input[type="email"], .home-section4 input[type="email"]:focus {
  background: transparent;
  border: none;
  border-bottom: 1px solid #797979;
  padding-left: 3px;
  outline-width: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  color: #fff;
}

.home-section4 label {
  padding-left: 0;
}

.home-section4 button {
  color: #fff;
  background-color: red;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 30px;
  border-radius: 30px;
}

/************************************
8. Home Footer
************************************/
.home-footer {
  padding: 80px 0;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#C7C7C7));
  background-image: linear-gradient(#FDFDFD, #C7C7C7);
}

.home-footer .home-footer__nav-items {
  font-size: 14px;
  color: #404040;
  font-weight: 500;
}

.home-footer .home-footer__nav-items a {
  text-decoration: none;
  color: #404040;
  padding: 30px;
}

.home-footer .home-footer__nav-items a:hover {
  color: red;
  font-weight: 600;
}

.home-footer .home-footer__copyright {
  font-size: 14px;
  color: #727680;
  font-weight: 600;
}

.home-footer .home-footer__design-by {
  font-size: 14px;
  color: #727680;
  font-weight: 600;
  letter-spacing: 2px;
}

.home-footer .home-footer__design-by span {
  color: #3E3E3E;
}

/************************************
9. About Section 1
************************************/
.about-section1 {
  background-image: url(../assets/about-hero@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-section1 .about-section1__hero-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 2px 3px 6px rgba(28, 28, 28, 0.6);
  margin: 100px auto;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .about-section1 .about-section1__hero-text {
    font-size: 28px;
    margin: 300px auto;
  }
}

/************************************
10. About Section 2
************************************/
.about-section2 .about-section2__text {
  font-size: 16px;
  font-weight: 600;
  color: #404040;
  text-align: center;
  line-height: 1.7em;
  margin: 50px 10px;
}

@media only screen and (min-width: 768px) {
  .about-section2 .about-section2__text {
    font-size: 20px;
  }
}

@media only screen and (min-width: 992px) {
  .about-section2 .about-section2__text {
    font-weight: 600;
    color: #404040;
    margin: 100px;
    text-align: center;
    line-height: 1.7em;
  }
}

/************************************
11. About Section 3
************************************/
.about-section3 {
  background-repeat: no-repeat;
  margin-bottom: 100px;
}

.about-section3 .about-section3__title {
  font-weight: 700;
  color: #254095;
  position: relative;
  font-size: 40px;
  margin: 60px 0 30px 0;
}

.about-section3 .about-section3__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: -30px;
  left: 0;
}

.about-section3 .about-section3__body {
  font-weight: 400;
  color: #101010;
  font-size: 24px;
  margin: 0 0 80px 0;
}

.about-section3 .about-section3__img img {
  display: block;
  margin: auto;
}

.about-section3 .about-section3__mission-list_content {
  font-size: 24px;
  font-weight: 400;
  color: #101010;
  line-height: 1.5em;
  padding-bottom: 20px;
}

.about-section3 .about-section3__mission-text {
  padding-left: 60px;
}

.about-section3 .about-section3__mission-text li::before {
  content: "+";
  color: red;
  font-size: 60px;
  vertical-align: middle;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

@media only screen and (min-width: 768px) {
  .about-section3 {
    padding-bottom: 150px;
    margin-bottom: 50px;
    background-image: url(../assets/img_about/grid_top.svg), url(../assets/img_about/rounder.svg), url(../assets/img_about/grid_bottom.svg);
    background-position: -80% 100%, -10% 40%, -120% 10%;
  }
}

@media only screen and (min-width: 1200px) {
  .about-section3 {
    background-position: -25% 0%, -10% 40%, -18% 100%;
  }
}

@media only screen and (min-width: 1400px) {
  .about-section3 {
    background-position: -5% 0%, 10% 40%, -18% 100%;
  }
}

/************************************
12. About Section 4
************************************/
.about-section4 {
  background-color: #242423;
  padding-bottom: 50px;
}

.about-section4 .about-section4__title {
  font-weight: 700;
  color: #fff;
  position: relative;
  font-size: 22px;
  margin: 120px 0 100px 0;
  text-align: center;
}

.about-section4 .about-section4__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 4rem;
  top: 130%;
  left: 45%;
}

.about-section4 .about-section4__swipe-prev {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: #6C6C6C;
}

.about-section4 .about-section4__swipe-next {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: red;
}

.about-section4 .swiper-container {
  width: 100%;
  height: 300px;
}

.about-section4 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: calc((100% - 30px) / 2);
}

.about-section4 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .about-section4 .swiper-container {
    height: 400px;
  }
  .about-section4 .about-section4__title {
    font-size: 40px;
  }
  .about-section4 .about-section4__title:after {
    left: 48%;
  }
}

@media only screen and (min-width: 992px) {
  .about-section4 .swiper-container {
    height: 600px;
  }
}

/************************************
13. About Section 5
************************************/
.about-section5 {
  padding-bottom: 0px;
}

.about-section5 .about-section5__header {
  margin: 50px 0 30px 0;
}

.about-section5 .about-section5__title {
  font-weight: 700;
  color: #254095;
  font-size: 25px;
}

.about-section5 .about-section5__swipe-prev {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: #6C6C6C;
}

.about-section5 .about-section5__swipe-next {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  font-size: 45px;
  color: red;
}

.about-section5 .swiper-container {
  width: 100%;
  height: 200px;
}

.about-section5 .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.about-section5 .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 768px) {
  .about-section5 {
    padding-bottom: 100px;
  }
  .about-section5 .swiper-container {
    height: 250px;
  }
  .about-section5 .about-section5__title {
    font-size: 32px;
  }
  .about-section5 .about-section5__header {
    margin: 150px 0 70px 0;
  }
}

@media only screen and (min-width: 992px) {
  .about-section5 .swiper-container {
    height: 450px;
  }
}

/************************************
14. About Section 6
************************************/
.about-section6 .about-section6__background img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.about-section6 .about-section6__title {
  font-weight: 500;
  color: #254095;
  position: relative;
  font-size: 40px;
  margin: 60px 0 30px 0;
}

.about-section6 .about-section6__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: -30px;
  left: 0;
}

.about-section6 .about-section6__body {
  padding: 0 0 30px 0;
}

.about-section6 .about-section6__content {
  padding: 25px 25px;
  background-color: rgba(255, 255, 255, 0.8);
}

.about-section6 .about-section6__cabang-header {
  font-weight: 700;
  color: #254095;
  font-size: 18px;
}

.about-section6 .about-section6__cabang-alamat {
  font-weight: 400;
  color: #101010;
  font-size: 14px;
}

.about-section6 .about-section6__cabang-alamat--content {
  display: inline-block;
  vertical-align: top;
  width: 90%;
}

.about-section6 .about-section6__cabang-alamat--icon {
  color: red;
  margin-right: 10px;
  font-size: 14px;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: top;
}

.about-section6 .about-section6__cabang-telp {
  font-weight: 400;
  color: #101010;
  font-size: 14px;
}

.about-section6 .about-section6__cabang-telp--content {
  display: inline-block;
  vertical-align: top;
  width: 90%;
}

.about-section6 .about-section6__cabang-telp--icon {
  font-weight: 600;
  color: 254095;
  margin-right: 10px;
  font-size: 14px;
  line-height: 1.5em;
  display: inline-block;
  vertical-align: top;
}

@media only screen and (min-width: 768px) {
  .about-section6 {
    position: relative;
  }
  .about-section6 .about-section6__content {
    padding: 25px 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .about-section6 .about-section6__body {
    padding: 30px 0 30px 0;
  }
}

@media only screen and (min-width: 992px) {
  .about-section6 .about-section6__content {
    padding: 25px 100px;
  }
}

/************************************
15. Services Section 1
************************************/
.services-section1 {
  background-image: url(../assets/d981f0530cab5abff4eea9800278f062@2x.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.services-section1 .services-section1__hero-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 2px 3px 6px rgba(28, 28, 28, 0.6);
  margin: 100px auto;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .services-section1 .services-section1__hero-text {
    font-size: 28px;
    margin: 300px auto;
  }
}

/************************************
16. Services Section 2
************************************/
.services-section2 .services-section2__text {
  font-size: 16px;
  font-weight: 600;
  color: #404040;
  text-align: center;
  line-height: 1.7em;
  margin: 50px 10px;
}

@media only screen and (min-width: 768px) {
  .services-section2 .services-section2__text {
    font-size: 20px;
  }
}

@media only screen and (min-width: 992px) {
  .services-section2 .services-section2__text {
    font-weight: 600;
    color: #404040;
    margin: 100px;
    text-align: center;
    line-height: 1.7em;
  }
}

/************************************
17. Services Section 3
************************************/
.services-section3 {
  padding-bottom: 50px;
  background-image: url(../assets/img_services/grid.svg), url(../assets/img_services/rounder_top.svg);
  background-position: -10% 58%,150% 90%;
  background-size: 80%,60%;
  background-repeat: no-repeat;
}

.services-section3 .services-section3__title {
  font-weight: 700;
  color: #254095;
  position: relative;
  font-size: 40px;
  margin: 60px 0 60px 0;
}

.services-section3 .services-section3__title:after {
  background: red;
  border-radius: 10px;
  content: "";
  height: .25rem;
  position: absolute;
  width: 2rem;
  top: 60px;
  left: 0;
}

.services-section3 .services-section3__content-left {
  font-weight: 700;
  font-size: 28px;
}

.services-section3 .services-section3__content-right {
  font-size: 21px;
  color: #707070;
}

.services-section3 .services-section3__body {
  font-weight: 400;
  color: #101010;
  font-size: 24px;
  margin: 0 0 80px 0;
}

.services-section3 .services-section3__expedition-list {
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  margin-bottom: 10px;
  line-height: 1.7em;
}

.services-section3 .services-section3__expedition-list--content {
  display: inline-block;
  vertical-align: top;
  width: 80%;
}

.services-section3 .services-section3__expedition-list--red {
  margin-right: 10px;
  font-size: 45px;
  line-height: 0.7em;
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
}

.services-section3 .services-section3__exp-list_content {
  font-size: 22px;
  font-weight: 400;
  color: #101010;
  line-height: 1.2em;
  padding-bottom: 20px;
}

.services-section3 .services-section3__exp-text {
  padding-left: 40px;
}

.services-section3 .services-section3__exp-text li::before {
  content: "+";
  font-size: 45px;
  vertical-align: middle;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-weight: 600;
}

@media only screen and (min-width: 576px) {
  .services-section3 {
    background-position: -10% 60%,150% 100%;
  }
}

@media only screen and (min-width: 768px) {
  .services-section3 {
    background-position: -10% 70%,150% 60%;
    background-size: 60%,50%;
    padding-bottom: 200px;
  }
  .services-section3 .services-section3__title {
    margin: 60px 0 130px 0;
  }
  .services-section3 .services-section3__title:after {
    top: 60px;
    left: 0;
  }
}

@media only screen and (min-width: 992px) {
  .services-section3 {
    background-position: -20% 80%,130% 60%;
    background-size: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .services-section3 {
    background-position: -20% 80%,120% 50%;
  }
}

@media only screen and (min-width: 1400px) {
  .services-section3 {
    background-position: -10% 80%,110% 40%;
  }
}

@media only screen and (min-width: 1600px) {
  .services-section3 {
    background-position: 0% 80%,100% 45%;
  }
}

/************************************
18. Services Section 4
************************************/
.services-section4 {
  padding-bottom: 50px;
  background-image: url(../assets/img_services/grid.svg), url(../assets/img_services/rounder_bottom.svg);
  background-position: 140% 95%,120% 90%;
  background-size: 80%,60%;
  background-repeat: no-repeat;
}

.services-section4 .services-section4__title {
  font-weight: 700;
  font-size: 28px;
}

.services-section4 .services-section4__content {
  font-size: 21px;
  color: #707070;
}

.services-section4 .services-section4__body {
  font-weight: 400;
  color: #101010;
  font-size: 24px;
  margin: 0 0 80px 0;
}

@media only screen and (min-width: 768px) {
  .services-section4 {
    background-position: 120% 80%,110% 75%;
    background-size: 60%,30%;
    padding-bottom: 200px;
  }
}

@media only screen and (min-width: 992px) {
  .services-section4 {
    background-position: 120% 80%,110% 75%;
    background-size: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .services-section4 {
    background-position: 130% 70%,120% 50%;
  }
}

@media only screen and (min-width: 1400px) {
  .services-section4 {
    background-position: 100% 70%,120% 50%;
  }
}

@media only screen and (min-width: 1600px) {
  .services-section4 {
    background-position: 100% 70%,100% 50%;
  }
}

/************************************
19. Services Section 5
************************************/
.services-section5 {
  padding-bottom: 50px;
  background-image: url(../assets/img_services/grid.svg), url(../assets/img_services/rounder_bottom.svg);
  background-position: -140% 95%,100% 90%;
  background-size: 80%,60%;
  background-repeat: no-repeat;
}

.services-section5 .services-section5__title {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 50px;
}

.services-section5 .services-section5__content {
  font-size: 21px;
  color: #707070;
}

.services-section5 .services-section5__body {
  font-weight: 400;
  color: #101010;
  font-size: 24px;
  margin: 0 0 80px 0;
}

@media only screen and (min-width: 768px) {
  .services-section5 {
    background-position: 0% 80%,110% 75%;
    background-size: 60%,30%;
    padding-bottom: 200px;
  }
}

@media only screen and (min-width: 992px) {
  .services-section5 {
    background-position: 0% 80%,110% 75%;
    background-size: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .services-section5 {
    background-position: 0% 70%,60% 50%;
  }
}

@media only screen and (min-width: 1400px) {
  .services-section5 {
    background-position: 0% 70%,60% 50%;
  }
}

@media only screen and (min-width: 1600px) {
  .services-section5 {
    background-position: 0% 70%,60% 50%;
  }
}

/************************************
20. Services Section 6
************************************/
.services-section6 {
  padding-bottom: 50px;
  background-image: url(../assets/img_services/grid.svg), url(../assets/img_services/rounder_bottom.svg);
  background-position: 140% 95%,120% 90%;
  background-size: 80%,60%;
  background-repeat: no-repeat;
}

.services-section6 .services-section6__title {
  font-weight: 700;
  font-size: 28px;
  margin-bottom: 50px;
}

.services-section6 .services-section6__content {
  font-size: 21px;
  color: #707070;
}

.services-section6 .services-section6__body {
  font-weight: 400;
  color: #101010;
  font-size: 24px;
  margin: 0 0 80px 0;
}

@media only screen and (min-width: 768px) {
  .services-section6 {
    background-position: 120% 80%,110% 75%;
    background-size: 60%,30%;
    padding-bottom: 200px;
  }
}

@media only screen and (min-width: 992px) {
  .services-section6 {
    background-position: 120% 80%,110% 75%;
    background-size: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .services-section6 {
    background-position: 130% 70%,120% 50%;
  }
}

@media only screen and (min-width: 1400px) {
  .services-section6 {
    background-position: 100% 70%,120% 50%;
  }
}

@media only screen and (min-width: 1600px) {
  .services-section6 {
    background-position: 100% 70%,100% 50%;
  }
}
/*# sourceMappingURL=style.css.map */