/* =================================================================
   Services page components
   (loads after style.css + about.css and re-uses their chrome:
    page header, buttons, progress bars, client marquee, video band)
   ================================================================= */

/* ---------------- Page title header ---------------- */
.page_header_services { background-image: url(../images/gea-index-header.jpg); }

/* =================================================================
   1. Top services
   ================================================================= */
.sec_serv_top { background-color: #FFFFFF; }

.serv_head { display: flex; flex-wrap: wrap; align-items: flex-start; }
.serv_head_title { width: 34.03%; padding-right: 22px; }
.serv_head_text  { width: 51.01%; }
.serv_head_text p { margin: 0; }
.serv_head_btn   { width: 14.96%; text-align: right; }
.serv_head_sp_text { height: 48px; }
.serv_head_sp_btn  { height: 50px; }
.serv_head_gap { height: 45px; }

/* ---- slider ---- */
.serv_slider { overflow: hidden; }
.serv_track { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.serv_track.no_anim { transition: none; }
.serv_slide { flex: 0 0 auto; width: calc((100% - 60px) / 3); margin-right: 30px; }

.serv_slider_nav { display: flex; justify-content: flex-end; margin-top: 30px; }
.serv_slider_nav button { padding: 0; cursor: pointer; font: inherit; }

/* ---- card ---- */
.serv_card {
  position: relative; z-index: 1;
  display: inline-block; width: 100%;
  text-align: left;
  font-family: "DM Sans", sans-serif; font-size: 17px; line-height: 28.05px;
}
.serv_card:before { content: ' '; width: 0; height: 0; padding-top: 115%; display: inline-block; }
.serv_card_content {
  position: absolute; z-index: 1; inset: 0; display: flex;
  background-color: #05080D;
  background-position: center center; background-repeat: no-repeat; background-size: cover;
}
.serv_card_content:before {
  content: ' '; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  opacity: .6; transition: opacity .3s; will-change: opacity;
}
.serv_card:hover .serv_card_content:before { opacity: 0; }
.serv_card_content:after {
  content: ' '; position: absolute; inset: 0; z-index: 0;
  background-color: #000; opacity: 0; transition: opacity .3s; will-change: opacity;
}
.serv_card:hover .serv_card_content:after { opacity: .6; }

.serv_card_inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: stretch; align-items: flex-start;
  box-sizing: border-box; width: 100%; max-height: 100%; overflow: hidden;
  padding: 2em 2.2em 2.4em;
}
.serv_card_top { opacity: 1; }
.serv_card_bottom {
  flex-grow: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  position: relative; z-index: 1; width: 100%; max-height: 100%; overflow: hidden;
  box-sizing: border-box;
  transform: translateY(40px); will-change: transform;
  transition: transform .3s ease-out;
}
.serv_card:hover .serv_card_bottom { transform: translateY(0); }

.serv_card_number {
  display: inline-block;
  font-family: Outfit, sans-serif; font-size: 1.333em; line-height: 1em; font-weight: 500;
  letter-spacing: 0; color: #FFFFFF;
}
.serv_card_title {
  font-family: Outfit, sans-serif; font-size: 1.556em; line-height: 1.3em; font-weight: 500;
  letter-spacing: -.6px; margin: .4em 0 0;
}
.serv_card_title, .serv_card_title a { color: #FFFFFF; }
.serv_card_title a:hover { color: #FFFFFF; }
.serv_card_text {
  font-size: 17px; line-height: 1.5em; max-height: 4.8em; overflow: hidden;
  margin-top: .55em; color: rgba(255,255,255,.8);
}
.serv_card_text p { margin: 0; }
.serv_card_button { margin-top: 1.2em; opacity: 0; will-change: opacity; transition: opacity .3s ease-out; }
.serv_card:hover .serv_card_button { opacity: 1; }
.serv_card .item_more_link,
.serv_card .item_more_link:hover { color: #FFFFFF; }
.serv_card_link { position: absolute; z-index: 10; inset: 0; }

/* =================================================================
   2. Plain white spacer band
   ================================================================= */
.sec_serv_spacer { background-color: #FFFFFF; }

/* =================================================================
   3. Contact brief + progress
   ================================================================= */
.sec_serv_contact { background-color: #FFFFFF; }
.serv_contact_row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.serv_contact_info { width: 50%; padding: 0 15px; }
.serv_contact_info_inner { max-width: 551px; }
.serv_contact_info_inner > p { margin: 0; }
.serv_contact_bars { width: 50%; padding: 180px 15px 0; }
.serv_contact_sp1 { height: 38px; }
.serv_contact_sp2 { height: 45px; }
.sec_serv_contact .progress_track { background-color: #D3DCE0; }

.serv_mail_btn {
  display: inline-flex; align-items: center;
  font-family: Outfit, sans-serif; font-size: 19px; line-height: 20px; font-weight: 500;
  color: var(--text_dark); transition: color .3s ease;
}
.serv_mail_btn_icon {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  background-color: var(--text_link); color: #FFFFFF; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 14.4px; transition: background-color .3s ease;
}
.serv_mail_btn_icon:before { margin: 0; width: auto; }
.serv_mail_btn:hover { color: var(--text_link); }
.serv_mail_btn:hover .serv_mail_btn_icon { background-color: var(--text_hover); }

/* =================================================================
   4. Client strip
   ================================================================= */
.sec_serv_clients { background-color: #FFFFFF; }
.sec_serv_clients .clients_static_row { align-items: center; }
.sec_serv_clients .clients_static_col { padding: 0 12px; min-height: 111px; display: flex; align-items: center; }
.sec_serv_clients .clients_static_col a { width: 100%; }
.sec_serv_clients .clients_static_col img { width: 100%; max-width: 215px; height: auto; margin: 0 auto; }

/* =================================================================
   5. Video band
   ================================================================= */
.sec_serv_video { position: relative; z-index: 1; }
.sec_serv_video .video_band { height: 661px; }
.sec_serv_video .video_band:before { background-color: rgba(6,18,49,.45); }
.sec_serv_video .video_band .video_play {
  width: 101px; height: 101px; padding: 0;
  background-color: transparent; border: 1.6px solid #FFFFFF; border-radius: 50%;
  color: rgba(255,255,255,.9);
  font-family: Outfit, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.sec_serv_video .video_band .video_play:hover {
  background-color: #FFFFFF; color: var(--text_dark); transform: none;
}

/* =================================================================
   6. Corporate service (icons)
   ================================================================= */
.sec_serv_corp { background-color: #FFFFFF; }
.serv_corp_row { display: flex; flex-wrap: wrap; }
.serv_corp_title { width: 50%; padding-right: 64px; }
.serv_corp_icons { width: 50%; }
.serv_corp_sp { height: 50px; }
.serv_corp_gap { height: 80px; }

.serv_icons { display: flex; flex-wrap: wrap; margin-right: -30px; }
.serv_icons_col { flex: 0 0 auto; padding-right: 30px; }
.serv_icons_2 .serv_icons_col { width: 50%; }
.serv_icons_4 .serv_icons_col { width: 25%; }
.serv_icon_item { position: relative; }
.serv_icon_glyph {
  display: inline-block; font-size: 78.5px; line-height: 78.5px; height: 78.5px;
  color: var(--text_link); transition: color .3s ease;
}
.serv_icon_glyph:before { margin: 0; width: auto; }
.serv_icon_title {
  font-family: Outfit, sans-serif; font-size: 22.661px; line-height: 27.19px; font-weight: 500;
  letter-spacing: 0; color: var(--text_dark); margin: 33.5px 0 0;
}
.serv_icon_title span { display: block; }
.serv_icon_item a.serv_icon_link { position: absolute; inset: 0; z-index: 2; }
.serv_icon_item:hover .serv_icon_title { color: var(--text_link); }

/* =================================================================
   7. Our benefits
   ================================================================= */
.sec_serv_benefits { background-color: #F8F8F8; }
.serv_ben_row { display: flex; flex-wrap: wrap; align-items: center; }
.serv_ben_media { width: 50%; padding: 120px 15px 120px 60px; }
.serv_ben_media_inner { display: flex; }
.serv_ben_media_inner { justify-content: space-between; }
.serv_ben_img { width: calc(50% - 15px); }
.serv_ben_img img { width: 100%; height: 503px; object-fit: cover; display: block; }
.serv_ben_video {
  width: calc(50% - 15px);
  background-image: url(../images/services-benefit-2.jpg);
  background-position: center center; background-repeat: no-repeat; background-size: cover;
  display: flex; align-items: center; justify-content: center;
}
.serv_ben_play {
  width: 66px; height: 66px; border-radius: 50%;
  background-color: #FFFFFF; color: var(--text_dark);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.serv_ben_play svg { width: 12.24px; height: 16.583px; fill: currentColor; display: block; }
.serv_ben_play:hover { background-color: var(--text_link); color: #FFFFFF; transform: scale(1.06); }

.serv_ben_info { width: 50%; padding: 0 67px 0 92.6px; }
.serv_ben_info_inner { max-width: 552px; }
.serv_ben_info_inner .sc_button_wrap,
.serv_ben_info_inner .sc_button { margin-bottom: 0; }
.serv_ben_sp1 { height: 33px; }
.serv_ben_sp2 { height: 45px; }

.list_success li {
  position: relative; padding-left: 30px;
  color: var(--text_dark); font-size: 17px; line-height: 28.05px;
}
.list_success li + li { margin-top: 10px; }
.list_success li:before {
  content: '\e9a2'; font-family: fontello; font-size: 11px;
  position: absolute; left: 0; top: 0; line-height: 28.05px;
  color: var(--text_link);
}

/* =================================================================
   8. Process strip (accent)
   ================================================================= */
.sec_serv_process { background-color: var(--text_link); }
.serv_proc_sp { height: 40px; }
.serv_proc_row { display: flex; flex-wrap: wrap; margin-right: -60px; }
.serv_proc_col { width: 25%; padding-right: 60px; }
.serv_proc_item { position: relative; display: flex; align-items: flex-start; padding: 13px 0; }
.serv_proc_col:not(:last-child) .serv_proc_item:after {
  content: ''; display: block; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 100%;
  background-color: rgba(252,252,252,.2);
}
.serv_proc_icon {
  flex: 0 0 auto; width: 57.8px; height: 57.8px; line-height: 57.8px;
  text-align: center; font-size: 44.2px; color: #FCFCFC;
}
.serv_proc_icon:before { margin: 0; width: auto; }
.serv_proc_details { margin-left: 13.6px; margin-top: 10.2px; padding-right: 5%; }
.serv_proc_title {
  font-family: Outfit, sans-serif; font-size: 19.006px; line-height: 22.8px; font-weight: 500;
  letter-spacing: 0; color: #FCFCFC; margin: 0;
}
.serv_proc_text { font-size: 15px; line-height: 24px; color: #FCFCFC; margin-top: 7.5px; }

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width: 1279px) {
  .serv_head_title { width: 100%; padding-right: 0; }
  .serv_head_text  { width: 75%; }
  .serv_head_btn   { width: 25%; }
  .serv_head_sp_text { height: 18px; }
  .serv_head_sp_btn  { height: 20px; }
  .serv_head_gap { height: 35px; }
  .serv_card:before { padding-top: 130%; }

  .serv_contact_sp1 { height: 20px; }
  .serv_contact_sp2 { height: 30px; }
  .serv_contact_bars { padding-top: 150px; }

  .sec_serv_video .video_band { height: 461px; }
  .sec_serv_video .video_band .video_play { width: 101px; height: 101px; }

  .serv_corp_title { padding-right: 34px; }
  .serv_corp_sp { height: 50px; }
  .serv_corp_gap { height: 60px; }
  .serv_icon_glyph { font-size: 66px; line-height: 66px; height: 66px; }
  .serv_icon_title { font-size: 20px; line-height: 24px; margin-top: 28px; }

  .serv_ben_media { padding: 90px 15px 90px 20px; }
  .serv_ben_img img { height: 368px; }
  .serv_ben_info { padding: 0 15px 0 30px; }

  .serv_proc_row { margin-right: -50px; }
  .serv_proc_col { width: 50%; padding-right: 50px; }
  .serv_proc_col:nth-child(2n) .serv_proc_item:after { display: none; }
  .serv_proc_col:nth-child(1) .serv_proc_item:after,
  .serv_proc_col:nth-child(3) .serv_proc_item:after { display: block; }
  .serv_proc_col:nth-child(1) .serv_proc_item,
  .serv_proc_col:nth-child(2) .serv_proc_item { margin-bottom: 30px; }
}

@media (max-width: 1023px) {
  .sec_serv_video .video_band { height: 421px; }
  .serv_contact_bars { padding-top: 160px; }
}

@media (max-width: 767px) {
  .serv_head_title, .serv_head_text, .serv_head_btn { width: 100%; padding-right: 0; }
  .serv_head_btn { text-align: left; }
  .serv_head_sp_text { height: 12px; }
  .serv_head_sp_btn  { height: 20px; }
  .serv_head_gap { height: 25px; }

  .serv_slide { width: calc((100% - 30px) / 2); }
  .serv_card:before { padding-top: 95%; }
  .serv_card_inner { padding: 1.6em; }
  .serv_card_title { font-size: 1.25em; }
  .serv_card_text { font-size: 16px; line-height: 1.4em; max-height: 3em; }

  .serv_contact_info, .serv_contact_bars { width: 100%; }
  .serv_contact_sp1 { height: 12px; }
  .serv_contact_sp2 { height: 25px; }
  .serv_contact_bars { padding-top: 30px; }

  .sec_serv_clients .clients_static_col { padding: 0 14px; min-height: 94px; }
  .sec_serv_clients .clients_static_col img { max-width: 182px; }

  .sec_serv_video .video_band { height: 201px; }
  .sec_serv_video .video_band .video_play { width: 81px; height: 81px; font-size: 12px; }

  .serv_corp_title, .serv_corp_icons { width: 100%; padding-right: 0; }
  .serv_corp_sp { height: 30px; }
  .serv_corp_gap { height: 30px; }
  .serv_icons_4 .serv_icons_col { width: 50%; }
  .serv_icons_col { padding-bottom: 20px; }
  .serv_icon_glyph { font-size: 58px; line-height: 58px; height: 58px; }
  .serv_icon_title { font-size: 18px; line-height: 22px; margin-top: 22px; }

  .serv_ben_media, .serv_ben_info { width: 100%; }
  .serv_ben_media { padding: 60px 30px 30px; }
  .serv_ben_info { padding: 0 30px 60px; }
  .serv_ben_img img { height: 280px; }
  .serv_ben_sp1 { height: 15px; }
  .serv_ben_sp2 { height: 20px; }

  .serv_proc_row { margin-right: 0; }
  .serv_proc_col { width: 100%; padding-right: 0; }
  .serv_proc_col .serv_proc_item:after { display: none !important; }
  .serv_proc_col:nth-child(1) .serv_proc_item,
  .serv_proc_col:nth-child(2) .serv_proc_item { margin-bottom: 0; }
}

@media (max-width: 479px) {
  .serv_card_inner { padding: 1.4em; }
  .serv_card_title { font-size: 1.15em; }
  .serv_ben_img img { height: 230px; }
  .serv_icon_glyph { font-size: 52px; line-height: 52px; height: 52px; }
  .serv_icon_title { font-size: 17px; line-height: 21px; margin-top: 18px; }
  .serv_proc_icon { width: 46px; height: 46px; line-height: 46px; font-size: 34px; }
  .serv_proc_details { margin-left: 12px; margin-top: 4px; }
}