/*!------------------------------------------------------------------
[MAIN STYLESHEET]

PROJECT:	Biztrox | Business HTML5 Template
VERSION:	1.0.0
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1. BASE

    1.1. Typography
    1.2. Common Styles
        1.2.1 Page Title
        1.2.1 404 page
    1.3 Button Style

2. NAVIGATION

3. HERO AREA

4. SKILL SECTION

    4.1. fun-facts
    4.2. counter

5. PROGRESS SECTION

    5.1. progressbar title
    5.2. progressbar value

6. MISSION SECTION

    6.1. card header
    6.2. card body

7. PROMO VIDEO SECTION

8. TESTIMONIAL SECTION

    8.1. testimonial slider
    8.2. testimonial content

9. CONTACT

    9.1. Address Item
    9.2. Google Map
    9.3. COntact Form

10. CLIENT LOGO SLIDER

11. FUN-FACTS SECTION

12. CONSULTATION SECTION

    12.1 background image
    12.2 form-control

13. ABOUT SECTION

    13.1 about content
    13.2 about item
    13.3 about content 2
    13.4 about video
    13.5 about content 3
    13.6 about slider
    13.7 philosophy
    13.8 ceo

        13.8.1 ceo item
        13.8.1 ceo content
        13.8.1 ceo content-2


14. SERVICE SECTION

    14.1 service item
    14.2 service item 2
    14.3 clients
    14.4 Process
    14.5 service menu
    14.6 service brochure
    14.7 service schedule
    14.8 service consultation
    14.9 service single

        14.9.1 service single image
        14.9.2 service single content
        14.9.3 service single list
        14.9.4 service single benefit
        14.9.5 widget

15. WORK SECTION

    15.1 work slider
    15.2 slick dots

16. CALL TO ACTION

17. TEAM SECTION

    17.1 team item
    17.2 team content
    17.3 team member
    17.4 team single

        17.4.1 team member info item
        17.4.2 team member details

18. PRICING SECTION

    18.1 pricing item

19. PROJECT SECTION

    19.1 project menu
    19.2 project item
    19.3 project single

        19.3.1 project overview
        19.3.2 case study
        19.3.3 project single content

    19.4 nav-tabs
    19.5 tab content

20. FAQ SECTION

21. BLOG SECTION

    21.1 blog item
    21.2 blog content
    21.3 blog content 2
    21.4 blog post

        21.4.1 post slider
        21.4.2 post video
        21.4.3 pagination
        21.4.4 sidebar

    21.5 blog single

        21.5.1 blog single container
        21.5.2 blog single content
        21.5.3 blog single list
        21.5.4 blog single testimonial
        21.5.5 share tags
        21.5.6 comments
        21.5.7 blog-sidebar

22. CONTACT SECTION

    22.1 contact item
    22.2 contact form
    22.3 google map

23. SIGNUP WRAPPER

    23.1 signup greetngs
    23.2 signup form

24. COMMING SOON

    24.1 SYOtimer

25. FOOTER SECTION

    25.1 social link
    25.2 footer link
    25.3 subcription
    25.4 copyright
    25.5 back to top
-------------------------------------------------------------------*/
/* 1.1 typography */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:300,400,500,600,700|Work+Sans:400,500,600");
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

p, .paragraph {
  font-weight: 400;
  color: #666;
  font-size: 14px;
  line-height: 25px;
  font-family: "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: #193e69;
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

h1, .h1 {
  font-size: 60px;
}

@media (max-width: 400px) {
  h1, .h1 {
    font-size: 30px;
  }
}

h2, .h2 {
  font-size: 36px;
}

h3, .h3 {
  font-size: 30px;
}

h4, .h4 {
  font-size: 20px;
}

h5, .h5 {
  font-size: 18px;
}

h6, .h6 {
  font-size: 14px;
}

/* 1.3 Button style */
.btn {
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  text-transform: capitalize;
  padding: 16px 44px;
  border-radius: 35px;
  font-weight: 600;
  border: 0;
  position: relative;
  z-index: 1;
  transition: .2s ease;
}

.btn:focus {
  outline: 0;
  box-shadow: none !important;
}

.btn:active {
  box-shadow: none;
}

.btn-primary {
  background: #e84444;
  color: #fff;
}

.btn-primary:active {
  background: #e84444 !important;
}

.btn-primary:hover {
  background: #ee7171;
}

.btn-secondary {
  background: #003E6B;
  color: #fff;
}

.btn-secondary:active {
  background: #e84444 !important;
}

.btn-secondary:hover {
  background: #e84444 !important;
  background: #ee7171;
}

.btn-light {
  background: #fff;
  color: #222;
  border: 2px solid #fff;
}

.btn-light:hover {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: #222;
  border: 2px solid #303032;
}

.btn-outline:hover {
  background: #003E6B;
  color: #fff;
}

.btn-sm {
  padding: 13px 40px !important;
}

/* 1.2 common style */
body {
  background-color: #fff;
  overflow-x: hidden;
}
sektionfuter {
  background-color: #b0c8db;

}
::-moz-selection {
  background: #ee7171;
  color: #fff;
}

::selection {
  background: #ee7171;
  color: #fff;
}

/* preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

ol,
ul {
  list-style-type: none;
  margin: 0px;
}

img {
  vertical-align: middle;
  border: 0;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a {
  transition: .2s ease;
}

a:hover {
  color: #e84444;
}

a.text-dark:hover,
a.text-white:hover {
  color: #e84444 !important;
}

.text-blue {
  color:#003E6B;
}
.text-beli:hover {
  color: #49e844 !important;
}

a,
button {
  cursor: pointer;
}

.outline-0 {
  outline: 0;
}

.d-unset {
  display: unset !important;
}

.slick-slide {
  outline: 0;
}

.centralized {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.hilighted {
  background: #303032;
  color: #919E4D;
  border-radius: 3px;
  padding: 2px 5px;
}

.section {
  padding: 100px 0;
}

@media (max-width: 575px) {
  .section {
    padding: 80px 0;
  }
}

.section-sm {
  padding: 80px 0;
}

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

.section-title-sm {
  margin-bottom: 10px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #666;
}

.overlay {
  position: relative;
}

.overlay::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: .6;
}

.overlay-dark {
  position: relative;
}

.overlay-dark::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: .8;
}

.overlay-primary {
  position: relative;
}

.overlay-primary::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #e84444;
  opacity: .6;
}

.overlay-white {
  position: relative;
}

.overlay-white::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: #fff;
  opacity: .7;
}

.overlay-rounded::before {
  border-radius: 5px;
}

.section-title-border {
  position: relative;
}

.section-title-border::before {
  position: absolute;
  content: '';
  height: 2px;
  width: 120px;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #e84444;
}

.section-title-border::after {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e84444;
  box-shadow: 0 0 0 5px #fff;
  bottom: -14px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.section-title-border-gray {
  position: relative;
}

.section-title-border-gray::before {
  position: absolute;
  content: '';
  height: 2px;
  width: 120px;
  bottom: -10px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #e84444;
}

.section-title-border-gray::after {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #f5f5f5;
  border: 2px solid #e84444;
  box-shadow: 0 0 0 5px #f5f5f5;
  bottom: -14px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.section-title-border-half {
  position: relative;
}

.section-title-border-half::before {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #e84444;
  bottom: -14px;
  left: 0;
}

.section-title-border-half::after {
  position: absolute;
  content: '';
  height: 2px;
  width: 50px;
  left: 15px;
  bottom: -10px;
  background: #e84444;
}

.section-title-border-half-white {
  position: relative;
}

.section-title-border-half-white::before {
  position: absolute;
  content: '';
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid #fff;
  bottom: -14px;
  left: 0;
}

.section-title-border-half-white::after {
  background: #fff;
  position: absolute;
  content: '';
  height: 2px;
  width: 50px;
  left: 15px;
  bottom: -10px;
}

/* 1.2.1 page title */
.page-title {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 160px 0 100px;
}

/* Hero (page-title) text legibility — readable on any banner image */
.page-title .container { position: relative; z-index: 2; }
.page-title h1 {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.page-title .text-white-70 {
  color: #ffffff !important;
  opacity: 1;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

/* breadcrumb */
.breadcrumb {
  background-color: transparent !important;
  justify-content: center;
}

.breadcrumb li,
.breadcrumb a {
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 12px;
  margin: 0 10px;
}

.breadcrumb a {
  position: relative;
}

.breadcrumb a::before {
  position: absolute;
  content: '/';
  right: -17px;
  top: 2px;
  height: 12px;
}

/* 1.2.2 404 page start */
.page-404 {
  padding: 600px 0 60px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.page1-404 {
  padding: 900px 0 90px;
  background-position: top center;

  background-repeat: no-repeat;
}
@media (max-width: 767px) {
  .page-404 {
    padding: 450px 0 50px;
  }
}

@media (max-width: 575px) {
  .page-404 {
    padding-top: 250px;
  }
}

@media (max-width: 400px) {
  .page-404 {
    padding-top: 150px;
  }
}

.page-404 h1 {
  font-size: 40px;
}

/* 404 page end */
/* play-icon */
.play-icon {
  width: 85px;
  height: 85px;
  border: 3px solid #fff;
  border-radius: 50%;
  display: block;
  text-align: center;
}

.play-icon:focus {
  outline: 0;
}

.play-icon i {
  line-height: 79px;
  display: block;
  font-size: 30px;
  color: #fff;
}

/* round icon */
.round-icon {
  height: 70px;
  min-width: 70px;
  max-width: 70px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #fff;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
  color: #e84444;
  display: inline-block;
}

/* 18. squre icon */
.square-icon {
  height: 65px;
  width: 65px;
  background: #e84444;
  color: #fff;
  font-size: 35px;
  line-height: 65px;
  border-radius: 5px;
  text-align: center;
  display: inline-block;
}

/* team social icon */
.social-icon-lg {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 25px;
  display: inline-block;
}

.social-icon-lg i {
  margin: 0;
  color: #fff;
}

.box-shadow {
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
}

.golden {
  color: #efaf27 !important;
}

.bg-gray {
  background-color: #f5f5f5;
}

.bg-primary {
  background-color: #003E6B !important;
}

.bg-secondary {
  background-color: #003E6B !important;
}

.bg-secondary_1 {
  background-color: #ffffff !important;
}
.text-primary {
  color: #e84444 !important;
}

.bg-facebook {
  background-color: #003E6B;
}

.bg-twitter {
  background-color: #003E6B;
}

.bg-linkedin {
  background-color: #003E6B;
}

.bg-google {
  background-color: #e62211;
}

.text-color {
  color: #003E6B;
}

.text-dark {
  color: #222;
}
.text-belo {
  color: #faf7f7;
}
.text-underline {
  text-decoration: underline;
}

.text-underline:hover {
  text-decoration: underline;
}

.font-primary {
  font-family: "Poppins", sans-serif;
}

.font-secondary {
  font-family: "Open Sans", sans-serif;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

@media (max-width: 991px) {
  .mb-md-50 {
    margin-bottom: 50px;
  }
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.py-10 {
  padding: 10px 0;
}

.py-50 {
  padding: 50px 0;
}

.py-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.py-160 {
  padding: 160px 0;
}

.ml-65 {
  margin-left: 65px;
}

.pb-xl-200-lg-100 {
  padding-bottom: 200px;
}

@media (max-width: 1199px) {
  .pb-xl-200-lg-100 {
    padding-bottom: 100px;
  }
}

.mb-xl-150-lg-100 {
  margin-bottom: 150px;
}

@media (max-width: 1199px) {
  .mb-xl-150-lg-100 {
    margin-bottom: 100px;
  }
}

.translateY-25 {
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}

.translateY-10 {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.translateY-33 {
  -webkit-transform: translateY(-33px);
          transform: translateY(-33px);
}

/* 2. Navigation */
.top-header {
  background: #003E6B;
}

@media (max-width: 575px) {
  .top-header ul {
    text-align: center;
  }
}

.top-header ul li {
  margin: 15px 0;
}

@media (max-width: 575px) {
  .top-header ul li {
    margin: 10px 0;
  }
}

.top-header ul li a {
  display: inline-block;
  padding: 0 20px;
  border-right: 1px solid #e5e5e5;
  color: #ffffff;
}

@media (max-width: 575px) {
  .top-header ul li a {
    border: 0;
  }
}

.top-header ul li a span {
  color: #d40a0a;   /*broj telefona*/
}

.top-header ul li:last-child a {
  padding-right: 0;
  border-right: 0;
}

.navigation .navbar {
  padding: 0;
  background: #fff !important;
  position: relative;
}

/* Reserve horizontal space on desktop so the absolute-positioned logo
   does not overlap the first nav item. Logo is 220px wide + 20px gap. */
@media (min-width: 992px) {
  .navigation .navbar {
    padding-left: 240px;
  }
}

.navigation .navbar-brand {
  position: absolute;
  left: 0;
  top: -52px;
  width: 220px; 
  height: 170px; 
  background: #fff;
  text-align: center;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
  z-index: 9;
}

@media (max-width: 991px) {
  .navigation .navbar-brand {
    position: relative;
    height: unset;
    width: unset;
    box-shadow: none;
    top: 24px;
    background: none;
  }
  .navigation .navbar-brand img {
    height: 50px;
    width: auto;
  }
}

.navigation .navbar-brand img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* Neutral download_area header: keep the white nav bar height even without menu links */
@media (min-width: 992px) {
  .navigation .navbar.nav-neutral { min-height: 107px; }
}

.navigation .navbar .nav-item {
  padding: 28px 0;
}

@media (max-width: 991px) {
  .navigation .navbar .nav-item {
    padding: 0;
  }
}

.navigation .navbar .nav-item .nav-link {
  padding: 15px 10px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #222;
  text-transform: uppercase;
  transition: .2s ease;
  font-size: 14px;
}

@media (max-width: 1199px) {
  .navigation .navbar .nav-item .nav-link {
    font-size: 12px;
    padding: 15px 6px;
  }
}

@media (max-width: 991px) {
  .navigation .navbar .nav-item .nav-link {
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
  }
}

.navigation .navbar .nav-item .nav-link:hover {
  color: #e84444;
}

.navigation .navbar .nav-item.nav-button {
  padding: 28px 0 28px 30px;
}

@media (max-width: 991px) {
  .navigation .navbar .nav-item.nav-button {
    padding: 0;
    margin-bottom: 20px;
  }
}

.navigation .navbar .nav-item.nav-button .nav-link {
  color: #fff;
}

.navigation .navbar .nav-item.nav-button .nav-link.pgactive {
  color: #e84444;
}

.navigation .navbar .nav-item.active .nav-link {
  color: #e84444;
}

.navigation .navbar .dropdown:hover .dropdown-menu {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

.navigation .navbar .dropdown-menu {
  box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
  padding: 40px 30px;
  border: 0;
  border-radius: 0;
  top: 80%;
  left: -20px;
  display: block;
  visibility: hidden;
  transition: .3s ease;
  opacity: 0;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  -webkit-transform-origin: top;
          transform-origin: top;
}

@media (max-width: 991px) {
  .navigation .navbar .dropdown-menu {
    display: none;
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: unset;
            transform-origin: unset;
  }
}

.navigation .navbar .dropdown-menu.show {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}

@media (max-width: 991px) {
  .navigation .navbar .dropdown-menu.show {
    display: block;
  }
}

.navigation .navbar .dropdown-item {
  position: relative;
  color: #848484;
  transition: .2s ease;
}

.navigation .navbar .dropdown-item:not(:last-child) {
  margin-bottom: 20px;
}

.navigation .navbar .dropdown-item:hover {
  color: #e84444;
  text-decoration: underline;
  background: transparent;
}

.navigation .navbar .dropdown-item::before {
  position: absolute;
  content: '';
  left: 5px;
  top: 12px;
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: #848484;
  border: 1px solid #fff;
  display: inline-block;
  box-shadow: 0 0 0 2px #848484;
}

@media (max-width: 991px) {
  .navigation .navbar .dropdown-item {
    text-align: center;
  }
  .navigation .navbar .dropdown-item::before {
    display: none;
  }
}

/* 2.3. Search Form */
.search-form {
  padding: 230px 0;
  background: #303032;
  position: absolute;
  width: 100%;
  top: -800px;
  z-index: 10;
  transition: .3s ease-in;
}

.search-form .close {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #fff;
}

.search-form .close i {
  transition: .3s ease;
  display: inline-block;
}

.search-form .close:hover i {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.search-form.open {
  top: 0;
}

.search-form .form-control {
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  font-size: 20px;
  transition: .3s ease;
  position: relative;
  color: #fff;
  height: 130px;
  padding: 30px 40px;
}

.search-form h3 {
  font-size: 35px;
  color: #fff;
  margin-bottom: 35px;
}

.search-form .input-wrapper {
  position: relative;
}

.search-form .input-wrapper button {
  background: none;
  border: 0;
  position: absolute;
  font-size: 20px;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  padding: 20px;
}

.search-form .input-wrapper button i {
  color: #fff;
}

/* 3. hero area */
.hero-slider.slick-slider {
  margin-bottom: 0;
}

.hero-slider [data-animation-in] {
  opacity: 0;
}

.hero-slider-item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  outline: 0;
  /* Fixed equal height for all slides regardless of content length */
  height: 560px;
  display: flex !important;
  align-items: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.hero-slider-item > .container {
  width: 100%;
}
.slick-slide{
  min-height: 560px;
}  /* ubacila klasu slick-slide */

.hero-slider .prevArrow,
.hero-slider .nextArrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 9;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background: rgba(48, 48, 50, 0.5);
  color: #fff;
  border: 0;
  font-size: 25px;
  line-height: 70px;
  opacity: 0;
  transition: all linear .2s;
}
.hero-content{
text-align:center;
justify-content: center;
}  /* ubacila klasu hero-content */

@media (max-width: 575px) {
  .hero-slider .prevArrow,
  .hero-slider .nextArrow {
    display: none;
  }
}

.hero-slider .prevArrow:focus,
.hero-slider .nextArrow:focus {
  outline: 0;
}

.hero-slider .prevArrow:hover,
.hero-slider .nextArrow:hover {
  background: rgba(232, 68, 68, 0.5);
}

.hero-slider .prevArrow {
  left: 20px;
}

.hero-slider .nextArrow {
  right: 20px;
}

.hero-slider:hover .prevArrow,
.hero-slider:hover .nextArrow {
  opacity: 1;
}

.hero-slider .slick-dots {
  bottom: -81px;
  padding-left: 0;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.hero-slider .slick-dots li {
  width: 295px;
  height: 80px;
  background: #fff;
  margin: 0;
  display: inline-block;
  position: relative;
  /* @include mobile-xs {
                    width: 50px;
                } */
}

@media (max-width: 1199px) {
  .hero-slider .slick-dots li {
    width: 230px;
  }
}


@media (max-width: 767px) {
  
  .hero-slider .slick-dots li {
    width: 120px;
  }
}

@media (max-width: 575px) {
  .hero-slider .slick-dots li {
    width: 25%;
  }
}

.hero-slider .slick-dots li::before {
  position: absolute;
  content: '';
  left: 50%;
  top: -12px;
  height: 25px;
  width: 25px;
  background: #003E6B;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
  opacity: 0;
}

.hero-slider .slick-dots li a {
  display: block;
  position: relative;
  text-align: center;
  transition: .3s ease;
  color: #003E6B;
}

.hero-slider .slick-dots li a i {
  display: inline-block;
  font-size: 30px;
  line-height: 80px;
  margin-right: 15px;
  vertical-align: middle;
}

@media (max-width: 991px) {
  .hero-slider .slick-dots li a i {
    font-size: 20px;
    margin-right: 5px;
  }
}

@media (max-width: 767px) {
  .hero-slider .slick-dots li a i {
    margin: 0;
  }
}

.hero-slider .slick-dots li a span {
  font-size: 18px;
  font-weight: 500;
  line-height: 80px;
}

@media (max-width: 991px) {
  .hero-slider .slick-dots li a span {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .hero-slider .slick-dots li a span {
    display: none;
  }
}

.hero-slider .slick-dots li.slick-active {
  background: #003E6B;
}

.hero-slider .slick-dots li.slick-active a {
  color: #fff;
}

.hero-slider .slick-dots li.slick-active::before {
  opacity: 1;
}

/* ============================================================ */
/* Relocated hero dots (#hero-slider-dots) — positioned below   */
/* piktograms and above "Sektori koje opslužujemo" title.       */
/* All `.hero-slider .slick-dots` rules above apply via id-     */
/* targeted overrides below because slick's appendDots places   */
/* the .slick-dots <ul> inside #hero-slider-dots outside the    */
/* .hero-slider container.                                       */
/* ============================================================ */
#hero-slider-dots .slick-dots {
  bottom: auto;
  position: relative;
  padding-left: 0;
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
  margin: 0 0 1rem 0;
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

#hero-slider-dots .slick-dots li {
  flex: 1 1 0;
  max-width: 25%;
  height: 70px;
  background: #fff;
  margin: 0;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

@media (max-width: 767px) {
  #hero-slider-dots .slick-dots li {
    height: 60px;
  }
}

#hero-slider-dots .slick-dots li::before {
  position: absolute;
  content: '';
  left: 50%;
  top: -12px;
  height: 25px;
  width: 25px;
  background: #003E6B;
  transform: translateX(-50%) rotate(45deg);
  opacity: 0;
  z-index: -1;
}

#hero-slider-dots .slick-dots li a {
  display: block;
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 28px;
  color: #003E6B;
  font-weight: 600;
  text-decoration: none;
}

#hero-slider-dots .slick-dots li a i {
  display: block;
}

#hero-slider-dots .slick-dots li a span {
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

@media (max-width: 1199px) {
  #hero-slider-dots .slick-dots li a span {
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  #hero-slider-dots .slick-dots li a span {
    font-size: 0.75rem;
  }
}

#hero-slider-dots .slick-dots li.slick-active {
  background: #003E6B;
}

#hero-slider-dots .slick-dots li.slick-active a {
  color: #fff;
}

#hero-slider-dots .slick-dots li.slick-active::before {
  opacity: 1;
}

.hero-content h4 {
  letter-spacing: 2px;
}

/*--------------------------------------------------------------
	swipwe slider
--------------------------------------------------------------*/
.swiper {
  /* slider dots */
  /* slider arrows */
}

.swiper-slider {
  width: 100%;
  min-height: calc(100vh - 150px);
  display: flex;
  position: relative;
  z-index: 0;
}

.swiper-container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.swiper-slide {
  overflow: hidden;
}

.swiper-slide .slide-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  color: #000;
  opacity: 1;
  background: rgba(232, 68, 68, 0.2);
}

.swiper-pagination-bullet-active {
  color: #fff;
  background: #e84444;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
}

.swiper-button-prev, .swiper-button-next {
  background: transparent;
  width: auto;
  height: auto;
  opacity: 0.3;
  text-align: center;
  transition: all 0.3s;
}

@media (max-width: 767px) {
  .swiper-button-prev, .swiper-button-next {
    display: none;
  }
}

.swiper-button-prev:hover, .swiper-button-next:hover {
  opacity: 1;
}

.swiper-button-prev {
  left: 25px;
}

.swiper-button-prev::before {
  font-family: "themify";
  content: "\e64a";
  font-size: 40px;
  color: #e84444;
}

.swiper-button-next {
  right: 25px;
}

.swiper-button-next::before {
  font-family: "themify";
  content: "\e649";
  font-size: 40px;
  color: #e84444;
}

/* 5. progrgess bar start */
.progressbar-title {
  font-size: 17px;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 7px;
  color: #222 !important;
}

.progress {
  border-radius: 35px;
  overflow: visible;
  margin-bottom: 35px;
  /* 5.2 progressbar value */
}

.progress-bar {
  background-color: #303032;
  border-radius: 35px;
  position: relative;
}

.progress-bar-value {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  color: #fff;
  background: #003E6B;
  padding: 5px 9px;
  position: absolute;
  top: -35px;
  right: -15px;
  border-radius: 5px;
}

.progress-bar-value::before {
  position: absolute;
  content: '';
  bottom: -5px;
  left: 50%;
  background: #003E6B;
  height: 10px;
  width: 10px;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}

/* progrgess bar End */
/* 6. mission section start */
.card-header:first-child {
  border-radius: 3px;
}

/* 7. promo video section start */
.promo-video {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.promo-video p {
  font-family: "Work Sans", sans-serif;
}

/* promo video section end */
/* 8. testimonial section start */
.testimonial-slider {
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.testimonial-slider .prevArrow,
.testimonial-slider .nextArrow {
  position: absolute;
  top: 85px;
  border: 0;
  font-size: 20px;
  background: transparent;
  color: #e84444;
  z-index: 9;
}

.testimonial-slider .prevArrow:focus,
.testimonial-slider .nextArrow:focus {
  outline: 0;
}

.testimonial-slider .prevArrow {
  right: 90px;
}

.testimonial-slider .nextArrow {
  right: 50px;
}

.testimonial-slider .slick-disabled {
  color: #e5e5e5;
}

.testimonial-icon {
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #e84444;
  font-size: 25px;
  line-height: 80px;
  display: inline-block;
  text-align: center;
  margin-bottom: 25px;
}

/* testimonial section end */

/*--------------------------------------------------------------
	9. ponuda
--------------------------------------------------------------*/


.text-beli li{
  color:#fff;
  font-size: 16px;
  font-weight: 800;
  line-height:25px;
  list-style-type:square;
  font-family: "Open Sans", sans-serif;
  
}

.text-beli li:hover{
  color:#322e2e;
}
@media (max-width: 991px) {
  
  .text-beli li {
    list-style-type:none;
    line-height: 25px;
    text-align: center;
  }
  .btn-ponuda{
    margin-top: 25px;
   }
}
@media (max-width: 767px) {
  .text-beli li {
    text-align: left;
    font-size: 16px;
    line-height: 25px;
    text-align: left; 
   }
   .btn-ponuda{
    margin-top: 50px;
    
   }
}
@media (max-width: 575px) {
  .text-beli li {
    list-style-type:none;
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    text-align: left; 
   }
}
/* ponuda end */


/* 10. client logo slider start */
.client-logo-slider .slick-track {
  display: flex;
  align-items: center;
}

/* Fix overflow for long text labels in client logo slider (e.g. "Razvodno postrojenje") */
.client-logo-slider .slick-slide a {
  padding: 0 8px;
  text-align: center;
  box-sizing: border-box;
}

.client-logo-slider .slick-slide a p {
  font-size: 13px;
  line-height: 1.3;
  margin-top: 8px;
  margin-bottom: 0;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 1199px) {
  .client-logo-slider .slick-slide a p {
    font-size: 12px;
  }
}

/* Serbian and German button labels: use sentence case (no Title Case via capitalize) */
html[lang="sr"] .btn,
html[lang="sr"] .text-capitalize,
html[lang="de"] .btn,
html[lang="de"] .text-capitalize {
  text-transform: none !important;
}

/* client logo slider end */
/* 11. fun-facts section start */
.fun-facts {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* fun-facts section end */
/* 12. consultation section start */
.consultation {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* consultation section end */
/* 16. call to action start */
.cta {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* card */
.card-img-wrapper {
  position: relative;
}

.card-img-wrapper::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  background: #003E6B;
  opacity: 0;
  top: 0;
  left: 0;
  transition: .2s;
}

.card-body-2 {
  position: relative;
  transition: .2s ease;
  border-radius: 0 0 5px 5px;
}

.card-body-2::before {
  position: absolute;
  content: '';
  height: 30px;
  width: 30px;
  background: #fff;
  top: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
  transition: .2s ease;
}

.card:hover .card-img-wrapper::before {
  opacity: .4;
}

.card:hover .card-body-2 {
  background: #e84444;
}

.card:hover .card-body-2 h5,
.card:hover .card-body-2 h6,
.card:hover .card-body-2 a {
  color: #fff;
}

.card:hover .card-body-2::before {
  background: #e84444;
}

.overlay-rounded-top::before {
  border-radius: 5px 5px 0 0;
}

/* 13. about section */
.about {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  /* 13.4 about video */
  /* 13.6 about slider */
}

.about-video {
  min-height: 300px;
}

.about-slider {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.about-slider .prevArrow,
.about-slider .nextArrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 9;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  border: 0;
  line-height: 55px;
  text-align: center;
  background: #fff;
  transition: .2s ease;
}

.about-slider .prevArrow:focus,
.about-slider .nextArrow:focus {
  outline: 0;
}

.about-slider .prevArrow:hover,
.about-slider .nextArrow:hover {
  background: #e84444;
  color: #fff;
}

.about-slider .prevArrow {
  left: 25px;
}

.about-slider .nextArrow {
  right: 25px;
}

/* 13.8 ceo section start */
.ceo-image {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 400px;
}

/* ceo section end */
/* 14.3 clients */
.clients {
  background-position: center right;
  background-size: 50%;
  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .clients {
    background-size: cover !important;
    background-position: center center;
    text-align: center;
  }
}

.clients ul li {
  height: 66px;
}

.clients ul li img {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: inline-block;
}

/* 14.4 process */
.process-item {
  width: 330px;
}

@media (max-width: 1199px) {
  .process-item {
    width: unset;
  }
}

.process-item-number {
  position: absolute;
  left: -35px;
  top: -35px;
  height: 70px;
  width: 70px;
  line-height: 70px;
  border-radius: 50%;
  text-align: center;
  background: #fff;
  box-shadow: -5px 0px 40px 0px rgba(0, 0, 0, 0.1);
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #222;
}

@media (max-width: 1199px) {
  .process-item-number {
    top: -35px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

.process-item h5 {
  margin-bottom: 5px;
  color: #e84444;
}

img.arrow-top {
  position: absolute;
  top: 220px;
  right: 250px;
}

@media (max-width: 1199px) {
  img.arrow-top {
    display: none;
  }
}

img.arrow-bottom {
  position: absolute;
  bottom: 100px;
  left: 250px;
}

@media (max-width: 1199px) {
  img.arrow-bottom {
    display: none;
  }
}

/* service single start */
.service-menu li.active {
  position: relative;
}

.service-menu li.active a {
  background: #003E6B;
  color: #fff !important;
}

.service-menu li.active1 a {
  background: #003E6B;
  color: #fff !important;
}

.service-menu li.active::before {
  position: absolute;
  content: '';
  height: 15px;
  width: 15px;
  background: #003E6B;
  top: 50%;
  right: -7px;
  -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}

@media (max-width: 991px) {
  .service-menu li.active::before {
    display: none;
  }
}

.service-menu li:hover a {
  color: #fff !important;
  background: #003E6B;
}

/* service single end */
/* 15. work section */
.work {
  /* 15.1 work slider */
}

.work-slider {
  /* 15.2 slick dots */
}

.work-slider-image {
  position: relative;
}

.work-slider-image .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  height: 100%;
  width: 100%;
  padding: 15px 25px;
  opacity: 0;
  transition: .2s;
}

.work-slider-image .image-overlay i {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: inline-block;
  font-size: 24px;
  transition: .2s ease;
  padding: 10px;
}

.work-slider-image .image-overlay i:hover {
  font-size: 30px;
}

.work-slider-image .image-overlay a.h4 {
  position: absolute;
  bottom: 50px;
  color: #fff;
  transition: .2s ease;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}

.work-slider-image .image-overlay a.h4:hover {
  color: #e84444;
}

.work-slider-image .image-overlay p {
  position: absolute;
  bottom: 15px;
  color: #fff;
  -webkit-transform: translateY(10px);
          transform: translateY(10px);
  opacity: 0;
  transition: .3s ease;
  transition-delay: .1s;
}

.work-slider-image:hover .image-overlay {
  opacity: 1;
}

.work-slider-image:hover a.h4,
.work-slider-image:hover p {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.work-slider .slick-dots {
  padding-left: 0;
  position: absolute;
  bottom: -60px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.work-slider .slick-dots li {
  margin: 0 14px;
}

@media (max-width: 400px) {
  .work-slider .slick-dots li {
    margin: 0 2px;
  }
}

.work-slider .slick-dots li:first-child {
  margin-left: 0;
}

.work-slider .slick-dots li button {
  height: 10px;
  width: 40px;
  border-radius: 25px;
  color: transparent;
  overflow: hidden;
  border: 0;
  border: 2px solid #e5e5e5;
  background: transparent;
  outline: 0;
  display: block;
}

.work-slider .slick-dots li button::before {
  display: none;
}

@media (max-width: 400px) {
  .work-slider .slick-dots li button {
    width: 10px;
  }
}

.work-slider .slick-dots li.slick-active button {
  border-color: #e84444;
}

/* 19. project section */
.project {
  /* 19.1 project menu */
  /* 19.2 project item */
}

.project-menu ul li {
  padding: 5px 20px;
  border-radius: 35px;
  color: #003E6B;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  background: #f5f5f5;
  margin: 0 10px 25px;
}

.project-menu ul li.active {
  background: #e84444;
  color: #fff;
}

.project-info {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: .2s ease;
}

.project-info a {
  color: #fff;
  position: absolute;
  left: 30px;
  bottom: 40px;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
}

.project-info a:hover {
  color: #e84444;
}

.project-info p {
  position: absolute;
  left: 25px;
  bottom: 0;
  color: #fff;
  transition: .2s ease;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  transition-delay: .1s;
}

.project-info p i {
  margin-right: 5px;
}

.project-info:hover {
  opacity: 1;
}

.project-info:hover a {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}

.project-info:hover p {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: .7;
}

/* 19.3 project single page start */
/* 19.4 nav tabs */
.nav-tabs {
  border: 0;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .nav-tabs {
    justify-content: center;
  }
}

.nav-tabs .nav-item:not(:last-child) {
  margin-right: 10px;
}

@media (max-width: 575px) {
  .nav-tabs .nav-item {
    margin-bottom: 10px;
  }
}

.nav-tabs .nav-item .nav-link {
  padding: 10px 30px;
  border: 1px solid #e5e5e5;
  background: #f5f5f5;
  border-radius: 45px;
  text-align: center;
  vertical-align: middle;
  color: #222;
  transition: .2s ease;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

.nav-tabs .nav-item .active {
  background: #fff;
  color: #e84444;
  border-color: #e84444;
}

/* 19.5 tab content */
.tab-content {
  padding: 40px;
  margin-bottom: 60px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #e5e5e5;
}

.tab-content-item {
  margin-left: 20px;
}

.tab-content-item:not(:last-child) {
  margin-bottom: 45px;
}

.tab-content-item h6 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #222;
  margin-bottom: 25px;
  position: relative;
}

.tab-content-item h6::before {
  position: absolute;
  content: "\e65d";
  font-family: "themify";
  top: 0;
  left: -20px;
  color: #e84444;
}

.tab-content-item p {
  margin-bottom: 0;
}

/* project single page end */
/* 21.4.3 pagination */
.pagination .page-item .page-link {
  background: transparent;
  border: none;
  color: #000;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  transition: .3s ease;
}

.pagination .page-item .page-link:hover {
  color: #e84444;
}

.pagination .page-item.active .page-link {
  color: #e84444;
}

.pagination .prev,
.pagination .next {
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  padding: 5px 10px;
  transition: .3s ease;
}

.pagination .prev:hover,
.pagination .next:hover {
  border-color: #e84444;
}

.pagination .prev:hover .page-link,
.pagination .next:hover .page-link {
  color: #e84444;
}

.pagination .prev {
  margin-right: 30px;
}

.pagination .next {
  margin-left: 30px;
}

/* 21.4.1 post slider */
.post-slider {
  position: relative;
}

.post-slider .prevArrow,
.post-slider .nextArrow {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  top: 50%;
  border: 0;
  font-size: 20px;
  background: transparent;
  color: #e84444;
  z-index: 9;
  background: rgba(255, 255, 255, 0.8);
  transition: .3s ease;
}

.post-slider .prevArrow:focus,
.post-slider .nextArrow:focus {
  outline: 0;
}

.post-slider .prevArrow:hover,
.post-slider .nextArrow:hover {
  background: rgba(232, 68, 68, 0.25);
}

.post-slider .prevArrow {
  left: 40px;
}

.post-slider .nextArrow {
  right: 40px;
}

.post-slider .slick-disabled {
  color: #e5e5e5;
}

/* 21.4.4 sidebar */
.search-wrapper {
  position: relative;
}

.search-wrapper input {
  background: #f5f5f5;
  border-radius: 30px;
  font-weight: 400;
  height: 40px;
  line-height: 40px;
  padding: 0 25px;
  font-size: 13px;
}

.search-wrapper::before {
  content: "\e610";
  font-family: "themify";
  position: absolute;
  top: 50%;
  right: 20px;
  color: #666;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

ul.tag-list li {
  margin-bottom: 7px;
}

ul.tag-list li a {
  color: #666;
  padding: 10px 15px;
  display: block;
  border: 1px solid #e5e5e5;
  border-radius: 30px;
  font-size: 13px;
  transition: .3s ease;
}

ul.tag-list li a:hover {
  background: #e84444;
  border-color: #e84444;
  color: #fff;
}

.newsletter .form-control {
  font-weight: 400;
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  border-radius: 30px;
  font-size: 13px;
}

/* 21.5 blog single start */
/* share icon */
.share-icon {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  display: inline-block;
}

.share-icon i {
  color: #fff;
}

/* 21.5.7 blog sidebar */
.sidebar-box-shadow {
  box-shadow: -3px 0px 3px 0px rgba(0, 0, 0, 0.06);
}

/* blog single end */
/* 22. contact section */
.form-control {
  border-radius: 5px;
  padding: 0 15px 2px;
  height: 40px;
  margin-bottom: 15px;
  border: 1px solid #e5e5e5;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #666;
}

.form-control:focus {
  border-color: #e84444;
  box-shadow: none !important;
}

.form-control::-webkit-input-placeholder {
  color: #666;
}

.form-control::-moz-placeholder {
  color: #666;
}

.form-control::-ms-input-placeholder {
  color: #666;
}

.form-control::placeholder {
  color: #666;
}

/* 22.3 google map */
.map {
  position: relative;
}

.map #map_canvas {
  height: 450px;
}

/* 23.1 signup greetings */
.signup {
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.1);
  /* 23.2 signup form */
}

.signup-greeting {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 70px 0 140px;
  text-align: center;
}

@media (max-width: 1199px) {
  .signup-greeting {
    padding-bottom: 80px;
  }
}

@media (max-width: 767px) {
  .signup-greeting {
    padding-top: 200px;
  }
}

@media (max-width: 575px) {
  .signup-greeting {
    padding-top: 400px;
  }
}

.signup-greeting img {
  margin-bottom: 50px;
  position: relative;
  z-index: 9;
}

.signup-greeting h4 {
  color: #fff;
  margin-bottom: 20px;
  position: relative;
  z-index: 9;
}

.signup-greeting p {
  color: #fff;
  position: relative;
  z-index: 9;
  margin: 0 40px;
}

.signup-form {
  padding: 50px 50px 50px 35px;
}

@media (max-width: 1199px) {
  .signup-form {
    padding: 50px 15px 50px 0;
  }
}

@media (max-width: 767px) {
  .signup-form {
    padding: 50px;
  }
}

@media (max-width: 575px) {
  .signup-form {
    text-align: center;
  }
}

.signup-form h4 {
  float: left;
  font-size: 26px;
  margin-bottom: 35px;
}

@media (max-width: 575px) {
  .signup-form h4 {
    float: unset;
  }
}

.signup-form a {
  color: #e84444;
}

.signup-form .btn {
  margin-top: 30px;
}

.signup-form p.signup-with {
  display: inline-block;
  margin-top: 42px;
}

.signup-form ul {
  margin-top: 37px;
  display: inline-block;
}

.signup-form ul li a {
  height: 30px;
  width: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}

/* 24. comming soon */
.comming-soon {
  height: 100vh;
  background-size: cover;
  display: flex;
  align-items: center;
}

.comming-soon h1 {
  font-size: 50px;
  font-weight: 600;
}

@media (max-width: 575px) {
  .comming-soon h1 {
    font-size: 30px;
  }
}

.comming-soon .form-control {
  height: 45px;
  border-radius: 45px;
  position: relative;
  background: transparent;
  border: 1px solid #e5e5e5;
  color: #fff;
  margin-bottom: 40px;
}

.comming-soon .form-control::-webkit-input-placeholder {
  color: #666;
}

.comming-soon .form-control::-moz-placeholder {
  color: #666;
}

.comming-soon .form-control::-ms-input-placeholder {
  color: #666;
}

.comming-soon .form-control::placeholder {
  color: #666;
}

.comming-soon .btn-email {
  position: absolute;
  top: 0;
  right: 15px;
  background: #fff;
  border: 0;
  color: #e84444;
  border-radius: 45px;
  height: 45px;
  padding: 0 50px;
}

@media (max-width: 575px) {
  .comming-soon .btn-email {
    padding: 0 10px;
  }
}

.comming-soon i {
  color: #5c5c5c;
  margin: 0 15px;
  transition: .2s ease;
  font-size: 24px;
}

.comming-soon i:hover {
  color: #e84444;
}

/* 24.1 syotimer */
.syotimer {
  text-align: center;
  margin: 0 auto 40px;
}

.syotimer-cell:last-child .syotimer-cell__value::before {
  opacity: 0;
}

.syotimer-cell {
  display: inline-block;
  margin: 0 25px;
}

@media (max-width: 1199px) {
  .syotimer-cell {
    margin: 0 20px;
  }
}

@media (max-width: 575px) {
  .syotimer-cell {
    margin: 0 10px;
  }
}

@media (max-width: 400px) {
  .syotimer-cell {
    margin: 0 5px;
  }
}

.syotimer-cell__value {
  font-size: 60px;
  font-weight: 600;
  color: #fff;
  position: relative;
}

@media (max-width: 1199px) {
  .syotimer-cell__value {
    font-size: 50px;
  }
}

@media (max-width: 575px) {
  .syotimer-cell__value {
    font-size: 30px;
  }
}

@media (max-width: 400px) {
  .syotimer-cell__value {
    font-size: 24px;
  }
}

.syotimer-cell__value::before {
  position: absolute;
  content: ':';
  height: 30px;
  color: #fff;
  right: -30px;
  top: 0;
}

@media (max-width: 575px) {
  .syotimer-cell__value::before {
    right: -20px;
  }
}

@media (max-width: 400px) {
  .syotimer-cell__value::before {
    right: -12px;
  }
}

.syotimer-cell__unit {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
}

/* 25.1 social link */
.social-icon-outline {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #fff;
  text-align: center;
  transition: .2s ease;
  display: inline-block;
}

.social-icon-outline i {
  line-height: 40px;
  color: #fff;
  font-size: 14px;
}

.social-icon-outline:hover {
  border-color: #e84444;
}

/* 25.2 footer link */
.footer-links {
  padding-left: 18px;
}

.footer-links li {
  margin-bottom: 20px;
  position: relative;
}

.footer-links li::before {
  position: absolute;
  font-family: "themify";
  content: "\e649";
  top: 0;
  left: -20px;
  height: 12px;
  width: auto;
  color: #fff;
}

.footer-links li a {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  transition: .2s ease;
  display: block;
}

.footer-links li a:hover {
  text-decoration: underline;
  color: #e84444;
}

/* 25.3 subcription */
.form-control.subscribe {
  width: 100%;
  border-radius: 35px;
  border: 0;
  padding: 0 20px !important;
  height: 50px;
}

/* subscribe button */
.btn-subscribe {
  position: absolute;
  right: 5px;
  top: 5px;
  border: 0;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: #fff;
  background: #e84444;
  transition: all linear .2s;
}

.btn-subscribe:hover {
  padding-left: 15px;
}

.btn-subscribe:focus {
  outline: 0;
}

/* back to top button */
.back-to-top {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  color: #fff;
  background: #003E6B;
  top: -25px;
  right: 10px;
  border: 1px solid #454547;
  text-align: center;
  display: block;
  transition: .2s ease;
}

.back-to-top i {
  line-height: 50px;
}

.back-to-top:hover {
  border-color: #e84444;
}

.back-to-top:focus {
  outline: 0;
}

/*# sourceMappingURL=maps/style.css.map */


/* Symap-Compact+ page */
.section-title-devices-sm {
color:#003E6B;

}

ul.text-ebs{
  color:#003E6B;
 font-size: 12px;
 list-style-type: square;
}
ul.red-color-goose{
  color:#e84444;
}
.text-small {
  font-size:10px;
  list-style-type: none;
}
.slick-slide{
  min-height:0 !important;
}

p.blue-color{
  color:#003E6B;
  
}
div.hover-bg:hover{
background-color:#d3cdcd;
border:none;
 
}
.card-height {
border:none;
min-height:680px;
}
.application-size{
font-size:12px;
font-weight: bold;
text-align:left;
margin-left:20px;
}
.bg-application-blog{
  background-color:#7f8d97 ;
  
}
.car{
  position:relative;
}
.assets-car{
  height:600px;
  width:600px;
  position:absolute;
  left:-10%;
  top:10px;
   
}
.assets-car model-viewer{
  height:600px;
  width:600px;
  position:absolute;
  top:0;
  left:0;
  border:none;
}
.content {
  height:300px;
  width:550px;
  position: absolute;
  left: 5%;
  top: calc(50% + 550px);
}

.project-menu ul li:hover{
  background-color: red;
  color:#fff;
}
.project-menu ul li{
  color:#003E6B;
}
.project-info a{
  bottom:80px;
}
i.icon-color{
  
  color:red;
  font-weight:bold;
}

.form-check {
  padding-left:2em !important;
}
.border-style {
  border-bottom-style: solid;
  border-color: red;
  padding: 5px;
}
.border-row {
  border-bottom: 1px solid #003E6B;
}


input[type="checkbox"]:checked  {
  accent-color: #003E6B !important; 
}
.footer-links-color{
color:#003E6B;
}

.navigation .navbar .nav-item .nav-link {
  color: #003E6B; 
}
.navigation .navbar .dropdown-item {
  color: #003E6B; 
}
.navigation .navbar .dropdown-item::before {
  position: absolute;
  content: '';
  left: 5px;
  top: 12px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #dc3545;
 
  display: inline-block;
  
}
.navigation .navbar .dropdown-item:not(:last-child) {
  margin-bottom: 5px;
}
.bg-contact{
  background: #ffff;
  padding:30px 20px;
}

::placeholder {
  color:#003E6B !important;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: #003E6B !important;
}
.container_siva{
  background: #bebdbd;

}
.dropdown_div {
  position: relative;
  display: inline-block;
}

.dropdown_button {
  background-color: #003E6B; /* button background colour */
  color: #ffffff;
  padding: 14px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown_content {
  display: none; /* remove this to show all links before hovering */
  position: absolute;
  background-color: #f9f9f9; /* dropdown items - background colour */
  width: 100%; /* can remove this if you want to make the menu wider/narrower  */
  /* min-width: 180px; can add this if you need to change the minimu width of menu */
  box-shadow: 0px 6px 14px 0px rgba(0,0,0,0.3);
}

.dropdown_content a {
  font-family:Arial;
  color: #000000;
  padding: 12px 18px;
  text-decoration: none;
  display: block;
}

.dropdown_content a:hover {
  background-color: #9594A1; /* dropdown items hover - change background colour */
}

.dropdown_div:hover .dropdown_content {
  display: block;
}

.dropdown_div:hover .dropdown_button {
  background-color: #003E6B; /* button hover - change background colour */
}

p{
  font-family:Arial;
}

h2{
  font-family:Arial;
}

/* === Language switcher === */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 18px;
    font-size: 13px;
    font-weight: 600;
}
.lang-switcher a {
    color: #193e69;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.2s;
}
.lang-switcher a:hover {
    background: #f0f4f9;
    color: #fc0303;
}
.lang-switcher a.active {
    background: #193e69;
    color: #fff;
}
.lang-switcher a + a {
    margin-left: 2px;
}
@media (max-width: 991px) {
    .lang-switcher {
        margin-left: 0;
        margin-top: 12px;
        padding: 8px 16px;
        border-top: 1px solid #eee;
        width: 100%;
        justify-content: center;
    }
}

/* Override: when lang-switcher lives inside the dark-blue top-header */
.top-header .lang-switcher {
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    width: auto;
    font-size: 12px;
}
.top-header .lang-switcher a {
    color: #ffffff;
    padding: 2px 9px;
    letter-spacing: 0.5px;
}
.top-header .lang-switcher a:hover {
    background: rgba(255,255,255,0.18);
    color: #ffffff;
}
.top-header .lang-switcher a.active {
    background: #ffffff;
    color: #003E6B;
}


/* ───────────────────────────────────────────────────────────
   PREKIDAC DECORATION + Horizontal connectors
   
   Rules:
   - Bela sekcija sa prekidac.svg: ima vertikalnu liniju (crvena gore, plava dole) + prekidač
   - Siva sekcija (bg-gray, section-alt-bg): NEMA vertikalu, ima HORIZONTALU na granici
   - Horizontala se nadovezuje na BOJU vertikale prethodne/sledeće sekcije:
     * Border-top SIVE = PLAVA (povezuje sa donjim plavim delom vertikale gore)
     * Border-bottom SIVE = CRVENA (povezuje sa gornjim crvenim delom vertikale ispod)
   ────────────────────────────────────────────────────────── */

/* Bela sekcija sa prekidacem — vertikala + prekidač */
section[style*="prekidac.svg"] {
  position: relative;
  background-image: none !important;
  background-color: #ffffff;
}

section[style*="prekidac.svg"]::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(50% - 648px);
  width: 4px;
  height: calc(50% - 30px);
  background: #fc0303;
  z-index: 1;
  pointer-events: none;
}

section[style*="prekidac.svg"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: calc(50% - 648px);
  width: 4px;
  height: calc(50% - 30px);
  background: #193e69;
  z-index: 1;
  pointer-events: none;
}

section[style*="prekidac.svg"] > .breaker-symbol {
  position: absolute;
  top: calc(50% - 30px);
  left: calc(50% - 648px - 28px);
  width: 60px;
  height: 60px;
  background-image: url(../images/background/breaker_symbol.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  pointer-events: none;
}

/* SIVA sekcija — bez automatskih borders po default-u */
section.bg-gray,
section.section-alt-bg {
  background-color: #f7f7f3;
}

/* PLAVA horizontala SAMO kada je GRAY ispod PREKIDAC (povezuje se sa donjim plavim delom vertikale) */
section[style*="prekidac.svg"] + section.bg-gray,
section[style*="prekidac.svg"] + section.section-alt-bg {
  border-top: 4px solid #193e69;
}

/* CRVENA horizontala kada je PREKIDAC ispod GRAY (povezuje se sa gornjim crvenim delom vertikale).
   Koristi :has() za "lookahead" — moderni browseri (Chrome 105+, Safari 15.4+, Firefox 121+).
   Ako :has() nije podržan, pravilo se ignoriše ali ostatak sajta i dalje radi. */
section.bg-gray:has(+ section[style*="prekidac.svg"]),
section.section-alt-bg:has(+ section[style*="prekidac.svg"]) {
  border-bottom: 4px solid #fc0303;
}

/* v69: ISTI PRINCIP ZA BREAKER SEKCIJE (slika-pozadina između PREKIDAC sekcija)
   - PREKIDAC ↓ BREAKER  →  BREAKER dobija PLAVU gornju liniju (nastavlja plavi donji deo vertikale gore)
   - BREAKER ↓ PREKIDAC  →  BREAKER dobija CRVENU donju liniju (nastavlja crveni gornji deo vertikale dole)
   :has() ima istu specifičnost kao gornja pravila pa pobeđuje preko .breaker-pure 3px. */
section[style*="prekidac.svg"] + section.section-breaker {
  border-top: 4px solid #193e69;
}
section.section-breaker:has(+ section[style*="prekidac.svg"]) {
  border-bottom: 4px solid #fc0303;
}

/* v71: KONEKTORI ZA OSTALE TIPOVE SEKCIJA ADJACENT TO PREKIDAC
   Sva pravila prate isti princip kao gore — povezuju boju vertikalne linije
   prekidača sa horizontalnom linijom susedne sekcije. */
section[style*="prekidac.svg"] + section.about,
section[style*="prekidac.svg"] + section.promo-video,
section[style*="prekidac.svg"] + section.himap-fleet-cta,
section[style*="prekidac.svg"] + section.team-cta {
  border-top: 4px solid #193e69;
}
section.about:has(+ section[style*="prekidac.svg"]),
section.promo-video:has(+ section[style*="prekidac.svg"]),
section.himap-fleet-cta:has(+ section[style*="prekidac.svg"]),
section.team-cta:has(+ section[style*="prekidac.svg"]) {
  border-bottom: 4px solid #fc0303;
}

/* v177: KONEKTOR ZA "Koji SYMAP za ovu primenu?" AUDIT INFO BOX (section.pt-0)
   Audit info box je bela sekcija sa pt-0 koja sedi između bg-gray sekcije (Tipične primene /
   Preporučeni proizvodi) i prekidac.svg sekcije (Reference). Bez ovog pravila, gornji crveni
   deo vertikale prekidača u Reference visi bez horizontalne spojnice na vrhu.
   Crvena donja linija nadovezuje vrh crvene vertikale ispod. */
section.section.pt-0:has(+ section[style*="prekidac.svg"]) {
  border-bottom: 4px solid #fc0303;
}

/* BELA horizontala UNUTAR footera — odvaja gornji deo (kontakti/linkovi) od donjeg dela (copyright).
   Bela ima manji kontrast od crvene, koristimo 6px za vizuelnu prisutnost. */
footer.bg-secondary .py-100.border-bottom {
  border-bottom: 6px solid #ffffff !important;
}

/* Hide all decoration on mobile/tablet */
@media (max-width: 1200px) {
  section[style*="prekidac.svg"]::before,
  section[style*="prekidac.svg"]::after,
  section[style*="prekidac.svg"] > .breaker-symbol {
    display: none !important;
  }
  section.bg-gray,
  section.section-alt-bg,
  section.section-breaker,
  section.about,
  section.promo-video,
  section.himap-fleet-cta,
  section.team-cta {
    border-top: none !important;
    border-bottom: none !important;
  }
}


/* ───────────────────────────────────────────────────────────
   Piktogram strip — red bottom line (matches stuckegroup.com style)
   ────────────────────────────────────────────────────────── */
section.mt-50 {
  border-bottom: 4px solid #fc0303;
  padding-bottom: 30px;
}


/* ───────────────────────────────────────────────────────────
   Dropdown section headers — uppercase, no bullet
   These are non-clickable section titles (Product pages,
   Order code configurators, Marine & Offshore, etc.) inside
   the navbar dropdown menus. They should look distinctly
   different from the actual link items below them.
   ────────────────────────────────────────────────────────── */
.navigation .navbar .dropdown-item.dropdown-header {
  /* Hide the red bullet (::before) that all dropdown-items have */
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #6c757d !important;
  padding-left: 1rem !important;
  padding-top: 0.85rem;
  padding-bottom: 0.35rem;
  margin-top: 0.25rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 0.5rem !important;
  cursor: default;
  pointer-events: none;
}
.navigation .navbar .dropdown-item.dropdown-header::before {
  /* Hide the red bullet on headers */
  display: none !important;
  content: none !important;
}
.navigation .navbar .dropdown-item.dropdown-header:hover {
  /* No hover effect since these are non-clickable */
  background: transparent;
  color: #6c757d !important;
}
.navigation .navbar .dropdown-item.dropdown-header strong {
  /* The <strong> is just for legacy; keep its weight */
  font-weight: 700;
}
/* The first header in a dropdown shouldn't have top margin */
.navigation .navbar .dropdown-menu .dropdown-item.dropdown-header:first-child {
  margin-top: 0;
  padding-top: 0.5rem;
}


/* ───────────────────────────────────────────────────────────
   How-to-order workflow section — 4 numbered steps
   Used on product description pages and configurator pages
   ────────────────────────────────────────────────────────── */
.how-to-order {
  background: #fafaf7;
  padding: 80px 0;
}
.how-to-order .section-title {
  color: #193e69;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.how-to-order .section-subtitle {
  color: #5F5E5A;
  font-size: 1rem;
  margin-bottom: 3rem;
}
.how-to-order .step-card {
  background: #fff;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 8px;
  border-top: 4px solid #193e69;
  height: 100%;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.how-to-order .step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(25,62,105,0.12);
}
.how-to-order .step-card.step-final {
  border-top-color: #fc0303;
}
.how-to-order .step-num {
  position: absolute;
  top: -18px;
  left: 1.5rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #193e69;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(25,62,105,0.25);
}
.how-to-order .step-final .step-num {
  background: #fc0303;
  box-shadow: 0 2px 6px rgba(252,3,3,0.3);
}
.how-to-order .step-title {
  color: #193e69;
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0.5rem 0 0.5rem;
}
.how-to-order .step-desc {
  color: #5F5E5A;
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0;
}
.how-to-order .timing-note {
  text-align: center;
  margin-top: 2.5rem;
  color: #5F5E5A;
  font-size: 0.92rem;
}
.how-to-order .timing-note .badge {
  display: inline-block;
  background: #193e69;
  color: #fff;
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin: 0 4px;
}
.how-to-order .cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.how-to-order .cta-row .btn {
  padding: 10px 24px;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: 6px;
}
@media (max-width: 768px) {
  .how-to-order { padding: 50px 0; }
  .how-to-order .step-card { margin-bottom: 1.5rem; }
}

/* Language switcher — static link version */
.lang-switcher-active {
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  cursor: default;
  margin: 0 4px;
}

/* ───────────────────────────────────────────────────────────
   v33 — Footer column heading alignment
   
   Bez ovog pravila, "Technical Documentation" (EN) se prelama u 2 reda
   dok "Quick links" i "Contact & Support" ostaju u 1 redu — pa beli
   separator pod EN naslovom "Technical Documentation" pada niže od
   ostalih separatora i razbija vizualnu liniju.
   
   Postavljanjem min-height na sve naslove kolona, svi h4 imaju istu
   visinu (rezervisanu za 2 reda), pa bela linija ispod uvek pada na
   istu poziciju — bez obzira da li je naslov 1-red (SR: "Korisni linkovi")
   ili 2-redni (EN: "Technical Documentation", DE: "Technische Dokumentation").
   
   align-items: flex-end → naslov se "drži uz" belu liniju ispod, prazan
   prostor (kad je naslov 1 red) je iznad naslova, ne ispod — pa naslov
   i njegov separator deluju kao jedna celina.
   
   Na mobile/tablet (<992px), kolone se slažu vertikalno, pa min-height
   nije potreban — uklanjamo ga da ne pravimo nepotreban prazan prostor.
   ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  footer .col-lg-3 > h4.text-white,
  footer .col-lg-4 > h4.text-white {
    min-height: 2.6em;        /* dovoljno za 2 reda h4 (20px × 1.2 × 2 = 48px = 2.4em + safety) */
    display: flex;
    align-items: flex-end;    /* naslov uz dno, prazno ide iznad → naslov + linija = jedna celina */
    margin-bottom: 0.75rem !important;  /* smanji default mb-4 (1.5rem) da linija ne odlepi */
  }
}

/* ───────────────────────────────────────────────────────────
   v36 — Trademark sign (®) sizing
   
   Bez ovog pravila, ® se renderuje u veličini glavnog teksta
   pa u h1/h2 naslovima izgleda preveliko i loše ("SYMAP®" sa
   krupnim O-u-krugu istog reda veličine kao slovo P).
   
   Pravilo cilja sve <sup class="r">&reg;</sup> wrap-ove koje
   smo postavili u v36 (Python script je obradio sva 2759 mesta
   u vidljivom tekstu — atributi/meta/title/script/style su
   preskočeni, oni i ne renderuju ® korisniku).
   
   Vrednosti:
   - font-size: 0.55em → ® je nešto više od pola veličine teksta
   - vertical-align: super → izdignut iznad osnovne linije
   - line-height: 0 → ne razvlači red u kojem se nalazi
   - font-weight: normal → ne nasleđuje bold od <h1><b> roditelja
   - margin-left: 1px → mali "vazduh" između R i ®
   ────────────────────────────────────────────────────────── */
sup.r {
  font-size: 0.55em;
  vertical-align: super;
  line-height: 0;
  font-weight: normal;
  margin-left: 1px;
}

/* ──────────────────────────────────────────────────────────
   v147 — about.html team silhouette hero
   Tamna kinematska slika sa overlay tekstom na dnu
   Responsive: na mobilnom overlay pokriva više slike radi čitljivosti
   v148: visina smanjena za 25%, aspect-ratio 8:4 (umesto originalnog 3:2)
   ────────────────────────────────────────────────────────── */
.team-hero {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.team-hero picture,
.team-hero img {
  display: block;
  width: 100%;
}
.team-hero img {
  aspect-ratio: 8 / 4;
  object-fit: cover;
  object-position: center 35%;
  height: auto;
}
.team-hero h3,
.team-hero h5,
.team-hero p {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 991px) {
  .team-hero h3 {
    font-size: 1.35rem !important;
  }
}
@media (max-width: 767px) {
  .team-hero img {
    aspect-ratio: 16 / 11;
    object-position: center 30%;
  }
  .team-hero > div:last-child {
    padding: 20px 18px 18px !important;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,18,32,0.85) 45%, rgba(10,18,32,0.95) 100%) !important;
  }
  .team-hero h3 {
    font-size: 1.15rem !important;
  }
  .team-hero p {
    font-size: 0.88rem !important;
  }
  .team-hero h5 {
    margin-bottom: 6px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   v58 — CTA link u careers "Život inženjera"
   Statusni tekst (plavo) + akcioni dugme (gold) + pointing finger animacija
   Cela traka je klikabilna; jasno indicira da je link.
   v59 — tekst pun beli, u jednom redu (no-wrap na desktopu, wrap na mobile-u)
   ────────────────────────────────────────────────────────── */
.cta-life {
  display: flex;
  align-items: stretch;
  background: #193e69;
  border-left: 4px solid #fc0303;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  max-width: 100%;
  margin-top: 1.5rem;
  text-decoration: none !important;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}
.cta-life:hover {
  box-shadow: 0 4px 12px rgba(25, 62, 105, 0.2);
  text-decoration: none !important;
  color: inherit;
}
.cta-life:hover .cta-life__btn {
  background: #e8c97a;
}
.cta-life:hover .cta-life__btn .cta-life__arrow {
  transform: translateX(4px);
}
.cta-life:hover .cta-life__finger {
  animation-play-state: paused;
}
.cta-life__text {
  color: #fff;
  padding: 16px 22px;
  font-size: 0.95rem;
  flex: 1;
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height: 1.4;
  white-space: normal;
}
.cta-life__text b {
  color: #f0d99c;
  font-weight: 700;
}
.cta-life__btn {
  background: #f0d99c;
  color: #193e69;
  padding: 16px 22px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.cta-life__finger {
  width: 22px;
  height: 22px;
  color: #193e69;
  flex-shrink: 0;
  animation: cta-life-point 1.4s ease-in-out infinite;
  transform-origin: center;
}
.cta-life__arrow {
  font-size: 1.15em;
  transition: transform 0.2s ease;
  display: inline-block;
}
@keyframes cta-life-point {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  40% { transform: translateX(-3px) rotate(-8deg); }
  60% { transform: translateX(-1px) rotate(0deg); }
  80% { transform: translateX(-2px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-life__finger { animation: none; }
}
@media (max-width: 900px) {
  .cta-life__text { font-size: 0.88rem; padding: 14px 18px; }
  .cta-life__btn { padding: 14px 18px; font-size: 0.85rem; }
}
@media (max-width: 640px) {
  .cta-life { flex-direction: column; }
  .cta-life__text {
    padding: 14px 16px;
    white-space: normal;
    text-overflow: clip;
  }
  .cta-life__btn { justify-content: center; padding: 14px 16px; }
}

/* ──────────────────────────────────────────────────────────
   v61 — Career page redesign (per docx proposal)
   Layout: full-width hero w/ pills + CTA, then 3 value cards,
   2-col requirements, work env icon cards, job desc cards,
   perks cards, CTA, footer blocks (left: apply, right: positions+hours)
   ────────────────────────────────────────────────────────── */

/* Hero — full-width, left-aligned, with background image + navy overlay */
.career-hero {
  position: relative !important;
  margin: 0 !important;
  padding: 60px 0 50px !important;
  border-bottom: 3px solid #fc0303;
  overflow: hidden;
}
.career-hero__bg {
  display: none !important;
}
.career-hero__overlay {
  display: none !important;
}
.career-hero__container {
  position: relative;
  z-index: 2;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  width: auto !important;
  text-align: left;
}
.career-hero__title,
.career-hero__subtitle,
.career-hero__meta,
.career-hero__pills,
.career-hero__cta {
  max-width: 560px;
}
.career-hero__meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}
.career-hero__meta-dot { margin: 0 8px; opacity: 0.5; }
.career-hero__title {
  color: #fff !important;
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.15;
  max-width: 760px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.career-hero__subtitle {
  color: rgba(255, 255, 255, 0.95) !important;
  font-size: 1.05rem;
  margin: 0 0 20px;
  font-weight: 400;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.career-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.career-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: #fff;
}
.career-hero__pill-icon { width: 14px; height: 14px; flex-shrink: 0; }
.career-hero__cta { margin-top: 8px; }
.career-hero__btn {
  display: inline-block;
  background: #f0d99c;
  color: #193e69 !important;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  white-space: nowrap;
  min-width: 150px;
  text-align: center;
  transition: background 0.2s ease;
}
.career-hero__btn:hover { background: #e8c97a; color: #193e69 !important; text-decoration: none !important; }
.career-hero__btn:focus { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 768px) {
  .career-hero { min-height: 320px; }
  .career-hero__title { font-size: 2rem; }
  .career-hero__container { padding: 40px 15px 36px; }
}
@media (max-width: 480px) {
  .career-hero__title { font-size: 1.7rem; }
}

/* Body section wrap — keeps prekidac.svg as subtle vertical line */
.career-section-wrap {
  background-color: #fff;
  padding: 50px 0 70px !important;
  position: relative;
}
.career-section-wrap > .container { position: relative; z-index: 2; }

/* Prekidac decoration — responsive: red vertical (top half) + breaker (middle) + blue vertical (bottom half) */
.career-section-wrap::before {
  /* red top half + transparent gap for breaker + blue bottom half */
  content: '';
  position: absolute;
  left: 36px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    #fc0303 0%, #fc0303 calc(50% - 18px),
    transparent calc(50% - 18px), transparent calc(50% + 18px),
    #193e69 calc(50% + 18px), #193e69 100%
  );
  opacity: 0.55;
  z-index: 1;
}
.career-section-wrap::after {
  /* breaker symbol — open-position contact, always centered */
  content: '';
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 72' fill='none' stroke-linecap='round'%3E%3Ccircle cx='18' cy='30' r='4' fill='%23fc0303'/%3E%3Ccircle cx='18' cy='42' r='4' fill='%23193e69'/%3E%3Cline x1='18' y1='42' x2='6' y2='30' stroke='%23193e69' stroke-width='3'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  opacity: 0.7;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 991px) {
  .career-section-wrap::before,
  .career-section-wrap::after { display: none; }
}

/* Intro paragraph */
.career-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #193e69;
  margin-bottom: 32px;
  max-width: 820px;
}

/* 3 value cards (Učenje · Projekti · Uticaj) */
.career-values {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 50px;
}
.career-value-card {
  flex: 1 1 240px;
  min-width: 0;
}
.career-value-card {
  background: #fff;
  padding: 8px 0;
}
.career-value-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(25, 62, 105, 0.06);
  border: 1px solid rgba(25, 62, 105, 0.15);
  margin-bottom: 14px;
}
.career-value-card__icon { width: 22px; height: 22px; color: #193e69; }
.career-value-card__title {
  color: #193e69 !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 8px;
}
.career-value-card__desc {
  color: #193e69;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 768px) {
  .career-values { grid-template-columns: 1fr; gap: 18px; }
}

/* Section title */
.career-section { margin-bottom: 36px; }
.career-section__title {
  color: #193e69 !important;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fc0303;
  display: inline-block;
  padding-right: 24px;
  font-family: inherit;
}

/* List items (used in requirements columns) */
.career-list { list-style: none; padding: 0; margin: 0; }
.career-list li {
  padding: 8px 0 8px 22px;
  position: relative;
  color: #193e69;
  line-height: 1.55;
  font-size: 0.95rem;
}
.career-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  top: 8px;
  color: #fc0303;
  font-weight: 700;
}

/* Requirements 2-column grid */
.career-requirements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 50px;
}
.career-req-col {
  flex: 1 1 280px;
  min-width: 0;
}
@media (max-width: 768px) {
  .career-requirements-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* Work environment — symmetric grid: layout adapts to item count
   12 items → 6×2, 9 items → 3×3, 4 items → 4×1 (uses :has() selector) */
.career-env-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* default: 12 items → 6 col */
  gap: 12px;
}
/* 9 items → 3×3 */
.career-env-grid:has(> .career-env-card:nth-child(9):last-child) {
  grid-template-columns: repeat(3, 1fr);
}
/* 4 items → 4×1 */
.career-env-grid:has(> .career-env-card:nth-child(4):last-child) {
  grid-template-columns: repeat(4, 1fr);
}
/* Tablet: 4 columns (12→4×3, 9→3×3, 4→4×1) */
@media (max-width: 991px) {
  .career-env-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .career-env-grid:has(> .career-env-card:nth-child(9):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Mobile: 2 columns */
@media (max-width: 600px) {
  .career-env-grid,
  .career-env-grid:has(> .career-env-card:nth-child(9):last-child),
  .career-env-grid:has(> .career-env-card:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr);
  }
}
.career-env-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background: #fff;
  border: 1px solid #e8e6dd;
  border-radius: 8px;
  text-align: center;
  transition: all 0.2s ease;
  min-height: 110px;
}
.career-env-card:hover {
  border-color: #fc0303;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.career-env-card__icon {
  width: 32px;
  height: 32px;
  color: #193e69;
  margin-bottom: 10px;
}
.career-env-card__pikto {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 8px;
}
.career-env-card__label {
  color: #193e69;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Job description — 2x2 cards with red check */
.career-tasks-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.career-task-card {
  flex: 1 1 calc(50% - 7px);
  min-width: 0;
}
.career-task-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: #fafaf7;
  border: 1px solid #e8e6dd;
  border-radius: 8px;
}
.career-task-card__check {
  width: 22px;
  height: 22px;
  color: #fc0303;
  flex-shrink: 0;
  margin-top: 2px;
}
.career-task-card__text {
  color: #193e69;
  font-size: 0.93rem;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 768px) {
  .career-tasks-grid { grid-template-columns: 1fr; }
}

/* Perks — 6 cards in 3-col grid (2 rows of 3) */
.career-perks-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.career-perk-card {
  flex: 1 1 180px;
}
.career-perk-card {
  background: #fff;
  border: 1px solid #e8e6dd;
  border-radius: 8px;
  padding: 22px 20px;
  text-align: center;
  transition: all 0.2s ease;
}
.career-perk-card:hover {
  border-color: #f0d99c;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.career-perk-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(25, 62, 105, 0.06);
  margin-bottom: 14px;
}
.career-perk-card__icon { width: 24px; height: 24px; color: #193e69; }
.career-perk-card__title {
  color: #193e69 !important;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.career-perk-card__desc {
  color: #193e69;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  opacity: 0.85;
}

/* Apply CTA */
.career-apply-cta-wrap { margin: 40px 0; }
.career-apply-cta {
  background: linear-gradient(135deg, #061F3D 0%, #0B315D 100%);
  color: #fff;
  padding: 28px 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 24px;
  border-left: 4px solid #f0d99c;
}
.career-apply-cta__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.career-apply-cta__icon { width: 28px; height: 28px; color: #fff; }
.career-apply-cta__text { flex: 1; min-width: 0; }
.career-apply-cta__title {
  color: #fff !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.career-apply-cta__lede {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}
.career-apply-cta__buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.career-apply-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  white-space: nowrap;
  min-width: 150px;
  justify-content: center;
  transition: all 0.2s ease;
}
.career-apply-cta__btn--primary {
  background: #fc0303;
  color: #fff !important;
}
.career-apply-cta__btn--primary:hover {
  background: #d80202;
  color: #fff !important;
  text-decoration: none !important;
}
.career-apply-cta__btn--secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff !important;
}
.career-apply-cta__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff !important;
  text-decoration: none !important;
}
.career-apply-cta__btn:focus { outline: 3px solid #f0d99c; outline-offset: 2px; }
.career-apply-cta__btn-icon { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .career-apply-cta { flex-direction: column; align-items: flex-start; text-align: left; }
  .career-apply-cta__buttons { width: 100%; }
  .career-apply-cta__btn { flex: 1; }
}
@media (max-width: 480px) {
  .career-apply-cta__buttons { flex-direction: column; }
  .career-apply-cta__btn { width: 100%; }
}

/* Footer blocks: apply (left) + positions+hours stack (right) */
.career-footer-blocks { margin-top: 40px; }
.career-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.career-footer-block--apply,
.career-footer-block--positions,
.career-footer-block-stack {
  flex: 1 1 380px;
  min-width: 0;
}
@media (max-width: 900px) {
  .career-footer-grid { grid-template-columns: 1fr; }
}
.career-footer-block {
  background: #fafaf7;
  border: 1px solid #e8e6dd;
  border-radius: 8px;
  padding: 22px 24px;
}
.career-footer-block-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.career-footer-block__head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #193e69 !important;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8e6dd;
}
.career-footer-block__head-icon { width: 16px; height: 16px; color: #193e69; }
.career-footer-block__lede {
  color: #193e69;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.career-footer-block__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid #e8e6dd;
  color: #193e69 !important;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none !important;
}
.career-footer-block__contact:hover { color: #fc0303 !important; text-decoration: none !important; }
.career-footer-block__contact-icon { width: 16px; height: 16px; color: #193e69; flex-shrink: 0; }
.career-footer-block__contact:hover .career-footer-block__contact-icon { color: #fc0303; }
.career-footer-block__privacy {
  color: #193e69;
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 14px 0 0;
  opacity: 0.7;
  padding-top: 14px;
  border-top: 1px solid #e8e6dd;
}

/* Positions list — modern card-style with hover and active states */
.career-positions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.career-positions__item {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.career-positions__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #193e69 !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  line-height: 1.4;
  border-radius: 6px;
  position: relative;
  transition: background 0.2s ease, padding 0.2s ease;
}
.career-positions__item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 60%;
  background: #fc0303;
  border-radius: 0 2px 2px 0;
  transition: width 0.2s ease;
}
.career-positions__item a:hover {
  background: rgba(25, 62, 105, 0.04);
  color: #193e69 !important;
  padding-left: 18px;
}
.career-positions__item a:hover::before { width: 3px; }
.career-positions__item a:hover .career-positions__arrow {
  color: #fc0303;
  opacity: 1;
  transform: translateX(4px);
}
.career-positions__arrow {
  width: 14px;
  height: 14px;
  color: #193e69;
  flex-shrink: 0;
  opacity: 0.4;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Active position — gradient highlight + accent bar + badge */
.career-positions__item--current {
  background: linear-gradient(90deg, rgba(252,3,3,0.07) 0%, rgba(252,3,3,0.02) 60%, rgba(252,3,3,0) 100%);
  color: #193e69 !important;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 12px 14px 12px 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.career-positions__item--current::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: #fc0303;
  border-radius: 0 3px 3px 0;
}
.career-positions__item--current::after {
  content: 'TRENUTNA';
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: #fc0303;
  background: #fff;
  border: 1px solid rgba(252,3,3,0.28);
  padding: 3px 8px;
  border-radius: 11px;
  flex-shrink: 0;
  white-space: nowrap;
}
html[lang="en"] .career-positions__item--current::after { content: 'CURRENT'; }

/* Hours */
.career-hours__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #e8e6dd;
  font-size: 0.9rem;
}
.career-hours__row:last-child { border-bottom: none; }
.career-hours__label { color: #193e69; opacity: 0.75; }
.career-hours__value { color: #193e69; font-weight: 700; }

/* Global button safety per docx (white-space:nowrap; min-width:150px) */
.career-hero__btn,
.career-apply-cta__btn {
  white-space: nowrap;
  min-width: 150px;
}

/* Sticky mobile CTA bar */
.career-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #e8e6dd;
  padding: 10px 16px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.career-mobile-cta__btn {
  display: block;
  width: 100%;
  background: #fc0303;
  color: #fff !important;
  padding: 13px 20px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  text-align: center;
}
.career-mobile-cta__btn:hover {
  background: #d80202;
  color: #fff !important;
  text-decoration: none !important;
}
@media (max-width: 768px) {
  .career-mobile-cta { display: block; }
  body.has-career-mobile-cta { padding-bottom: 70px; }
}


/* v68: Career-life CTA — info banner under hero linking to karijera-zivot.html */
.career-life-cta {
  background: linear-gradient(135deg, #f5f3ed 0%, #faf8f2 100%);
  border-top: 1px solid #e8e6dd;
  border-bottom: 1px solid #e8e6dd;
  padding: 22px 0;
  position: relative;
}
.career-life-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, #fc0303 50%, #193e69 50%);
  opacity: 0.7;
}
.career-life-cta__inner {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 100%;
}
.career-life-cta__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  color: #193e69;
  background: rgba(25, 62, 105, 0.08);
  border-radius: 50%;
  padding: 8px;
}
.career-life-cta__text {
  flex: 1;
  min-width: 0;
}
.career-life-cta__title {
  color: #193e69 !important;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  line-height: 1.3;
  font-family: inherit;
}
.career-life-cta__lede {
  color: #5a6b7a;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}
.career-life-cta__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #193e69;
  color: #fff !important;
  text-decoration: none !important;
  padding: 11px 20px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
  border: 0;
}
.career-life-cta__btn:hover {
  background: #fc0303;
  color: #fff !important;
  transform: translateX(2px);
}
.career-life-cta__btn-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}
.career-life-cta__btn:hover .career-life-cta__btn-icon {
  transform: translateX(2px);
}
@media (max-width: 768px) {
  .career-life-cta__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .career-life-cta__btn {
    width: 100%;
    justify-content: center;
  }
}


/* v68: Dark-frame style — page--dark-frame body class applies to top-header + main footer.
   Same gradient + gold accent as the career-apply-cta component. */

.page--dark-frame .top-header {
  background: linear-gradient(135deg, #061F3D 0%, #0B315D 100%);
  border-left: 4px solid #f0d99c;
  position: relative;
  padding-left: 0;
}
.page--dark-frame .top-header span,
.page--dark-frame .top-header a,
.page--dark-frame .top-header .lang-switcher,
.page--dark-frame .top-header .lang-switcher-active {
  color: #ffffff !important;
}
.page--dark-frame .top-header .lang-switcher a {
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.18s ease;
}
.page--dark-frame .top-header .lang-switcher a:hover {
  color: #f0d99c !important;
}
.page--dark-frame .top-header .lang-switcher-active {
  color: #f0d99c !important;
}

/* Footer — same gradient, gold left accent, gold link hover */
.page--dark-frame footer.bg-secondary,
.page--dark-frame footer + section.bg-secondary {
  background: linear-gradient(135deg, #061F3D 0%, #0B315D 100%) !important;
  position: relative;
  border-left: 4px solid #f0d99c;
}
/* Subtle visual seam between footer body and copyright bar */
.page--dark-frame footer + section.bg-secondary {
  border-top: 1px solid rgba(240, 217, 156, 0.18);
}
.page--dark-frame footer + section.bg-secondary .text-white,
.page--dark-frame footer + section.bg-secondary a.text-white {
  color: rgba(255,255,255,0.92) !important;
}
.page--dark-frame footer + section.bg-secondary a.text-white {
  transition: color 0.18s ease;
}
.page--dark-frame footer + section.bg-secondary a.text-white:hover {
  color: #f0d99c !important;
}
.page--dark-frame footer.bg-secondary .footer-links a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.page--dark-frame footer.bg-secondary .footer-links a:hover {
  color: #f0d99c !important;
  padding-left: 4px;
}
/* Footer column titles — gold underline accent */
.page--dark-frame footer.bg-secondary h4,
.page--dark-frame footer.bg-secondary h5 {
  color: #ffffff !important;
  position: relative;
  padding-bottom: 8px;
}
.page--dark-frame footer.bg-secondary h4::after,
.page--dark-frame footer.bg-secondary h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  background: #f0d99c;
  border-radius: 2px;
}
/* Social icons — gold hover */
.page--dark-frame footer.bg-secondary .social-icon-outline {
  border-color: rgba(255,255,255,0.4) !important;
  color: rgba(255,255,255,0.85) !important;
  transition: all 0.18s ease;
}
.page--dark-frame footer.bg-secondary .social-icon-outline:hover {
  border-color: #f0d99c !important;
  color: #f0d99c !important;
  background: rgba(240, 217, 156, 0.08) !important;
}
/* Bottom copyright bar — slightly darker, subtle gold separator */
.page--dark-frame footer.bg-secondary .copyright,
.page--dark-frame footer.bg-secondary .py-3 {
  background: rgba(0, 0, 0, 0.18);
  border-top: 1px solid rgba(240, 217, 156, 0.25);
}


/* v68: team-cta — dark backdrop CTA with silhouette team photo */
.team-cta {
  position: relative;
  background-color: #020c1f;
  background-image: url('../images/background/team-silhouettes.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  padding: 70px 0;
  overflow: hidden;
  isolation: isolate; /* keep overlay & inner z-stacking clean */
}
/* WEBP if supported */
@supports (background-image: url('../images/background/team-silhouettes.webp')) {
  .team-cta { background-image: url('../images/background/team-silhouettes.webp'); }
}
/* Diagonal overlay — heavier on the left where text lives, fades right to reveal the team */
.team-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 12, 31, 0.92) 0%,
    rgba(2, 12, 31, 0.78) 35%,
    rgba(2, 12, 31, 0.55) 60%,
    rgba(2, 12, 31, 0.30) 100%
  );
  z-index: 1;
}
/* Gold accent at top */
.team-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #c69c44 0%, #f0d99c 50%, #c69c44 100%);
  opacity: 0.6;
  z-index: 2;
}
.team-cta__inner {
  position: relative;
  z-index: 2;
}
.team-cta__eyebrow {
  color: #f0d99c;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.team-cta__title {
  color: #ffffff;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  letter-spacing: -0.3px;
}
.team-cta__lede {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  max-width: 640px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.team-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f0d99c;
  color: #061F3D !important;
  text-decoration: none !important;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(240, 217, 156, 0.15);
}
.team-cta__btn:hover {
  background: #ffffff;
  color: #061F3D !important;
  transform: translateX(3px);
  box-shadow: 0 6px 24px rgba(240, 217, 156, 0.3);
}
.team-cta__btn-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.team-cta__btn:hover .team-cta__btn-icon {
  transform: translateX(3px);
}
@media (max-width: 991px) {
  .team-cta {
    padding: 50px 0;
    background-position: right center;
  }
  .team-cta__overlay {
    background: linear-gradient(
      180deg,
      rgba(2, 12, 31, 0.88) 0%,
      rgba(2, 12, 31, 0.75) 60%,
      rgba(2, 12, 31, 0.65) 100%
    );
  }
  .team-cta__title { font-size: 1.45rem; }
  .team-cta__lede { font-size: 0.95rem; }
  .team-cta__btn {
    margin-top: 18px;
    width: auto;
    padding: 12px 24px;
  }
}
@media (max-width: 575px) {
  .team-cta__title { font-size: 1.25rem; }
}


/* v68: hero-wireframe — for dark wireframe/blueprint hero images (2:1 source)
   The image itself is already dark — overlay is subtle, mainly to ensure text legibility */
.hero-wireframe {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #020c1f;
  padding: 130px 0 90px;
  position: relative;
  isolation: isolate;
}
/* Subtle gold accent line at top */
.hero-wireframe::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c69c44 50%, transparent 100%);
  opacity: 0.5;
}
.hero-wireframe h1 {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
  margin-bottom: 12px;
}
.hero-wireframe .text-white-70 {
  font-size: 1.08rem;
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  color: rgba(255, 255, 255, 0.92) !important;
}
@media (max-width: 768px) {
  .hero-wireframe {
    padding: 90px 0 60px;
  }
  .hero-wireframe h1 { font-size: 1.8rem; }
  .hero-wireframe .text-white-70 { font-size: 0.95rem; }
}


/* v68: contact-info-card — clean redesign for contact-general + contact-prodaja
   No white-on-white issues; consistent navy palette */
.contact-info-card {
  background: #fff;
  padding: 24px 26px;
  border-radius: 6px;
  border: 1px solid #e8e6dd;
  border-left: 4px solid #193e69;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.contact-info-title {
  color: #193e69 !important;
  font-size: 1.85rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
/* v75: small variant for pages where form has primary H2 — left column is secondary */
.contact-info-title-small {
  color: #193e69 !important;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.contact-info-subtitle {
  color: #5a6b7a;
  font-size: 0.95rem;
  margin: 0;
}
.contact-info-section-h {
  color: #193e69 !important;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #fc0303;
  display: inline-block;
}
.contact-info-text {
  color: #193e69;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-info-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  padding: 0;
}
.contact-info-list li:last-child { margin-bottom: 0; }
.contact-info-list li .round-icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-info-list li a,
.contact-info-list li div {
  color: #193e69 !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: color 0.18s ease;
  align-self: center;
}
.contact-info-list li a:hover {
  color: #fc0303 !important;
}
.contact-info-list--address li div {
  font-weight: 500;
  font-size: 0.92rem;
}

/* v70: contact-tender — eyebrow on title card + CTA block enhancements */
.contact-info-eyebrow {
  color: #fc0303;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.contact-cta-block {
  background: #fff;
  padding: 2.25rem 2.25rem;
  border-radius: 6px;
  border: 1px solid #e8e6dd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.contact-cta-block h4 {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* check-list with red check icons */
.ct-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ct-checklist li {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed #e8e6dd;
  color: #193e69;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ct-checklist li:last-child { border-bottom: none; }
.ct-checklist li i {
  flex-shrink: 0;
  color: #fc0303;
  font-size: 0.85rem;
  font-weight: 700;
  margin-right: 12px;
  margin-top: 5px;
  width: 16px;
  text-align: center;
}

/* response-time promise block */
.ct-promise {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #f4f7fb;
  border-left: 3px solid #193e69;
  padding: 16px 18px;
  border-radius: 4px;
  margin-top: 8px;
}

/* v78: Useful links card — grouped compact list */
.ct-links-group {
  color: #fc0303;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8e6dd;
}
.ct-links-list {
  list-style: none;
  padding: 0;
  margin: 0 0 4px;
}
.ct-links-list li {
  padding: 5px 0;
  font-size: 0.9rem;
  line-height: 1.4;
}
.ct-links-list li a {
  color: #193e69;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease, padding-left 0.15s ease;
}
.ct-links-list li a::before {
  content: "›";
  color: #fc0303;
  font-weight: 700;
  margin-right: 8px;
  font-size: 1.05rem;
  line-height: 1;
}
.ct-links-list li a:hover {
  color: #fc0303;
  padding-left: 2px;
}
.ct-promise i {
  flex-shrink: 0;
  color: #193e69;
  font-size: 1.4rem;
  margin-top: 3px;
}
.ct-promise strong {
  display: block;
  color: #193e69;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.ct-promise p {
  color: #5a6b7a;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* CTA buttons — stack on small screens */
.ct-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ct-cta-buttons .btn {
  flex: 1 1 auto;
  min-width: 200px;
}
@media (max-width: 768px) {
  .contact-cta-block { padding: 1.5rem 1.25rem; }
  .ct-cta-buttons .btn { width: 100%; }
}


/* v68: section-breaker — visual rhythm for long pages (symap-series, compact_plus_description) */
.section-breaker {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;
}

/* STYLE A: pure visual pause — just photo + thin red lines */
.breaker-pure {
  height: 220px;
  border-top: 3px solid #fc0303;
  border-bottom: 3px solid #fc0303;
}

/* STYLE B: premium quote with overlay */
.breaker-quote {
  min-height: 280px;
  padding: 70px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.breaker-quote::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(2,12,31,0.55) 0%, rgba(2,12,31,0.65) 100%);
  z-index: 1;
}
.breaker-quote__inner {
  position: relative; z-index: 2;
  text-align: center; max-width: 800px; padding: 0 32px;
}
.breaker-quote__eyebrow {
  color: #f0d99c;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.breaker-quote__text {
  color: #ffffff;
  font-size: 1.65rem;
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  font-style: italic;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.breaker-quote__attribution {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.85rem;
  margin: 20px 0 0;
  letter-spacing: 0.06em;
}

/* STYLE C: asymmetric intro card on left */
.breaker-asym {
  min-height: 260px;
  padding: 60px 0;
  display: flex;
  align-items: center;
}
.breaker-asym::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2,12,31,0.85) 0%, rgba(2,12,31,0.55) 40%, rgba(2,12,31,0.15) 75%, rgba(2,12,31,0) 100%);
  z-index: 1;
}
.breaker-asym .container {
  position: relative; z-index: 2;
}
.breaker-asym__card {
  max-width: 520px;
}
.breaker-asym__eyebrow {
  display: inline-block;
  color: #f0d99c;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
  border-left: 3px solid #fc0303;
  padding-left: 12px;
}
.breaker-asym__title {
  color: #ffffff;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.breaker-asym__lede {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  margin: 0;
  line-height: 1.55;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .breaker-pure { height: 160px; }
  .breaker-quote { padding: 50px 0; min-height: 220px; }
  .breaker-quote__text { font-size: 1.2rem; }
  .breaker-asym { padding: 40px 0; min-height: 200px; background-position: right center; }
  .breaker-asym::before {
    background: linear-gradient(180deg, rgba(2,12,31,0.75) 0%, rgba(2,12,31,0.6) 100%);
  }
  .breaker-asym__title { font-size: 1.3rem; }
  .breaker-asym__lede { font-size: 0.92rem; }
}


/* v68: himap-fleet-cta — LNG carrier backdrop for the HIMAP retrofit CTA on symap-r.html */
.himap-fleet-cta {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 70px 0;
  position: relative;
  isolation: isolate;
  /* gold accent at top */
  border-top: 2px solid transparent;
}
.himap-fleet-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #c69c44 50%, transparent 100%);
  opacity: 0.6;
  z-index: 1;
}
.himap-fleet-cta .container {
  position: relative;
  z-index: 2;
}
.himap-fleet-cta h3 {
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.himap-fleet-cta p {
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .himap-fleet-cta {
    padding: 50px 0;
    background-position: right center;
  }
}


/* v68: ebs-intro — redesigned EBS introduction on compact_plus_description.html */
.ebs-intro-section {
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.ebs-intro-card {
  background: rgba(255, 255, 255, 0.88);
  padding: 50px 50px;
  border-radius: 6px;
  border-left: 4px solid #fc0303;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ebs-intro-eyebrow {
  color: #fc0303;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.ebs-intro-title {
  color: #193e69;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.ebs-intro-lede {
  color: #193e69;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 28px;
}
.ebs-intro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.ebs-stat {
  background: #f4f7fb;
  padding: 16px 14px;
  border-radius: 4px;
  border-top: 3px solid #193e69;
  text-align: center;
}
.ebs-stat__num {
  color: #193e69;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.1;
}
.ebs-stat__num span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5a6b7a;
  margin-left: 2px;
}
.ebs-stat__label {
  color: #5a6b7a;
  font-size: 0.78rem;
  line-height: 1.3;
  font-weight: 500;
}
.ebs-intro-diagram {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #e5e8ed;
  margin-bottom: 14px;
}
.ebs-intro-diagram img {
  max-width: 100%;
  height: auto;
}
.ebs-intro-caption {
  color: #5a6b7a;
  font-size: 0.82rem;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .ebs-intro-section { padding: 50px 0; }
  .ebs-intro-card { padding: 28px 22px; }
  .ebs-intro-title { font-size: 1.5rem; }
  .ebs-intro-stats { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================================ */
/* v83 — Aplikativni pattern za sve app-* stranice              */
/*                                                              */
/* MARINE retrofit signal (zlatni badge + Hamburg kontakt)      */
/* Silver accent za ANSI badge i signature border               */
/* Deep slate za retrofit kartice                               */
/* ============================================================ */

.badge.badge-silver     { background-color: #64748B; color: #fff; }
.badge.badge-marine     { background-color: #D4AF37; color: #193e69; font-size: .7rem; font-weight: 700; letter-spacing: 1.5px; padding: .35em .7em; }
.border-silver-left     { border-left: 6px solid #64748B !important; }
.card-header-retrofit   { background-color: #475569 !important; }
.card-header-retrofit h6 { color: #ffffff !important; }

/* ============================================================ */
/* v84 — Sistem statusa funkcija (v82 audit)                    */
/*                                                              */
/* Koristi se u tabelama funkcija na aplikativnim stranicama   */
/* da označi kako se funkcija dobija:                          */
/*   OSNOVA    — deo osnovnog paketa (na CT/VT ulazu)           */
/*   OPCIJA    — naručuje se kroz Order Code                    */
/*   VARIJANTA — posebna proizvodna varijanta uređaja           */
/*   HW USLOV  — zavisi od hardverskog ulaza/modula             */
/*   PROVERA   — projektna provera kataloga i šeme              */
/* ============================================================ */

.badge.badge-base     { background-color: #198754; color: #fff; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-variant  { background-color: #6f42c1; color: #fff; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-hw       { background-color: #0EA5E9; color: #fff; font-size: .7rem; letter-spacing: .3px; }

/* ============================================================ */
/* v168 — Prošireni sistem statusa (po v167 spec)               */
/*                                                              */
/* badge-platform — DOSTUPNO U PLATFORMI (kao badge-base, alias)*/
/* badge-input    — MERNI/SIGNALNI USLOV (kao badge-hw, alias)  */
/* badge-app      — APLIKACIONA FUNKCIJA (nova, narandzasta)    */
/* badge-option   — OPCIJA/VARIJANTA (kao badge-warning, alias) */
/* badge-project  — PROJEKTNO (nova, tamno siva)                */
/* ============================================================ */

.badge.badge-platform { background-color: #198754; color: #fff; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-input    { background-color: #0EA5E9; color: #fff; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-app      { background-color: #F97316; color: #fff; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-option   { background-color: #EAB308; color: #1f2937; font-size: .7rem; letter-spacing: .3px; }
.badge.badge-project  { background-color: #475569; color: #fff; font-size: .7rem; letter-spacing: .3px; }


/* ─── v121: GOOSE Performance section (style mirrors .ebs-intro-section) ─── */
.goose-perf-section {
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.goose-perf-card {
  background: rgba(255, 255, 255, 0.97);
  padding: 40px 40px;
  border-radius: 8px;
}
.goose-perf-eyebrow {
  color: #fc0303;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.goose-perf-title {
  color: #193e69;
  font-size: 2rem;
  font-weight: 500;
  margin: 0 0 14px;
}
.goose-perf-lede {
  color: #193e69;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 24px;
}
.goose-perf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.goose-stat {
  background: #f4f7fb;
  padding: 16px 14px;
  border-radius: 6px;
  text-align: center;
}
.goose-stat__num {
  font-size: 1.4rem;
  font-weight: 500;
  color: #193e69;
  line-height: 1.1;
  margin-bottom: 4px;
}
.goose-stat__num small {
  font-size: 0.85rem;
  font-weight: 400;
  color: #5f5e5a;
}
.goose-stat__label {
  font-size: 0.78rem;
  color: #5f5e5a;
  line-height: 1.35;
}
.goose-perf-note {
  padding: 10px 14px;
  background: #e6f1fb;
  border-left: 3px solid #185fa5;
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: #042c53;
  line-height: 1.55;
  margin-bottom: 20px;
}
.goose-perf-note i {
  color: #185fa5;
  margin-right: 6px;
  font-size: 1rem;
  vertical-align: -2px;
}

/* Interactive bars */
.gx-graph { padding: 4px 0 0; }
.gx-scenario-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: #f4f7fb;
  border-radius: 6px;
}
.gx-scenario-row label {
  font-size: 0.85rem;
  color: #5f5e5a;
  white-space: nowrap;
  font-weight: 500;
  margin: 0;
}
.gx-scenario-row select {
  flex: 1;
  font-size: 0.85rem;
  padding: 6px 10px;
  border: 0.5px solid #d3d1c7;
  border-radius: 4px;
  background: #fff;
  color: #2c2c2a;
  cursor: pointer;
  font-family: inherit;
}
.gx-row { padding: 10px 0; }
.gx-row + .gx-row { border-top: 0.5px solid rgba(0,0,0,0.08); }
.gx-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  gap: 12px;
}
.gx-row-title {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c2c2a;
  margin: 0;
}
.gx-row-title small {
  color: #5f5e5a;
  font-weight: 400;
  font-size: 0.78rem;
  margin-left: 6px;
}
.gx-row-total {
  font-size: 0.9rem;
  font-weight: 500;
  color: #2c2c2a;
  font-family: 'Courier New', monospace;
  white-space: nowrap;
}
.gx-bar-wrap {
  position: relative;
  height: 22px;
  background: #f1efe8;
  border-radius: 3px;
  overflow: hidden;
}
.gx-bar-range {
  position: absolute;
  height: 100%;
  background: #1d9e75;
  transition: left 0.25s, width 0.25s;
}
.gx-bar-range.blue { background: #185fa5; }
.gx-bar-app {
  position: absolute;
  top: 0;
  height: 100%;
  background: #e24b4a;
  transition: left 0.25s, width 0.25s;
}
.gx-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 0.7rem;
  color: #888780;
  font-family: 'Courier New', monospace;
}
.gx-control {
  background: #f4f7fb;
  padding: 12px 14px;
  border-radius: 6px;
  margin-top: 14px;
}
.gx-control-label {
  font-size: 0.78rem;
  color: #5f5e5a;
  margin: 0 0 8px;
}
.gx-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gx-preset {
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 3px;
  border: 0.5px solid #d3d1c7;
  background: #fff;
  cursor: pointer;
  color: #5f5e5a;
  transition: all 0.15s;
  font-family: inherit;
}
.gx-preset:hover { border-color: #193e69; color: #193e69; }
.gx-preset.active { background: #193e69; border-color: #193e69; color: #fff; }
.gx-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gx-slider-row input[type="range"] { flex: 1; }
.gx-val {
  font-size: 0.85rem;
  font-weight: 500;
  color: #193e69;
  min-width: 60px;
  text-align: right;
  font-family: 'Courier New', monospace;
}
.gx-legend {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  padding: 10px 14px;
  background: #f4f7fb;
  border-radius: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: #5f5e5a;
}
.gx-leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gx-leg-sw {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}
.gx-conclusion {
  background: #eaf3de;
  border-left: 3px solid #3b6d11;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-top: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gx-conclusion i {
  font-size: 18px;
  color: #3b6d11;
  flex-shrink: 0;
  line-height: 1.5;
}
.gx-conclusion p {
  font-size: 0.85rem;
  color: #173404;
  margin: 0;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .goose-perf-section { padding: 50px 0; }
  .goose-perf-card { padding: 28px 22px; }
  .goose-perf-title { font-size: 1.5rem; }
  .goose-perf-stats { grid-template-columns: 1fr; gap: 10px; }
  .gx-row-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .gx-legend { flex-direction: column; gap: 8px; }
}
/* ─── /v121 GOOSE Performance section ─── */

/* ─── v151: GOOSE applications card (in accordion) ─── */
.goose-app-card {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    border: 0.5px solid #d3d1c7;
    border-left: 3px solid #193e69;
    border-radius: 6px;
    padding: 26px 28px;
    margin: 4px 0 12px;
}
.goose-app-eyebrow {
    color: #fc0303;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 8px;
}
.goose-app-title {
    color: #193e69;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 14px;
    line-height: 1.35;
}
.goose-app-intro {
    color: #2c2c2a;
    font-size: 0.93rem;
    line-height: 1.65;
    margin-bottom: 22px;
}
.goose-app-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 22px;
    margin-bottom: 20px;
}
.goose-app-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #ffffff;
    border: 0.5px solid #e8e6dd;
    border-radius: 5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.goose-app-item:hover {
    border-color: #193e69;
    box-shadow: 0 3px 12px rgba(25, 62, 105, 0.08);
}
.goose-app-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #193e69;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.goose-app-item__body h6 {
    color: #193e69;
    font-size: 0.92rem;
    font-weight: 500;
    margin: 0 0 4px;
    line-height: 1.3;
}
.goose-app-item__body p {
    color: #5F5E5A;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
}
.goose-app-footer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #FFF8E1;
    border-left: 3px solid #f0d99c;
    border-radius: 4px;
    margin-top: 4px;
}
.goose-app-footer i {
    color: #BA7517;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.goose-app-footer p {
    color: #2c2c2a;
    font-size: 0.85rem;
    line-height: 1.55;
    margin: 0;
}
.goose-app-footer a {
    color: #193e69;
    font-weight: 500;
    text-decoration: underline;
}
.goose-app-footer a:hover {
    color: #fc0303;
}
@media (max-width: 767px) {
    .goose-app-card { padding: 20px 18px; }
    .goose-app-grid { grid-template-columns: 1fr; gap: 12px; }
    .goose-app-title { font-size: 1.05rem; }
}
/* ─── /v151 GOOSE applications card ─── */

/* ─── v220 contact-tender redesign ─── */
.ct-hero-section { padding: 70px 0 60px; }
.ct-hero-section .contact-info-eyebrow {
  letter-spacing: 3px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.ct-hero-section .contact-info-title {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}
.ct-hero-section .lead {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 780px;
  margin: 0 auto;
}

/* full-height equalisation across cards in the same row */
.ct-hero-section .row.align-items-stretch .contact-cta-block,
.ct-hero-section .row.align-items-stretch .contact-info-card,
.ct-hero-section .row .contact-info-card.h-100 {
  height: 100%;
}

/* flex column behaviour for right-side stack */
.ct-hero-section .d-flex.flex-column.h-100 {
  gap: 0;
}

/* section-h icon spacing */
.ct-hero-section .contact-info-section-h i {
  font-size: 0.95em;
  vertical-align: -1px;
}

/* hover lift effect for info cards */
.ct-hero-section .contact-info-card,
.ct-hero-section .contact-cta-block {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.ct-hero-section .contact-info-card:hover,
.ct-hero-section .contact-cta-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(25, 62, 105, 0.08);
}

/* v225: diskretan vertikalni gradijent na desnim info boksovima (svetlije gore -> tamnije dole) */
.ct-hero-section .contact-info-card {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #f2f4f7 100%);
}

@media (max-width: 991px) {
  .ct-hero-section .contact-info-title { font-size: 2.1rem; }
  .ct-hero-section .lead { font-size: 1rem; }
  .ct-hero-section { padding: 50px 0 40px; }
}
@media (max-width: 767px) {
  .ct-hero-section .contact-info-title { font-size: 1.75rem; }
}
/* ─── /v220 ─── */

/* ─── v221 fix: heading color inheritance inside dark containers ─── */
/* Kada je heading unutar .text-white kontejnera, nasleđuje belu boju
   umesto default-a #193e69 (koji se sukobljava sa tamno plavom pozadinom). */
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6,
.text-white .h1, .text-white .h2, .text-white .h3,
.text-white .h4, .text-white .h5, .text-white .h6 {
  color: inherit;
}
/* ─── /v221 ─── */

/* ─── v222 contact pages: sticky right column on desktop ─── */
@media (min-width: 992px) {
  .ct-hero-section .col-lg-4 .d-flex.flex-column.h-100 {
    position: sticky;
    top: 100px;
  }
}
/* ─── /v222 ─── */

/* v227: submission reference number shown in form success message */
.stucke-form-status .stucke-form-ref {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(25, 62, 105, 0.18);
  font-size: 0.95rem;
}
.stucke-form-status .stucke-form-ref strong {
  font-family: "Courier New", monospace;
  letter-spacing: 0.5px;
  color: #193e69;
}

/* v228: form fields — example/placeholder text muted (distinct color) and not bold;
   typed text navy and not bold. Bold stays reserved for section titles and labels. */
.stucke-form .form-control,
#orq-form .form-control {
  font-weight: 400;
  color: #193e69;
}
.stucke-form .form-control::-webkit-input-placeholder,
#orq-form .form-control::-webkit-input-placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
.stucke-form .form-control::-moz-placeholder,
#orq-form .form-control::-moz-placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
.stucke-form .form-control:-ms-input-placeholder,
#orq-form .form-control:-ms-input-placeholder { color: #9aa7b4; font-weight: 400; }
.stucke-form .form-control::placeholder,
#orq-form .form-control::placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
/* Unselected dropdown default ("-- izaberite --") reads as a muted example */
.stucke-form select.form-control:required:invalid,
#orq-form select.form-control:required:invalid { color: #9aa7b4; }
.stucke-form select.form-control option,
#orq-form select.form-control option { color: #193e69; font-weight: 400; }

/* v228: extend the same form-text treatment to the career application form (#applyForm) */
#applyForm .form-control { font-weight: 400; color: #193e69; }
#applyForm .form-control::-webkit-input-placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
#applyForm .form-control::-moz-placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
#applyForm .form-control:-ms-input-placeholder { color: #9aa7b4; font-weight: 400; }
#applyForm .form-control::placeholder { color: #9aa7b4; font-weight: 400; opacity: 1; }
#applyForm select.form-control:required:invalid { color: #9aa7b4; }
#applyForm select.form-control option { color: #193e69; font-weight: 400; }

/* v235: textareas must not be squashed by the global .form-control height:40px.
   element+class selector outranks .form-control, so this applies in all forms. */
textarea.form-control {
  height: auto;
  min-height: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.5;
  resize: vertical;
}
/* native date input: match form-control height/alignment */
.stucke-form input[type="date"].form-control { line-height: normal; }