@import url('flickity.min.css');
@import url('animations.css');
#testimonials{
  max-width: 100vw;
  overflow-x: hidden;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

.videoModal, #demoModal {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

@font-face {
  font-family: 'Inter Black';
  src: url(../fonts/Inter-Black.otf);
}
@font-face {
  font-family: 'Roboto Light';
  src: url(../fonts/roboto-light.ttf);
}
@font-face {
  font-family: 'Roboto Black';
  src: url(../fonts/Roboto-Black.ttf);
}
@font-face {
  font-family: 'Roboto Medium';
  src: url(../fonts/Roboto-Medium.ttf);
}
@font-face {
  font-family: 'Roboto Regular';
  src: url(../fonts/Roboto-Regular.ttf);
}

.masthead{
  min-height: 700px !important;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#header{
  background-image: url('../assets/mobile/header-mobile.jpg');
  height: 75vh;
}
#reasonsToUse{
  height: 100vh;
  background-image: url('../assets/mobile/vp-mobile.jpg');
}
#CTA{
  background-image: url('../assets/mobile/postani_korisnik.jpg');
  min-height: 100vh;
}
@media only screen and (min-width: 576px) {
  #header{
    background-image: url('../assets/header.jpg');
    min-height: 40vh;
    height: 70vh;
  }
  #reasonsToUse{
    background-image: url('../assets/vp.jpg');
    min-height: 40vh;
    background-position: 25% 80%;
    height: 60vh;
    overflow: hidden;
  }
  #reasonsToUse .card{
    width: 100% !important;
  }
  #CTA{
    background-image: url('../assets/postani-korisnik.jpg');
    min-height: 40vh;
    background-position: 25% 80%;
    height: 60vh;
    /* overflow: hidden; */
  }
  #CTA h6{
    font-size: x-large;
  }
  #CTA .card{
    width:60% !important;
  }
}

#forWhom{
  background-image: url('../assets/for-whom.jpg');
}
.become-customer:hover{
  color: #ffffff !important;
  border-color: #ffffff !important;
  background-color: transparent !important;
}
.learn-more:hover{
  color:#90AFF2 !important;
  border-color: #ffffff !important;
}

.navbar.bg-light{
  background-color: #85A2E6 !important;
}
.bg-default-light{
  background-color: #85A2E6 !important;
}
.navbar-brand img{
  max-height: 50px;
}
#header h1{
  color: white;
  font-family: 'Inter Black';
  font-size: xx-large !important;
}
#header h2{
  color: white;
  font-family: 'Roboto Light';
}
@media only screen and (min-width: 576px) {
  #header h1{
    font-size: calc(1.475rem + 2.7vw) !important;

  }
  #header h2{
    font-size: x-large !important;
  }
  #CTA .card{
    width:100% !important;
  }
}
@media only screen and (min-width: 1200px) {
  #header{
    min-height: 40vh;
    height: 75vh;
  }
  #reasonsToUse .card{
    background: transparent;
  }
  #reasonsToUse{
    height: 70vh;
  }
  #CTA .card{
    width:60% !important;
  }

}

.color-blue{
  color: #90AFF2 !important;
}
.darker-blue{
  background-color: #6E8FE3 !important;
  border-color: #6E8FE3 !important;
}
.color-blue-intense{
  color:#3A7BD8 !important;
}
.color-gold{
  color: #FFAE00 !important;
}
.roboto-black{
  font-family: 'Roboto Black' !important;
}
.roboto-light{
  font-family: 'Roboto Light' !important;
}
.roboto-regular{
  font-family: 'Roboto Regular';
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
#vpTitle{
  color: #3248A2;
  font-size: x-large;
}
#specs h3{
  color: #3248A2;
  font-family: 'Roboto Black';
  font-size: x-large;
}
@media only screen and (min-width: 1200px) {
  #forWhom h3{
    font-size: xx-large !important;
  }
  #specs h3{
    font-size: xx-large !important;
  }
  #specs h4{
    font-size: large !important;
  }

}
.icon{
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 50px;
  width: 50px !important;
}
.icon-1{
  background-image: url('../assets/specs/icons/1.png');
}
.icon-2{
  background-image: url('../assets/specs/icons/2.png');
}
.icon-3{
  background-image: url('../assets/specs/icons/3.png');
}
.icon-4{
  background-image: url('../assets/specs/icons/4.png');
}
.icon-5{
  background-image: url('../assets/specs/icons/5.png');
}
.icon-6{
  background-image: url('../assets/specs/icons/6.png');
}
.icon-8{
  background-image: url('../assets/specs/icons/8.png');
}
#reasonsToUse h4{
  color: #3248A2;
  font-family: 'Roboto Medium';
  font-size: larger;
}
dl dt span{
  display: block;
  background-image: url('../assets/check-30.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 30px;
  width: 30px !important;
}
.gradient{
  background: linear-gradient(to bottom, #445FD1 0%, #3248A2 100%);

}
.watchVideo{
  color: #3248A2 !important;
  background: transparent;
  border-color: #3248A2 !important;
  border-width: 3.5px !important;
  border-radius: 1.4rem !important;
  /* font-size: large !important; */
}
.watchVideo:hover{
  color: #ffffff !important;
  background:#3248A2 !important;
  border-color: #3248A2 !important;
}
.watchVideo:active{
  color: #ffffff !important;
  background:#3248A2 !important;
  border-color: #3248A2 !important;
  box-shadow: 0 0 0 0.25rem rgba(50, 72, 162,50%) !important;
}
.watchVideo:focus{
  box-shadow: 0 0 0 0.25rem rgba(50, 72, 162,50%) !important;
}

@media only screen and (min-width: 576px){
  #specs{
    overflow: hidden;
  }
  #specs .img-fluid{
    height: 340px;
    width: auto;
    max-width: none;
  }
  .direction-rtl{
    direction: rtl;
  }
  dl dt span{
    height: 25px !important;
    width: 25px !important;
  }
}

.bg-light-blue{
  background-color: #eef3ff;
}
.callToAction:hover{
  background: transparent !important;
  color:#3248A2 !important;
  border-color: #3248A2 !important;
}
.font-small{
  font-size: small;
}

.mastfoot{
  background-color: #464646;
}
.absolute-top{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
@media only screen and (min-width: 1200px) {
  .navbar.bg-light{
    background: transparent !important;
  }
  .text-block{
    max-width: 42rem;
  }
  #specs{
    overflow: hidden;
  }
  #specs .img-fluid{
    height: auto;
    width: auto;
    max-width: 100%;
  }
  .direction-rtl{
    direction: ltr;
  }
  .icon{
    height: 70px;
    width: 70px !important;
  }
  #CTA{
    height: 80vh;
  }
}
input{
  max-width: 20rem;
}



@media only screen and (max-width: 992px) {
  .videoModal .modal-dialog{
    max-width: none !important;
  }
}
/* Bootstrap related */
.fade{
  transition: opacity .15s linear !important;
}
.videoModal.modal.fade .modal-dialog{
  transition:transform .3s ease-out !important;
  /* transform:translate(0,-50px) !important; */
}
.navbar{
  z-index: 1;
}
/* Carousel */
/* Caption */
.caption {
  background: #FAFAFA;
  margin-top: 20px;
  padding: 10px;
  text-align: center;
  min-height: 100px;
}
.main-carousel img {
  display: block;
  height: 600px;
}
/* smaller, dark, rounded square */
.flickity-button {
  background: #333;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}
.flickity-button:hover {
  background: #F90;
}
/* icon color */
.flickity-button-icon {
  fill: white;
}
/* position outside */
.flickity-prev-next-button.previous {
  left: -70px;
}
.flickity-prev-next-button.next {
  right: -70px;
}
.flickity-prev-next-button {
  width: 100px;
  height: 100px;
}
.flickity-button-icon {
  fill: white;
}
#CarouselModal .modal-content .main-carousel .flickity-viewport{
  border-radius: 20px;
  overflow: hidden;
}
#CarouselModal .modal-content{
  border-radius: 20px;
  border: 3px solid #333;
  background:#FAFAFA;
}
#Carousel{
  border-radius: 20px;
}
.caption{
  border-radius: 20px;
}
#Carousel img {
  transition: width 2s, height 2s;
  transform: scale(0.8);
  filter: blur(5px);
  opacity: 0.7;
  -webkit-filter: blur(8px);
  transition: opacity 0.3s, transform 0.3s, filter 0.3s;
}
#Carousel img.is-selected {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
  -webkit-filter: blur(0px);
}
.flickity-page-dots{
  background: #FAFAFA;
}
.videoModal .modal-content{
  border-radius: 20px;
}
video{
  border-radius: 20px !important;
  border: 3px solid #333 !important;
}
@media only screen and (max-width: 992px) {
  #Carousel img{
    max-width: 100%;
    height: auto;
  }
  #CarouselModal .modal-dialog{
    max-width: 500px !important;
  }
  /* Caption overlay */
  .caption{
    font-size: medium !important;
    min-height: 40px;
    padding: 0;
    margin-top: -30px;
    margin-left: .2rem;
    margin-right: .2rem;
    margin-bottom: .2rem;
    z-index: 2;
  }
  .flickity-page-dots{
    display: none;
  }
}
@media only screen and (max-width: 992px){
  /* position arrows inside */
  .flickity-prev-next-button.previous {
    left: -110px;
  }
  .flickity-prev-next-button.next {
    right: -110px;
  }
}
@media only screen and (max-width: 576px){
  /* position arrows inside */
  .flickity-prev-next-button.previous {
    left: 0px;
  }
  .flickity-prev-next-button.next {
    right: 0px;
  }
  .flickity-prev-next-button {
    width: 40px;
    height: 40px;
  }
}

/* About us */
@media (min-width: 768px){
  .pb-md-11 .py-md-11 {
      padding-bottom: 6rem !important;
      padding-top: 6rem !important;
  }
  .mb-md-9{
    margin-bottom: 4rem!important;
  }
}
.py-8{
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.mb-7{
  margin-bottom: 2.5rem !important;
}
.CTAorange{
  color: white;
  background-color: #FD862D;
}
.CTAorange:hover{
  background: white !important;
  color:#FD862D !important;
  border-color: #FD862D !important;
}
.fadeIn {
    display: flex !important;
}
.grecaptcha-badge {
    visibility: hidden;
}

/* Testimonials slider */

/* Make sure Flickity container takes full width */
#testimonials-slider {
  width: 100%;
  /* Optional: max-width for slider */
  max-width: 1200px;
  margin: 0 auto; /* center horizontally */
}

/* Each slide (card-slider-item) should have consistent width and padding */
.card-slider-item {
    width: 325px;
    margin-right: 2rem; /* space between slides */
    box-sizing: border-box; /* include padding/border in width */
    outline: none; /* remove focus outline if undesired */
    cursor: grab; /* pointer cursor for draggable */
  }

.card-slider-item > .card {
  min-height: 300px; /* fixed width for each slide */
}

@media only screen and (min-width: 992px) {
  .card-slider-item {
    width: 500px;
    margin-right: 2rem; /* space between slides */
    box-sizing: border-box; /* include padding/border in width */
    outline: none; /* remove focus outline if undesired */
    cursor: grab; /* pointer cursor for draggable */
  }

  .card-slider-item > .card {
    min-height: 300px; /* fixed width for each slide */
  }
}
#testimonials .flickity-page-dots{
  background: #fff;
}
/*!* Optional: make last slide margin-right 0 so no extra space *!*/
/*.card-slider-item:last-child {*/
/*  margin-right: 0;*/
/*}*/

/* Styling for the card itself */
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 20px;
}

/* Make sure images are nicely rounded */
.card img.rounded-circle {
  border-radius: 50%;
  object-fit: cover;
}

/* Space between avatar and text */
.ml-9 {
  margin-left: 16px;
}

/* Text styling, adjust as needed */

blockquote {
  font-style: italic;
  margin: 1rem 0;
  color: #555;
}

/* Flickity overrides */

/* Remove Flickity's default outline on cell focus */
.flickity-slider:focus {
  outline: none;
}

/* Optional: change grab cursor on dragging */
.is-draggable {
  cursor: grab;
}
.is-draggable.is-pointer-down {
  cursor: grabbing;
}

img.logo-black {
  filter: brightness(0) invert(0);
}

/* Testimonials slider */


/* Social proof counter */
.counter-section i { display:block; margin:0 0 10px}
.counter-section span.counter { font-size:40px; color:#000; line-height:60px; display:block; letter-spacing: 2px}
.counter-title{ font-size:12px; letter-spacing:1px; text-transform: uppercase}
.counter-icon {top:25px; position:relative}
.counter-style2 .counter-title {letter-spacing: 0.55px; float: left;}
.counter-style2 span.counter {letter-spacing: 0.55px; float: left; margin-right: 10px;}
.counter-style2 i {float: right; line-height: 26px; margin: 0 10px 0 0}
.counter-subheadline span {float: right;}

.medium-icon {
    font-size: 40px !important;
    margin-bottom: 15px !important;
}

@media only screen and (min-width: 576px) {
  .log-counter {
    min-height: auto !important;
  }
}

@media only screen and (min-width: 1200px) {
  .log-counter {
    min-height: 40vh !important;
  }
}

@media only screen and (min-width: 1600px) {
  .log-counter {
    min-height: 30vh !important;
    padding-bottom: 100px;
  }
  .log-counter>.container {
    max-height: 20vh;
  }
}

.log-counter>.container {
  position: relative;
  /*background-image: url('../assets/counter_bg.png');*/
  /*background-repeat: no-repeat;*/
  /*background-position: center 30%; !* vertically and horizontally centered *!*/
  /*background-size: cover; !* makes sure it covers full width and height *!*/
  width: 100%;
}

.log-counter>.container::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(255, 255, 255, 0.2); /* grey with 50% opacity */
  pointer-events: none; /* allows clicks to go through */
  z-index: 1;
}

/* To keep your content visible above the overlay */
.log-counter > .container> .row {
  position: relative;
  z-index: 2;
}

.bg-glass {
  background: rgba(255, 255, 255, 0.5); /* white with 50% transparency */
  backdrop-filter: blur(10px); /* blurry background behind */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  border-radius: 0.5rem; /* rounded corners */
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle white border */
}

#sslSecuredBadge{
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Inter Black';
  font-size: 1rem;
  pointer-events: none;
  user-select: none;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.25);
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
  margin-right: 10px;
}


@media only screen and (min-height: 800px) {
  #sslSecuredBadge{
    bottom: 28vh;
  }
}



@media (min-width: 992px) {
  .w-lg-75 {
    width: 75% !important;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .w-md-100 {
    width: 100% !important;
  }
}

#turnstile-container{
  height: 65px !important;
  overflow: hidden;
}

.logo-labeled{
  max-width: 200px;
}
.modal{
  padding-right: 0!important;
}
.modal-open{
  padding-right: 0!important;
}