/* =================================================================
   About page components
   (shares palette, typography and chrome with style.css)
   ================================================================= */

/* ---------------- Page title header ---------------- */
.page_header {
  position: relative;
  background-color: #061231;
  background-image: url(../images/about-header-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.page_header:before {
  content: ''; position: absolute; inset: 0;
  background-color: rgba(6,18,49,.6);
}
.page_header .top_panel { position: relative; }
.page_header_body { position: relative; z-index: 2; text-align: center; }
.page_header_sp_top { height: 75px; }
.page_header_sp_mid { height: 30px; }
.page_header_sp_bot { height: 149px; }
.page_title {
  font-size: 57px; line-height: 57px; letter-spacing: -1.7px; font-weight: 500;
  color: #FCFCFC; margin: 0;
}
.page_header_icon { line-height: 0; }
.page_header_icon svg { width: 16px; height: auto; fill: #fff; display: inline-block; }

.page_header_scroll {
  position: relative; z-index: 3; margin-top: -80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.page_header_scroll a { display: block; line-height: 0; animation: gea-bob 2.2s ease-in-out infinite; }
.page_header_scroll svg { width: 15px; height: auto; fill: #fff; transition: fill .3s ease; }
.page_header_scroll a:hover svg { fill: var(--text_link); }
@keyframes gea-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------------- Intro ---------------- */
.sec_intro { background-color: #FFFFFF; }
.intro_row { align-items: center; }
.intro_media { position: relative; }
.intro_media_inner { position: relative; padding-top: 45px; }
.intro_img1 { width: 69.84%; }
.intro_img1 img { width: 100%; height: auto; display: block; }
.intro_img2 { position: relative; z-index: 2; width: 63%; margin: -51.75% 0 0 36.83%; }
.intro_img2 img { width: 100%; height: auto; display: block; }
.intro_odometer {
  position: absolute; right: 0; top: -31px; z-index: 3;
  width: 321px; text-align: right; pointer-events: none;
}
.intro_odometer_total {
  display: block;
  font-family: Outfit, sans-serif; font-size: 130px; line-height: 130px; font-weight: 500;
  letter-spacing: 9px; color: var(--text_link);
}
.intro_odometer_label {
  display: block; font-family: Outfit, sans-serif;
  font-size: 18px; line-height: 29.7px; font-weight: 500;
  text-transform: uppercase; color: var(--text_link);
}
.intro_info { padding-left: calc(9% + 15px); }
.intro_hours p {
  font-size: 15px; font-weight: 500; line-height: 28.05px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text_dark); margin: 0;
}
.intro_sp_1 { height: 30px; }
.intro_sp_2 { height: 40px; }

/* ---------------- Clients strip ---------------- */
.sec_clients_static { background-color: #FFFFFF; }
.sec_clients_static .container { overflow: hidden; }
.clients_static_row {
  display: flex; flex-wrap: nowrap; align-items: center; width: 200%;
  animation: clients-marquee 40s linear infinite;
  will-change: transform;
}
.clients_static_col { width: 8.3333%; flex: 0 0 auto; padding: 19px 0; text-align: center; }
.clients_static_col a { display: block; font-size: 0; line-height: 0; }
.clients_static_col img { display: inline-block; max-width: 100%; opacity: .15; transition: opacity .3s ease; }
.clients_static_col a:hover img { opacity: 1; }

/* ---------------- Video band ---------------- */
.sec_video_band {
  position: relative; z-index: 2;
  margin-bottom: -450px;
  background: linear-gradient(#FFFFFF 0, #FFFFFF 212px, rgba(255,255,255,0) 212px);
}
.video_band {
  position: relative; overflow: hidden;
  background-color: #061231;
  height: 662px;
  display: flex; align-items: center; justify-content: center;
}
.video_band_media {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video_band:before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(6,18,49,.25); pointer-events: none;
}
.video_band .video_play {
  position: relative; z-index: 2; width: 64px; height: 64px; padding: 25px;
  background-color: #fff; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.video_band .video_play svg { width: auto; height: 14px; fill: var(--text_dark); transition: fill .3s ease; }
.video_band .video_play:hover { transform: scale(1.08); }
.video_band .video_play:hover svg { fill: var(--text_link); }

/* ---------------- Offer (icons) ---------------- */
.sec_offer {
  position: relative; z-index: 1;
  padding-top: 450px;
  background-color: #061231;
  background-image: url(../images/oil-back-stroke-on-dark.png);
  background-position: 0 0; background-repeat: repeat; background-size: auto;
}
.offer_head_title { width: 47.5%; }
.offer_head_text { width: 52.5%; padding-left: 47px; }
.offer_head_text p { margin: 0; }
.offer_head_text p + p { margin-top: 28px; }

.sc_icons { display: flex; flex-wrap: wrap; }
.sc_icons_item { position: relative; width: 25%; padding: 15px 20px 15px 0; }
.sc_icons_item + .sc_icons_item {
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 37px;
}
.sc_icons_icon {
  display: block; height: 82px; font-size: 75px; line-height: 82px;
  color: var(--text_link); transition: color .3s ease;
}
.sc_icons_icon:before { margin: 0; width: auto; }
.sc_icons_item_title {
  font-size: 22.661px; line-height: 27.19px; letter-spacing: 0; font-weight: 500;
  margin: 56px 0 0;
}
.sc_icons_item_title a { color: #FCFCFC; }
.sc_icons_item:hover .sc_icons_item_title a { color: var(--text_link); }
.sc_icons_item_more_link {
  position: relative; z-index: 1; display: inline-block; margin-top: 48px;
  font-family: Outfit, sans-serif; font-size: 15px; font-weight: 500; line-height: 21px;
  color: #FCFCFC; overflow: hidden;
}
.sc_icons_item_more_link .link_text {
  display: inline-block; position: relative; vertical-align: middle;
  white-space: nowrap; text-indent: -110px; opacity: 0; visibility: hidden; margin-right: 0;
  transition: visibility .4s, margin-right .4s ease-out, text-indent .4s ease-out, opacity .4s;
}
.sc_icons_item_more_link .link_icon {
  position: relative; display: inline-block; vertical-align: middle;
  width: 21px; height: 21px; line-height: 21px; text-align: center;
}
.sc_icons_item_more_link .link_icon:before {
  content: '\e9a4'; font-family: fontello; font-size: 11px; line-height: inherit;
  font-weight: 400; display: inline-block; vertical-align: top; color: currentColor;
  transition: transform .3s ease;
}
.sc_icons_item:hover .sc_icons_item_more_link .link_text {
  opacity: 1; text-indent: 0; margin-right: 8px; visibility: visible;
  transition: visibility .4s, margin-right .3s ease-out, text-indent .4s ease-out, opacity .4s;
}
.sc_icons_item:hover .sc_icons_item_more_link .link_icon:before { transform: rotate(-45deg); }
.sc_icons_item_link { position: absolute; inset: 0; z-index: 2; }

/* ---------------- Quality + progress ---------------- */
.sec_quality { background-color: var(--bg_color); }
.quality_row { align-items: center; }
.quality_info { width: 43.7%; }
.quality_media { width: 56.3%; position: relative; height: 600px; }
.quality_img_back { position: absolute; right: 0; top: 0; width: 62.5%; }
.quality_img_front { position: absolute; left: 0; top: 181px; width: 50.9%; z-index: 2; }
.quality_img_back img, .quality_img_front img { width: 100%; height: auto; display: block; }

.progress_item { position: relative; margin-top: 26px; }
.progress_item:first-of-type { margin-top: 0; }
.progress_title {
  display: block;
  font-family: Outfit, sans-serif; font-size: 19px; line-height: 28.05px; font-weight: 500;
  color: var(--text_dark);
}
.progress_track {
  position: relative; height: 6px; border-radius: 20px; margin-top: 12px;
  background-color: #FFFFFF;
}
.progress_bar {
  position: relative; display: block; height: 6px; width: 0;
  border-radius: 20px; background-color: var(--text_link);
  transition: width 1.6s cubic-bezier(.25,.8,.25,1);
}
.progress_percent {
  position: absolute; right: 0; bottom: 100%; margin-bottom: 12px;
  font-family: Outfit, sans-serif; font-size: 18px; line-height: 1; font-weight: 500;
  color: var(--text_dark);
}

/* ---------------- Track record (timeline) ---------------- */
.sec_record { background-color: #FFFFFF; }
.record_head_title { width: 50%; }
.record_timeline { position: relative; margin-top: -250px; }
.record_row { position: relative; display: flex; flex-wrap: wrap; }
.record_row_1 { padding-bottom: 40px; }
.record_row_2 { padding-top: 40px; }
.record_row_1:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background-color: var(--bd_color);
}
.record_card_slot { position: relative; width: 25%; padding: 0 15px; }
.record_row_1 .record_card_slot:first-child { margin-left: 50%; }

.record_card {
  position: relative; height: 230px; background-color: #FFFFFF;
  box-shadow: 0 3px 50px rgba(0,0,0,.04);
  padding: 55px 30px 50px; text-align: center;
  transition: box-shadow .4s ease;
}
.record_card_slot:hover .record_card { box-shadow: 0 3px 50px rgba(0,0,0,.10); }
.record_card:after {
  content: ''; position: absolute; left: 50%; z-index: 1;
  width: 22px; height: 22px; background-color: transparent;
  transform: translateX(-50%) rotate(45deg);
  transition: .4s;
}
.record_row_1 .record_card:after { bottom: 0; }
.record_row_2 .record_card:after { top: 0; }
.record_row_1 .record_card_slot:hover .record_card:after { bottom: -8px; background-color: #FFFFFF; }
.record_row_2 .record_card_slot:hover .record_card:after { top: -8px; background-color: #FFFFFF; }

.record_card_title { font-size: 24px; line-height: 28.8px; letter-spacing: -.6px; margin: 0; }
.record_card_title a { color: var(--text_dark); }
.record_card_slot:hover .record_card_title a { color: var(--text_link); }
.record_card_text { margin-top: 14px; }
.record_card_text p { margin: 0; }

.record_point {
  position: absolute; left: 50%; z-index: 2;
  width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background-color: #FFFFFF;
  transition: background-color .4s ease, transform .4s ease;
}
.record_row_1 .record_point { bottom: -47px; }
.record_row_2 .record_point { top: -51px; }
.record_point:before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background-color: var(--text_dark);
  transition: background-color .4s ease;
}
.record_card_slot:hover .record_point { background-color: rgba(0,166,81,.2); transform: scale(1.15); }
.record_card_slot:hover .record_point:before { background-color: var(--text_link); }

.record_bottom_slot { width: 50%; padding: 0 15px; }
.record_bottom_slot p { margin: 0; }

.link_video {
  display: inline-flex; align-items: center; margin-top: 24px;
  font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; line-height: 20px;
  color: var(--text_dark); transition: color .3s ease;
}
.link_video_icon {
  width: 34px; height: 34px; border-radius: 50%; margin-right: 16px; flex: 0 0 auto;
  background-color: var(--text_link);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .3s ease;
}
.link_video_icon svg { width: auto; height: 11px; fill: #fff; }
.link_video:hover { color: var(--text_link); }
.link_video:hover .link_video_icon { background-color: var(--text_hover); }

/* simple text button with arrow */
.sc_button_simple {
  position: relative; display: inline-block; padding: 0 29.75px 2px 0;
  font-family: Outfit, sans-serif; font-size: 17px; font-weight: 500; line-height: 20px;
  color: var(--text_dark); background: none;
  transition: color .3s ease;
}
.sc_button_simple:after {
  content: '\e908'; font-family: fontello; font-size: 12px;
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  transition: right .3s ease;
}
.sc_button_simple:hover { color: var(--text_link); }
.sc_button_simple:hover:after { right: -6px; }

/* ---------------- Testimonials ---------------- */
.sec_testimonials {
  position: relative;
  background-color: #061231;
  background-image: url(../images/testimonial-bg-wide.jpg);
  background-position: center center; background-repeat: no-repeat; background-size: cover;
  min-height: 835px;
}
.testi_container { position: relative; z-index: 3; display: flex; align-items: stretch; min-height: 835px; }
.testi_col { width: 50%; display: flex; }
.testi_panel {
  flex: 1 1 auto;
  background-color: rgba(8, 11, 36, .9);
  margin: 120px 0 -120px;
  padding: 0 107px;
  display: flex; flex-direction: column; justify-content: center;
}
.testimonials { position: relative; }
.testimonials_viewport { overflow: hidden; }
.testimonials_track { display: flex; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.testimonials_slide { flex: 0 0 100%; width: 100%; }
.testimonials_item { position: relative; padding-left: 72px; }
.testimonials_item:before {
  font-family: fontello; content: '\e9a4';
  color: var(--text_link); font-size: 26px; line-height: 1;
  position: absolute; left: 0; top: 2px; transform: rotate(-45deg);
}
.testimonials_text { font-size: 18px; line-height: 34.2px; color: var(--text); margin: 0; }
.testimonials_author { display: flex; align-items: center; margin-top: 40px; }
.testimonials_avatar {
  width: 78px; height: 78px; border-radius: 50%; margin-right: 16px; flex: 0 0 auto;
  overflow: hidden; background-color: #FFFFFF; padding: 9px;
  display: flex; align-items: center; justify-content: center;
}
.testimonials_avatar img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.testimonials_name {
  font-family: Outfit, sans-serif; font-size: 19px; line-height: 24.7px; font-weight: 500;
  color: #FCFCFC; margin: 0;
}
.testimonials_role { font-size: 16px; line-height: 24px; color: var(--text_light); margin-top: 4px; }
.testimonials_bullets { display: flex; margin-top: 40px; }
.testimonials_bullets span {
  width: 8px; height: 8px; border-radius: 50%; margin-right: 12px; cursor: pointer;
  background-color: rgba(255,255,255,.25); transition: background-color .3s ease, width .3s ease;
}
.testimonials_bullets span.is-active { background-color: var(--text_link); width: 24px; border-radius: 4px; }

/* ---------------- Stats ---------------- */
.sec_stats { background-color: #FFFFFF; }
.stats_row { display: flex; flex-wrap: wrap; }
.stats_col { position: relative; width: 25%; padding: 0 30px; text-align: center; }
.stats_col + .stats_col:before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 60px; background-color: var(--bd_color);
}
.stats_total {
  display: block;
  font-family: Outfit, sans-serif; font-size: 61.387px; line-height: 61.387px; font-weight: 500;
  letter-spacing: -.1px; color: var(--text_dark);
}
.stats_title {
  font-family: Outfit, sans-serif; font-size: 19px; line-height: 31.35px; font-weight: 500;
  color: var(--text_dark); margin-top: 8.55px;
}

/* ---------------- Team ---------------- */
.sec_team_about { position: relative; z-index: 1; background-color: var(--bg_color); }
.sec_team_about .team_thumb_wrap:after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-color: rgba(6,18,49,.30);
  transition: opacity .4s ease;
}
.sec_team_about .sc_team_item:hover .team_thumb_wrap:after { opacity: 0; }
.team_head { align-items: center; }
.team_head_title { width: 33.333%; }
.team_head_text { width: 47%; padding-left: 15px; }
.team_head_btn { width: 19.667%; text-align: right; }
.team_head_text p { margin: 0; }
.team_grid_3 { display: flex; flex-wrap: wrap; gap: 30px; }
.team_grid_3 .sc_team_item { width: calc((100% - 60px) / 3); padding: 0; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1279px) {
  .page_title { font-size: 46px; line-height: 46px; letter-spacing: -1.3px; }
  .intro_odometer { width: 250px; top: -22px; }
  .intro_odometer_total { font-size: 96px; line-height: 96px; letter-spacing: 6px; }
  .intro_info { padding-left: 15px; }

  .offer_head_title, .offer_head_text { width: 100%; }
  .offer_head_text { padding-left: 0; margin-top: 30px; }
  .sc_icons_item { width: 50%; padding: 15px 20px 34px 0; }
  .sc_icons_item:nth-child(odd) { border-left: none; padding-left: 0; }
  .sc_icons_item:nth-child(3) { border-left: none; padding-left: 0; }
  .sc_icons_item_title { margin-top: 36px; }

  .video_band { height: 460px; }
  .sec_video_band {
    margin-bottom: -313px;
    background: linear-gradient(#FFFFFF 0, #FFFFFF 147px, rgba(255,255,255,0) 147px);
  }
  .sec_offer { padding-top: 313px; }

  .quality_info, .quality_media { width: 100%; }
  .quality_media { height: auto; margin-top: 40px; display: flex; align-items: flex-end; }
  .quality_img_back, .quality_img_front { position: static; width: 50%; }
  .quality_img_front { padding-right: 15px; }
  .quality_img_back { padding-left: 15px; }

  .record_head_title { width: 100%; }
  .record_timeline { margin-top: 40px; }
  .record_row_1, .record_row_2 { padding: 0; }
  .record_row_1:after { display: none; }
  .record_point { display: none; }
  .record_card:after { display: none; }
  .record_card_slot { width: 50%; margin-bottom: 30px; }
  .record_row_1 .record_card_slot:first-child { margin-left: 0; }
  .record_card { height: auto; min-height: 230px; }
  .record_bottom_slot { width: 100%; padding: 0 15px; margin-top: 10px; }

  .sec_testimonials, .testi_container { min-height: 0; }
  .sec_testimonials { overflow: hidden; }
  .testi_container { display: block; }
  .testi_col { width: 100%; display: block; }
  .testi_panel { margin: 0; padding: 90px 40px; background-color: rgba(8, 11, 36, .9); display: block; }

  .stats_col { width: 50%; margin-bottom: 40px; }
  .stats_col:nth-child(3):before { display: none; }
  .stats_total { font-size: 52px; line-height: 52px; }

  .team_head_title, .team_head_text, .team_head_btn { width: 100%; }
  .team_head_text { padding-left: 0; margin-top: 20px; }
  .team_head_btn { text-align: left; margin-top: 20px; }
  .team_grid_3 .sc_team_item { width: calc((100% - 30px) / 2); }

  .clients_static_row { width: 400%; }
  .clients_static_col { padding: 20px 0; }
}

@media (max-width: 767px) {
  .page_title { font-size: 38px; line-height: 40px; letter-spacing: -1px; }
  .page_header_sp_top { height: 50px; }
  .page_header_sp_bot { height: 60px; }

  .intro_media, .intro_info { width: 100%; }
  .intro_img1 { width: 100%; }
  .intro_img2 { position: static; width: 65%; margin: 30px 0 0 35%; }
  .intro_odometer { position: static; width: 100%; text-align: left; margin-bottom: 24px; }
  .intro_odometer_total { font-size: 72px; line-height: 72px; letter-spacing: 4px; }
  .intro_media_inner { padding-top: 0; }

  .sc_icons_item { width: 100%; border-left: none !important; padding: 0 0 34px 0 !important; }
  .video_band { height: 320px; }
  .sec_video_band {
    margin-bottom: -218px;
    background: linear-gradient(#FFFFFF 0, #FFFFFF 102px, rgba(255,255,255,0) 102px);
  }
  .sec_offer { padding-top: 218px; }
  .quality_media { display: block; }
  .quality_img_back, .quality_img_front { width: 100%; padding: 0; }
  .quality_img_back { margin-top: 20px; }
  .record_card_slot { width: 100%; }
  .stats_col { width: 50%; padding: 0 10px; }
  .stats_col:nth-child(3):before { display: block; }
  .stats_total { font-size: 44px; line-height: 44px; }
  .stats_title { font-size: 17px; }
  .team_grid_3 .sc_team_item { width: 100%; }
  .clients_static_row { width: 600%; }
  .clients_static_col { padding: 16px 0; }
  .testi_panel { padding: 60px 30px; }
  .testimonials_item { padding-left: 0; }
  .testimonials_item:before { position: static; display: block; margin-bottom: 14px; }
}

@media (max-width: 479px) {
  .page_title { font-size: 30px; line-height: 34px; letter-spacing: -.8px; }
  .intro_odometer_total { font-size: 60px; line-height: 60px; }
  .testimonials_avatar { width: 60px; height: 60px; padding: 7px; }
}