/* Set font to Montserrat */
* {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
  }
/* Set main font-size to all html */
html {
    font-size: 14px;
}
/* Set min width  */
html, body {
    min-width: 375px;
}
/* Set all links color, fill and decoration */
a {
    color: #14488a;
    text-decoration: none;
    fill: #14488a;
}
/* shadow on top */
.shadow-top {
    box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.055); 
}
/* Header logo */
.logo-img {
    width: 200px;
}
.logo-text {
    width: 200px;
    padding: 0px;
}

.logo-desc {
    font-size: 0.94rem;
    min-width: 200px;
    color: #14488a;
}

.nav {
    fill: #14488a;
}
.nav-link {
    font-size: 1.5rem;
    color: #14488a;
    font-weight: 600;
}
.nav-link:visited {
    color: #14488a;
}

.socials {
    fill: #14488a;
}

div#offcanvasTop {
    height: 220px;
}

.bg-primary {
    background-color: #14488a !important;
}

.btn-primary {
    --bs-btn-bg: #14488a;
    --bs-btn-border-color: #14488a;
    --bs-btn-hover-bg: #14488a;
    --bs-btn-hover-border-color: #14488a;
    --bs-btn-active-bg: #14488a;
    --bs-btn-active-border-color: #14488a;
    --bs-btn-disabled-bg: #14488a;
    --bs-btn-disabled-border-color: #14488a;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #14488a !important;
}

/* Vehicle */
.vehicle-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.vehicle-card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:.2s; }
.vehicle-card:hover { transform:translateY(-3px); box-shadow:0 4px 10px rgba(0,0,0,0.15); }
.vehicle-card img { width:100%; height:180px; object-fit:cover; display:block; }
.vehicle-info { background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.vehicle-title { font-size:1rem; font-weight:bold; margin-bottom:10px; }
.vehicle-meta { color:#555; margin-bottom:8px; }
.vehicle-price { font-size:1.2rem; font-weight:bold; color:#14488a; margin-top:10px; }

/* Contacts */
.popup__content {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
}
.popup__content {
    color: red;
}
.map-widget-user-maps-content-view {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
}

/* Media */

@media (max-width: 1399.98px) { .pb-wrap img { height:20px; } }
@media (max-width: 1199.98px) { .pb-wrap img { height:20px; } }
@media (max-width: 991.98px) { .pb-wrap img { height:14px; } }
@media (max-width: 767.98px) { .pb-wrap img { height:10px; } }
@media (max-width: 575.98px) { .pb-wrap img { height:10px; } }


@media (min-width: 1200px) {
    .pb-wrap img { height:24px; }
 }
@media (max-width: 992px) {
    .header-slogan {
        padding-left: 40px;
    }
    
}
@media (max-width: 768px) {
    div#offcanvasTop {
        height: auto;
        overflow-y: auto
    }
    
    .vehicle-card img { height:auto; }
}
@media (max-width: 576px) {
    .offcanvas-container {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
}


@-webkit-keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes puff-in-center {
    0% {
      -webkit-transform: scale(2);
              transform: scale(2);
      -webkit-filter: blur(4px);
              filter: blur(4px);
      opacity: 0;
    }
    100% {
      -webkit-transform: scale(1);
              transform: scale(1);
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }

.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}


.color-change-2x {
	-webkit-animation: color-change-2x 2s linear 1s alternate both;
	        animation: color-change-2x 2s linear 1s alternate both;
}

@-webkit-keyframes color-change-2x {
    0% {
      background-color: #ffffff !important;
      background: #ffffff !important;
    }
    100% {
      background-color: #14488a !important;
      background: #14488a !important;
    }
  }
@keyframes color-change-2x {
    0% {
      background-color: #ffffff !important;
      background: #ffffff !important;
    }
    100% {
      background-color: #14488a !important;
      background: #14488a !important;
    }
  }

  .color-change-once {
    animation: color-change-once 2s linear forwards;
}

@keyframes color-change-once {
    from { background-color: #ffffff; }
    to   { background-color: #14488a; }
}

/* Optional WebKit support */
@-webkit-keyframes color-change-once {
    from { background-color: #ffffff; }
    to   { background-color: #14488a; }
}

.text-blue-to-white {
    animation: blue-to-white 1s linear forwards;
}

@keyframes blue-to-white {
    from { color: #14488a; }
    to   { color: #ffffff; }
}

@-webkit-keyframes blue-to-white {
    from { color: #14488a; }
    to   { color: #ffffff; }
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
	        animation: swing-in-top-fwd 2s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
}

@-webkit-keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }
  @keyframes swing-in-top-fwd {
    0% {
      -webkit-transform: rotateX(-100deg);
              transform: rotateX(-100deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateX(0deg);
              transform: rotateX(0deg);
      -webkit-transform-origin: top;
              transform-origin: top;
      opacity: 1;
    }
  }

  .slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
  @keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
  }

  .scale-in-ver-center {
	-webkit-animation: scale-in-ver-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: scale-in-ver-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

@-webkit-keyframes scale-in-ver-center {
    0% {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      opacity: 1;
    }
  }
  @keyframes scale-in-ver-center {
    0% {
      -webkit-transform: scaleY(0);
              transform: scaleY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleY(1);
              transform: scaleY(1);
      opacity: 1;
    }
  }

  .slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
	        animation: slide-in-elliptic-top-fwd 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s both;
}

@-webkit-keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
  }
  @keyframes slide-in-elliptic-top-fwd {
    0% {
      -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0);
              transform: translateY(-600px) rotateX(-30deg) scale(0);
      -webkit-transform-origin: 50% 100%;
              transform-origin: 50% 100%;
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0) rotateX(0) scale(1);
              transform: translateY(0) rotateX(0) scale(1);
      -webkit-transform-origin: 50% 1400px;
              transform-origin: 50% 1400px;
      opacity: 1;
    }
}

/* Dashboard */
#preview { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.vehicle-image-card { flex:0 0 calc(25% - 12px); min-width:120px; cursor:grab; }
.card { border-radius:8px; overflow:hidden; position:relative; background:#fff; }
.card-img-top { width:100%; height:auto; object-fit:cover; -webkit-user-drag:none; touch-action: manipulation; /*user-drag: none;*/}
.order-badge { 
  position:absolute; 
  top:6px; 
  left:6px; 
  z-index:5;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 12px;
}
.remove-image { position:absolute; top:6px; right:6px; z-index:6; }

.autocomplete-list {
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
  }
.autocomplete-list .suggestion:hover {
    background-color: #14488a;
    color:#fff;
  }
.autocomplete-list .suggestion:hover .autocomplete-image-container {
    background-color: #fff;
    border-radius: 8px;
}

.progress1 {
    background-image: url('/assets/img/logo_text_400x65_.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.progress-bar1 {
    --bs-progress-bar-color: #fff;
    --bs-progress-bar-bg: #14488a;
    background-image: url('/assets/img/logo_text_400x65_w_.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.progress-bar1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #14488a; /* optional */
    z-index: 0;
}

.progress-container {
    position: relative;
    width: 100%;
    height: 28px;
  }
  
  /* Optional blue bar moving with progress */
  .progress-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #14488a;
    z-index: 0;
    transition: width 0.4s linear;
  }
  
  /* Wrap each image in a div that spans full width */
  .pb-wrap {
    position: absolute;
    /*top: 50%;*/
    /*left: 50%;*/
    width: 100%;   /* full width of container */
    height: 100%;
    display: flex;
    justify-content: center; /* center image horizontally */
    align-items: center;     /* center image vertically */
    pointer-events: none;
    z-index: 1;
  }
  
  /* White text on top */
  .white-text {
    z-index: 2;
    transition: clip-path 0.2s linear;
  }
  
  /* Minimal styling for images inside wrap */
  .pb-wrap img {
    max-width: 100%;
    max-height: 100%;
  }