/* ==========================================================================
   Extractpoint Mining — UI refinement layer
   Loaded after style.css / responsive.css. Everything here is an override on
   top of the base theme; the theme files are left untouched so the two can be
   diffed independently.
   ========================================================================== */

:root {
  --ep-brand:        #00b6f0;   /* logo cyan */
  --ep-brand-dark:   #0090c4;
  --ep-brand-soft:   rgba(0, 182, 240, 0.10);
  --ep-accent:       #f5a623;   /* logo amber pin */
  --ep-ink:          #16202b;
  --ep-body:         #56616e;
  --ep-muted:        #8794a1;
  --ep-line:         #e4e9ef;
  --ep-surface:      #ffffff;
  --ep-surface-alt:  #f6f9fc;
  --ep-dark:         #0e1720;

  --ep-radius:       14px;
  --ep-radius-sm:    10px;
  --ep-shadow:       0 1px 2px rgba(16, 32, 48, .04), 0 8px 24px rgba(16, 32, 48, .07);
  --ep-shadow-lg:    0 2px 4px rgba(16, 32, 48, .05), 0 18px 44px rgba(16, 32, 48, .13);
  --ep-ease:         cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   1. Typography
   -------------------------------------------------------------------------- */

body {
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--ep-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', 'Open Sans', sans-serif;
  color: var(--ep-ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p { color: var(--ep-body); }

a { transition: color .2s var(--ep-ease); }
a:hover, a:focus { text-decoration: none; }

/* Visible focus for keyboard users — the base theme removes it entirely. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ep-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Section headings — one consistent treatment everywhere
   -------------------------------------------------------------------------- */

.section-headline { margin-bottom: 55px; }

.section-headline h2 {
  position: relative;
  display: inline-block;
  font-size: 38px;
  font-weight: 700;
  color: var(--ep-ink);
  margin: 0 0 18px;
  padding-bottom: 0;
  text-transform: none;
}

.section-headline h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--ep-brand), var(--ep-accent));
}

.section-headline.text-center h2::after { left: 50%; }

/* The theme ships a separate <span> rule underneath some headings. */
.section-headline span { display: none; }

/* --------------------------------------------------------------------------
   3. Header / navigation
   -------------------------------------------------------------------------- */

.header-area {
  background: rgba(14, 23, 32, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  transition: background .3s var(--ep-ease), box-shadow .3s var(--ep-ease);
}

.header-area.stick,
.header-area.sticky {
  background: rgba(14, 23, 32, .96);
  box-shadow: 0 6px 26px rgba(0, 0, 0, .22);
}

/* Logo kept at its true 719x317 aspect instead of being squashed. */
.brand-logo {
  height: 46px;
  display: flex;
  align-items: center;
}

.brand-logo img {
  height: 100%;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin: 0;
}

.navbar-default .navbar-nav > li > a {
  color: rgba(255, 255, 255, .85);
  font-family: 'Raleway', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 10px 15px;
  border-radius: 8px;
  transition: color .2s var(--ep-ease), background .2s var(--ep-ease);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .10);
}

/* Sign Up reads as the primary action in the bar. */
.navbar-default .navbar-nav > li > a[href*="register"] {
  background: var(--ep-brand);
  color: #fff;
  margin: 8px 0 8px 8px;
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 182, 240, .3);
}

.navbar-default .navbar-nav > li > a[href*="register"]:hover {
  background: var(--ep-brand-dark);
  color: #fff;
}

.navbar-toggle .icon-bar { background: #fff; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.slider-content .ready-btn,
.btn-video,
.subscribe .btn,
.contact-form button[type="submit"],
.pri_table_list button > a {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 999px;
  transition: transform .2s var(--ep-ease), box-shadow .2s var(--ep-ease),
              background .2s var(--ep-ease), color .2s var(--ep-ease);
}

.slider-content .ready-btn {
  background: var(--ep-brand);
  border: 2px solid var(--ep-brand);
  color: #fff;
  padding: 13px 34px;
  box-shadow: 0 10px 26px rgba(0, 182, 240, .32);
}

.slider-content .ready-btn:hover {
  background: var(--ep-brand-dark);
  border-color: var(--ep-brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 182, 240, .42);
}

/* Secondary hero button (the second .ready-btn in the pair). */
.slider-content .ready-btn + .ready-btn,
.slider-content .ready-btn.btn-ghost {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .65);
  box-shadow: none;
}

.slider-content .ready-btn + .ready-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ep-ink);
}

.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 30px;
  background: var(--ep-brand);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 10px 26px rgba(0, 182, 240, .28);
}

.btn-video:hover,
.btn-video:focus {
  background: var(--ep-brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 182, 240, .38);
}

.btn-video i { font-size: 19px; }

/* Hero CTA pair */
.slider-content .ready-btn {
  display: inline-block;
  margin: 6px 7px 0;
  text-transform: uppercase;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   5. "Why invest" intro + skills grid
   -------------------------------------------------------------------------- */

.why-invest-intro {
  padding: 90px 0 50px;
  background: var(--ep-surface);
  text-align: center;
}

.why-invest-lead {
  max-width: 720px;
  margin: -20px auto 32px;
  font-size: 17px;
  color: var(--ep-body);
}

.our-skill-area { position: relative; }

.our-skill-area .skill-bg { padding: 80px 0; }

/* The photographic background needs a real scrim for text to be legible. */
.our-skill-area .test-overly {
  background: linear-gradient(180deg, rgba(10, 18, 26, .92), rgba(10, 18, 26, .86));
}

.skill-grid .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.skill-grid [class*="col-"] { display: flex; margin-bottom: 26px; }

.skill-grid .single-skill {
  flex: 1;
  padding: 30px 26px;
  border-radius: var(--ep-radius);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: left;
  transition: transform .25s var(--ep-ease), background .25s var(--ep-ease),
              border-color .25s var(--ep-ease);
}

.skill-grid .single-skill:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .085);
  border-color: rgba(0, 182, 240, .45);
}

/* Was pure blue on near-black — unreadable. */
.skill-grid .single-skill h3 {
  color: var(--ep-brand);
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.35;
}

.skill-grid .single-skill .progress-h4 {
  color: rgba(255, 255, 255, .78);
  font-size: 14.5px;
  line-height: 1.75;
  margin: 0 0 10px;
  text-align: left;
}

.skill-grid .single-skill .progress-h4:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Services
   -------------------------------------------------------------------------- */

#services { background: var(--ep-surface-alt); }

#services .row { display: flex; flex-wrap: wrap; align-items: center; }

#services .row + .row { margin-top: 60px; }

#services .well-left .single-well,
#services .well-middle { width: 100%; }

#services .single-well img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--ep-radius);
  box-shadow: var(--ep-shadow);
  transition: transform .35s var(--ep-ease), box-shadow .35s var(--ep-ease);
}

#services .single-well a:hover img {
  transform: translateY(-4px);
  box-shadow: var(--ep-shadow-lg);
}

#services .sec-head {
  font-size: 24px;
  font-weight: 700;
  color: var(--ep-ink);
  margin: 0 0 16px;
  text-transform: none;
  letter-spacing: -0.01em;
}

#services .sec-head::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--ep-brand), var(--ep-accent));
}

.service-lead {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ep-body);
  margin-bottom: 20px;
  text-align: left;      /* replaces the justified text and its rivers */
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* .single-well ul li in the theme sets `padding: 5px 0` and outranks a
   single-class selector, so match its specificity here. */
.single-well ul.service-list li,
.service-list li {
  position: relative;
  display: block;
  padding: 7px 0 7px 30px;
  font-size: 15.5px;
  color: var(--ep-ink);
  text-align: left;
}

.single-well ul.service-list li::before,
.service-list li::before {
  content: "\f058";                     /* fa-check-circle */
  font-family: FontAwesome;
  position: absolute;
  left: 0;
  top: 7px;
  color: var(--ep-brand);
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   7. Counters
   -------------------------------------------------------------------------- */

.wellcome-area .single-well h4,
.suscribe-area h4 { color: #fff; }

/* --------------------------------------------------------------------------
   8. FAQ accordion
   -------------------------------------------------------------------------- */

.faq-area .panel-default {
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius-sm) !important;
  margin-bottom: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: border-color .2s var(--ep-ease), box-shadow .2s var(--ep-ease);
}

.faq-area .panel-default:hover {
  border-color: rgba(0, 182, 240, .5);
  box-shadow: var(--ep-shadow);
}

.faq-area .panel-heading { background: var(--ep-surface); padding: 0; }

.faq-area .panel-title > a {
  display: block;
  padding: 18px 22px;
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--ep-ink);
  letter-spacing: 0;
}

.faq-area .panel-title > a:hover { color: var(--ep-brand); }

.faq-area .panel-body {
  border-top: 1px solid var(--ep-line);
  padding: 18px 22px;
  font-size: 15.5px;
  color: var(--ep-body);
  background: var(--ep-surface-alt);
}

/* --------------------------------------------------------------------------
   9. Leadership team
   -------------------------------------------------------------------------- */

#team { background: var(--ep-surface); }

#team .team-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -12px;
}

#team .team-top > [class*="col-"] {
  display: flex;
  padding: 0 12px;
  margin-bottom: 26px;
  float: none;
}

#team .single-team-member {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--ep-surface);
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius);
  overflow: hidden;
  box-shadow: var(--ep-shadow);
  transition: transform .25s var(--ep-ease), box-shadow .25s var(--ep-ease);
}

#team .single-team-member:hover {
  transform: translateY(-5px);
  box-shadow: var(--ep-shadow-lg);
}

/* The photo toggles the biography, so it needs to look interactive. */
#team .team-img {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  background: var(--ep-surface-alt);
}

#team .team-img img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s var(--ep-ease);
}

#team .team-img:hover img { transform: scale(1.04); }

#team .team-img::after {
  content: "\f078  View biography";     /* fa-angle-down */
  font-family: FontAwesome, 'Raleway', sans-serif;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9px 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, rgba(14, 23, 32, 0), rgba(14, 23, 32, .88));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ep-ease), transform .25s var(--ep-ease);
}

#team .team-img:hover::after { opacity: 1; transform: translateY(0); }

#team .team-content {
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

#team .team-content h4 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--ep-ink);
  margin: 0 0 6px;
}

#team .team-content > p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ep-muted);
  margin: 0;
}

/* The expandable biography: readable, scrollable, no longer clipped. */
#team .team-content .p1,
#team .team-content .p2,
#team .team-content .p3,
#team .team-content .p4 {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ep-line);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ep-body);
  text-align: left;
  white-space: pre-line;
  max-height: 260px;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   10. Pricing
   -------------------------------------------------------------------------- */

.pricing-area { background: var(--ep-surface-alt); }

/* Equal-height plan cards. Scoped to rows that actually hold plans so the
   heading row keeps its normal block layout (and stays centred). */
.pricing-area .plans-row { display: flex; flex-wrap: wrap; }

.pricing-area .plans-row > [class*="col-"] {
  display: flex;
  margin-bottom: 30px;
  float: none;
}

.pri_table_list {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--ep-surface);
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius);
  overflow: hidden;
  box-shadow: var(--ep-shadow);
  transition: transform .25s var(--ep-ease), box-shadow .25s var(--ep-ease),
              border-color .25s var(--ep-ease);
}

.pri_table_list:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 182, 240, .55);
  box-shadow: var(--ep-shadow-lg);
}

.pri_table_list h3 {
  margin: 0;
  padding: 26px 20px 22px;
  background: linear-gradient(135deg, #0f1c28, #17293a);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  border-bottom: 3px solid var(--ep-brand);
}

.pri_table_list h3 span {
  display: block;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ep-brand);
}

.pri_table_list ol {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
}

.pri_table_list ol li {
  position: relative;
  padding: 13px 22px 13px 46px;
  font-size: 15px;
  color: var(--ep-ink);
  border-bottom: 1px solid var(--ep-line);
  text-align: left;
  background: none;
}

.pri_table_list ol li:last-child { border-bottom: 0; }

.pri_table_list ol li::before,
.pri_table_list ol li.check::before {
  content: "\f00c";                     /* fa-check */
  font-family: FontAwesome;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  font-size: 9px;
  color: #fff;
  background: var(--ep-brand);
}

/* The theme puts a decorative tick on the right; suppress it. */
.pri_table_list ol li::after { display: none; }

.pri_table_list button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  width: 100%;
}

.pri_table_list button > a {
  display: block;
  margin: 18px;
  padding: 14px 20px;
  background: var(--ep-brand);
  color: #fff;
  font-size: 14.5px;
  text-transform: uppercase;
  text-align: center;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0, 182, 240, .26);
}

.pri_table_list button > a:hover {
  background: var(--ep-brand-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 182, 240, .36);
}

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */

/* The theme defines no background for .contact-inner / .contact-overly, so
   this section renders on white. Everything here is therefore dark-on-light. */
.contact-area {
  background: var(--ep-surface-alt);
  padding: 90px 0;
}

.contact-area .contact-overly { display: none; }

.contact-area .section-headline h2 { color: var(--ep-ink); }

/* Detail cards */
.contact-area .contact-inner > .container > .row:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
}

.contact-area .contact-inner > .container > .row:nth-of-type(2) > [class*="col-"] {
  display: flex;
  float: none;
  margin-bottom: 24px;
}

.contact-icon { display: flex; width: 100%; }

.contact-icon .single-icon {
  flex: 1;
  padding: 30px 22px;
  border-radius: var(--ep-radius);
  background: #fff;
  border: 1px solid var(--ep-line);
  box-shadow: var(--ep-shadow);
  transition: transform .25s var(--ep-ease), border-color .25s var(--ep-ease),
              box-shadow .25s var(--ep-ease);
}

.contact-icon .single-icon:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 182, 240, .5);
  box-shadow: var(--ep-shadow-lg);
}

.contact-icon .single-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-size: 22px;
  color: #fff;
  background: var(--ep-brand);
  box-shadow: 0 8px 22px rgba(0, 182, 240, .28);
}

.contact-icon .single-icon p {
  color: #000;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

.contact-icon .single-icon p span {
  display: inline-block;
  margin-top: 6px;
  color: var(--ep-body);
  font-size: 14px;
}

.contact-icon a { color: #000; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.contact-icon a:hover { color: var(--ep-brand); border-bottom-color: var(--ep-brand); }

/* Form card */
.contact-form {
  background: #fff;
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius);
  padding: 32px 30px;
  box-shadow: var(--ep-shadow);
}

.contact-form .form-group { margin-bottom: 20px; }

.contact-form label {
  display: block;
  margin-bottom: 7px;
  font-family: 'Raleway', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #000;
}

.contact-form label .req { color: #d64550; margin-left: 2px; }

.contact-form textarea.form-control { min-height: 150px; resize: vertical; }

.contact-form .form-control,
.contact-form input,
.contact-form textarea {
  height: auto;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--ep-line);
  border-radius: var(--ep-radius-sm);
  background: #fff;
  color: #000;
  font-size: 15px;
  box-shadow: none;
  transition: border-color .2s var(--ep-ease), box-shadow .2s var(--ep-ease);
}

.contact-form .form-control::placeholder { color: #9aa5b1; }

.contact-form .form-control:focus {
  border-color: var(--ep-brand);
  box-shadow: 0 0 0 3px rgba(0, 182, 240, .16);
}

.contact-form input:not(:placeholder-shown):invalid,
.contact-form textarea:not(:placeholder-shown):invalid { border-color: #e2565f; }

.contact-form button[type="submit"] {
  padding: 14px 40px;
  border: 0;
  background: var(--ep-brand);
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  box-shadow: 0 10px 26px rgba(0, 182, 240, .3);
}

.contact-form button[type="submit"]:hover {
  background: var(--ep-brand-dark);
  transform: translateY(-2px);
}

.contact-form #sendmessage,
.contact-form #errormessage { border-radius: var(--ep-radius-sm); }

/* Map */
.contact-area .contact-inner .row { display: flex; flex-wrap: wrap; }
.contact-area .contact-inner .row > [class*="col-"] { float: none; }

.contact-map {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--ep-radius);
  overflow: hidden;
  border: 1px solid var(--ep-line);
  box-shadow: var(--ep-shadow);
  background: #e9eef3;
  line-height: 0;
}

.contact-map iframe { display: block; width: 100%; flex: 1; min-height: 460px; border: 0; }

.map-open {
  position: absolute;
  left: 14px;
  bottom: 74px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: #000;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  box-shadow: var(--ep-shadow);
}

.map-open:hover { background: #fff; color: var(--ep-brand); }

.map-caption {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 13px 16px;
  background: #fff;
  border-top: 1px solid var(--ep-line);
  color: #000;
  font-size: 13.5px;
  line-height: 1.5;
}

.map-caption i { color: var(--ep-brand); margin-top: 3px; }

.map-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  padding: 30px;
  text-align: center;
  line-height: 1.6;
}

.map-empty i { font-size: 34px; color: var(--ep-brand); margin-bottom: 14px; }
.map-empty p { color: #000; font-size: 16px; margin: 0 0 6px; }
.map-empty small { color: var(--ep-body); }

.contact-area iframe { filter: none; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer-area { background: var(--ep-dark); }

.footer-area .footer-head h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 20px;
  padding-bottom: 12px;
  position: relative;
}

.footer-area .footer-head h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--ep-brand);
}

.footer-area p,
.footer-contacts p { color: rgba(255, 255, 255, .68); font-size: 14.5px; }
.footer-contacts p span { color: #fff; font-weight: 600; }

.footer-area a { color: rgba(255, 255, 255, .68); }
.footer-area a:hover { color: var(--ep-brand); }

/* --------------------------------------------------------------------------
   13. Floating widgets — keep them out of the content flow
   -------------------------------------------------------------------------- */

/* Language translator — docked at the top right of the header nav. */
.nav-translate {
  display: flex;
  align-items: center;
}

#google_translate_element {
  margin: 0 0 0 8px;
  line-height: 1;
}

/* Google injects "Select Language / Powered by Google" markup around the
   select; strip it back to just the control. */
#google_translate_element .goog-te-gadget {
  font-size: 0 !important;
  color: transparent !important;
  line-height: 1;
}

#google_translate_element .goog-logo-link,
#google_translate_element .goog-te-gadget > span { display: none !important; }
#google_translate_element .goog-te-gadget .goog-te-combo { margin: 0 !important; }

#google_translate_element select {
  /* Without appearance:none the OS paints its own control and ignores the
     background/border below. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 132px;
  padding: 7px 26px 7px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, .10);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-overflow: ellipsis;
  transition: background-color .2s var(--ep-ease), border-color .2s var(--ep-ease);
}

#google_translate_element select:hover {
  background-color: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .42);
}

#google_translate_element select:focus {
  outline: none;
  border-color: var(--ep-brand);
  box-shadow: 0 0 0 3px rgba(0, 182, 240, .22);
}

/* The dropdown list renders with the OS palette — keep it readable. */
#google_translate_element select option { color: #000; background: #fff; }

/* Sticky header.
   The theme's `.stick .main-menu ul.nav>li>a { padding: 24px 0 }` outranks the
   nav rules below, so on scroll the Sign Up pill lost its horizontal padding
   and became a tall narrow box -- with border-radius:999px that reads as a
   much rounder blob. Match the theme's specificity to hold the shape. */
.stick .main-menu ul.nav > li > a {
  padding: 10px 11px;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
}

.stick .main-menu ul.nav > li > a[href*="register"] {
  padding: 9px 17px;
  margin: 0 0 0 6px;
  border-radius: 999px;
  line-height: 1.2;
  background: var(--ep-brand);
  color: #fff;
}

.stick .main-menu ul.nav > li > a[href*="register"]:hover {
  background: var(--ep-brand-dark);
  color: #fff;
}

/* Keep the active-link underline off the pill. */
.stick .main-menu ul.navbar-nav li.active a[href*="register"]::after,
.navbar-default .navbar-nav > .active > a[href*="register"]::after { display: none; }

/* The nav row keeps its alignment when the header shrinks. */
/* --------------------------------------------------------------------------
   Nav row: single line, never wrapping.

   The theme lays the menu out with `li { display:inline-block; padding:0 13px }`
   and `li a { padding:24px 0; font-size:15px; letter-spacing:1px }`, which at
   ten items overflows the container. Bootstrap 3 then wraps the overflow onto
   a second line that the fixed-height header clips, so trailing links (Eng Doc,
   Spanish doc) disappeared. A flex row with nowrap keeps them all on one line.
   The theme selectors are (0,2,3), so these match that weight and win on order.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .main-menu ul.navbar-nav,
  .stick .main-menu ul.navbar-nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    float: right;
  }

  .main-menu ul.navbar-nav > li,
  .stick .main-menu ul.navbar-nav > li {
    display: flex;
    align-items: center;
    float: none;
    padding: 0;
    white-space: nowrap;
  }

  .main-menu ul.navbar-nav > li > a,
  .stick .main-menu ul.navbar-nav > li > a {
    padding: 10px 10px;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
  }

  .main-menu ul.navbar-nav > li > a[href*="register"],
  .stick .main-menu ul.navbar-nav > li > a[href*="register"] {
    padding: 9px 17px;
    margin: 0 0 0 6px;
    border-radius: 999px;
  }

  /* Narrower desktops: shed a little more width before anything can wrap. */
  @media (max-width: 1199px) {
    .main-menu ul.navbar-nav > li > a,
    .stick .main-menu ul.navbar-nav > li > a { padding: 10px 7px; font-size: 13px; }
    .main-menu ul.navbar-nav > li > a[href*="register"],
    .stick .main-menu ul.navbar-nav > li > a[href*="register"] { padding: 8px 14px; }
    #google_translate_element select { max-width: 104px; font-size: 12px; padding-left: 9px; }
    #google_translate_element { margin-left: 5px; }
    .brand-logo { height: 38px; max-width: 168px; }
    .brand-logo img { max-width: 168px; }
  }
}

/* Below the collapse breakpoint the menu becomes a stacked dropdown, so the
   flex row must not apply. */
@media (max-width: 767px) {
  .main-menu ul.navbar-nav,
  .stick .main-menu ul.navbar-nav {
    display: block;
    float: none;
  }

  .main-menu ul.navbar-nav > li,
  .stick .main-menu ul.navbar-nav > li { display: block; float: none; }

  .main-menu ul.navbar-nav > li > a,
  .stick .main-menu ul.navbar-nav > li > a { padding: 11px 14px; }
}

/* Google's injected top banner shifts the fixed header — neutralise it. */
body { top: 0 !important; }
.skiptranslate iframe { display: none !important; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .section-headline h2 { font-size: 31px; }
  .section-headline { margin-bottom: 40px; }
  #services .row { display: block; }
  #services .row + .row { margin-top: 42px; }
  #services .single-well img { height: 260px; margin-bottom: 22px; }
  .why-invest-intro { padding: 64px 0 36px; }
}

@media (max-width: 767px) {
  body { font-size: 15px; }
  .section-headline h2 { font-size: 26px; }
  .header-area { background: rgba(14, 23, 32, .97); }
  .navbar-default .navbar-nav > li > a { padding: 11px 14px; }
  .navbar-default .navbar-nav > li > a[href*="register"] {
    display: inline-block;
    margin: 8px 14px;
  }
  .brand-logo { height: 38px; }
  .skill-grid .single-skill { padding: 24px 20px; }
  #team .team-top > [class*="col-"] { width: 100%; }
  .pri_table_list h3 { padding: 22px 18px 18px; }
  .nav-translate { padding: 8px 14px; }
  #google_translate_element { margin: 0; }
  #google_translate_element select { max-width: 100%; width: 100%; }
  .contact-icon .single-icon { margin-bottom: 16px; }
  .contact-area .contact-inner .row { display: block; }
  .contact-map, .contact-map iframe { min-height: 320px; }
  .contact-map { margin-bottom: 26px; }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}