body {
  padding: 0;
  box-sizing: border-box;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 8px;
  font-size: 16px;
  line-height: 29px;
}
.nav-links li {
  display: flex;
  align-items: center;
}
.nav-links li a {
  text-decoration: none;
  color: rgba(18,17,39,0.72);
  font-weight: 400;
  font-size: 16px;
}

/* Slick slider: show list immediately */
.slick-loading .slick-list {
  visibility: visible !important;
}

/* Number counters (above-the-fold) */
.numbers-second {
  background-color: #fff;
  box-shadow: 0px 20px 50px 0px #1211271F;
  border-radius: 24px;
  margin-top: -24px;
  padding: 24px;

  /* REMOVE flex */
  display: block;
}
.numbers-second .yellow-container {
  background: #ffd5001F;
  height: 100%;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 42px;
}
.numbers-second .yellow-container span {
  font-family: Poppins;
  font-size: 24px;
  font-weight: 700;
  line-height: 33.6px;
  color: #121127;
}
.numbers-second .count {
  font-family: Poppins;
  font-size: 48px;
  font-weight: 700;
  line-height: 67.2px;
  color: #121127;
}
.numbers-second .property {
  font-family: Poppins;
  font-size: 14px;
  font-weight: 600;
  line-height: 25.2px;
  color: rgba(18,17,39,.56);
}

/* FORCE 4-in-a-row for this counters row (desktop), stack on mobile */
.counters .numbers-second .row{
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 768px){
  .counters .numbers-second .row > [class*="col-"]{
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* mobile: each takes full width */
@media (max-width: 767px){
  .counters .numbers-second .row > [class*="col-"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

model-viewer {
    width: 100%;
    /* height: 500px; */
    margin: 0 auto;
    height: 264px;
}

.no-scroll {
    overflow: hidden !important;
}

/* Mobile menu styles */
.mobile-menu {
    display: none;
    position: absolute;
    top: 96px; /* Adjust according to your header height */
    right: 0;
    width: 100%;
    max-width: 300px; /* Adjust the width as needed */
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    padding: 20px;
    border-radius: 8px;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mobile-menu .nav-item {
    margin-bottom: 16px;
}

.mobile-menu .nav-link {
    text-decoration: none;
    color: rgba(18, 17, 39, 0.72);
    font-weight: 400;
    font-size: 16px;
    display: block;
}

.mobile-menu .btn-cta {
    display: block;
    margin-top: 20px;
}

/* Show mobile menu on button click */
@media (max-width: 1024px) {
    .navbar-toggler.collapsed + .mobile-menu {
        display: block;
    }
    
    /* Hide the default navbar on mobile */
    #navbarNav {
        display: none !important;
    }

    .nav-links{
        gap: 0 !important;
    }
}
/* ======================== */

.cta-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(22px, 4vw, 32px);
    line-height: clamp(30px, 5vw, 44.8px);
    font-weight: 700;
    text-align: left;
}

.cta-description {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: rgba(18, 17, 39, 0.48);
}
#navbarNav .btn-cta {
    margin-left: 15px;
}

.btn-cta {
    font-family: 'Poppins', sans-serif;
    line-height: 29px;
    background-color: #ffd500 !important;
    color: #000 !important;
    border: none;
    padding: 8px 24px !important;
    /* margin-left: 15px; */
    cursor: pointer;
    font-weight: 500;
    font-size: 14px !important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 24px;
}

#i-want-offer .btn-cta {
    height: 54px;
}

.btn-contact-us {
    height: 54px;
}

.contact-btn {
  background: #007bff;
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-contact-us:hover {
  background: #0056c7;
}

.btn-contact-us .arrow {
  font-size: 1.3rem;
  transition: transform 0.3s;
  margin-left: 8px;
}

.btn-contact-us:hover .arrow {
  transform: translateX(4px);
}

.arrow-icon {
    width: 18.33px;
    height: 10px;
    margin-left: 10px;
    /* Adjust spacing between text and arrow */
}

/* Hero CTA – bendrai ir button, ir a */
.button-blue-custom,
.button-blue-custom:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #0085ff;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.button-blue-custom:hover,
.button-blue-custom:focus-visible {
  background: #006ed0;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0,133,255,.25);
}


.btn-white-secondary,
.btn-white-secondary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: #fff;
  color: #081b33;
  border: 1px solid rgba(8,27,51,.1);
  border-radius: 14px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background .15s ease, border .15s ease;
}

.btn-white-secondary:hover,
.btn-white-secondary:focus-visible {
  background: rgba(255,255,255,.85);
  border-color: rgba(8,27,51,.15);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
}

#simple-and-fast {
    margin-bottom: 96px;
}

#simple-and-fast .header {
    border-bottom: 1px solid #1211271F;
    margin-bottom: 48px;
}

#card-solutions {
    margin-bottom: 96px;
    padding-top: 96px;
}

#card-solutions .header {
    border-bottom: 1px solid #1211271F;
    margin-bottom: 48px;
}

#card-calculator {
    margin-bottom: 96px;
    padding-top: 96px;
}

#card-calculator .header {
    border-bottom: 1px solid #1211271F;
    margin-bottom: 48px;
}

#hardware {
    height: 791px;
    background: url("/cdn-cgi/image/format=auto,w=960/assets/landing/hardware.png") no-repeat center center;
    background-size: contain;
    padding-top: 96px;
    /* margin-bottom: 96px; */
}

#hardware .heading {
    font-family: Poppins;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #fff;
}

#hardware .subheading {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    line-height: 32.4px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FFFFFFCC;
}

.slider {
    overflow: hidden;
    height: 796px;
    margin-bottom: 96px;
}

.arrow-left {
    left: calc(100vw / 2 - 1316px / 2 - 20px + 55px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 2;
}

.arrow-right {
    right: calc(100vw / 2 - 1316px / 2 - 20px + 55px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    z-index: 2;
}

/* 1) Un-center the dots container */
.app-slider .slick-dots {
  position: absolute;    /* so we can nudge it */
  bottom: 96px;          /* your existing vertical position */
  transform: none;       /* kill the translateX(-50%) */
  padding-left: 0;       /* no extra padding inside */
  display: flex;         /* line up the dots in a row */
  gap: 0.5rem;           /* optional spacing between dots */
}

/* 2) Your previous circle styling */
.app-slider .slick-dots li button:before {
  content: '';
  display: block;
  background: #ddd;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.app-slider .slick-dots li.slick-active button:before {
  background: #006AA7;
}

/* 3) If you need to tweak for mobile-center, you can re-apply centering with a media-query */
@media (max-width: 767px) {
  .app-slider .slick-dots {
    justify-content: center;
    margin: 1.5rem 0 0;
    left: auto;
    right: auto;
  }
}

/* DESKTOP: align with paragraph start */
@media (min-width:768px){
  /* if your slide uses .container-md (Bootstrap’s 720px) */
  .app-slider > .slick-dots{
    left: calc((100vw - 720px)/2 + 118px);
  }
}

/* OPTIONAL – only if your slide container grows at ≥1200px (you said 1152px) */
@media (min-width:1200px){
  .app-slider > .slick-dots{
    left: calc((100vw - 1152px)/2 + 118px);
  }
}

/* ---- Types cards (isolated BEM names) ---- */
.types-cards{ margin-top:32px; }
.type-card{ display:block; text-decoration:none; color:inherit; outline:0; }

.types-cards .row { --bs-gutter-y: 2.5rem; }  /* try 3rem if you want more */

/* keep titles to 2 lines, add ellipsis */
.types-cards .type-card__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* keep the blurb to 3 lines */
.types-cards .type-card__excerpt{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.type-card__inner{
  background:#fff;
  border-radius:20px;
  border:2px solid transparent;
  box-shadow:
  0 -4px 12px -6px rgba(0,0,0,0.08),
  0 18px 46px -28px rgba(0,0,0,.25);
  transition:border-color .2s, box-shadow .2s, transform .2s;
  height:100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* === CARD MEDIA: cross-browser safe === */
.types-cards .type-card__media{
  /* tweak this to change the white gap on top */
  --media-top-gap: 12px;

  /* the card’s visual box */
  aspect-ratio: 4 / 3;
  padding: var(--media-top-gap) 16px 0px;  /* top gap + side/bottom padding */
  border-radius: 18px 18px 0 0;

  /* robust centering that works the same in Chrome & Safari */
  display: grid;
  place-items: center;

  /* absolutely prevent spill */
  overflow: hidden;

  /* fix flex/grid min-content quirks in Chrome/Safari */
  min-width: 0;
  min-height: 0;
}

/* keep the bitmap contained, never crop, never overflow */
.types-cards .type-card__media img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;   /* whole image visible inside the box */
  display: block;

  /* guards for flex/grid shrink behavior */
  min-width: 0;
  min-height: 0;
}

/* IMPORTANT: remove any earlier rules for .type-card__media img like:
   height:100%; width:auto; max-height:none;  — they cause the Chrome overflow */


/* Optional tweaks */
@media (max-width: 575.98px){
  .types-cards .type-card__media{ aspect-ratio: 1 / 1; padding: 10px; }
}
@media (min-width: 1200px){
  .types-cards .type-card__media{ aspect-ratio: 3 / 2; }
}

.type-card__body{ padding:0px 22px 22px; }
.type-card__title{ font-size:1.6rem; font-weight:700; margin:2px 0 10px; }
.type-card__tags{ list-style:none; padding:0; margin:0 0 12px; display:flex; gap:8px; flex-wrap:wrap; }
.type-card__tags li{
  font-size:.9rem; color:#52607a;
  background:#eef3fb; border:1px solid #e2ebf9; border-radius:10px; padding:6px 10px;
}
.type-card__excerpt{ color:rgba(18,17,39,.72); margin:0; }

/* Hover/focus ring like your example */
.type-card:hover .type-card__inner,
.type-card:focus-visible .type-card__inner{
  border-color:rgb(0, 133, 255);
  box-shadow:0 20px 54px -26px rgba(10,102,194,.45);
}
.type-card:hover .type-card__inner{ transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){ .type-card__inner{ transition:none; } }

.type-card__price-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: rgb(255, 213, 0);
  color: #000;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* FAQ */
.faq-section {
  padding: 3rem 1rem;
  background: inherit;
}

.faq-heading {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}

.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.faq-question {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit; /* neutral by default */
}

.faq-question .chevron {
  transition: transform 0.3s ease, color 0.2s ease;
  font-size: 1.2rem;
  margin-left: 1rem;
  color: inherit;
}

.faq-item.active .faq-question {
  color: rgb(0, 133, 255);
}

.faq-item.active .faq-question .chevron {
  transform: rotate(180deg);
  color: rgb(0, 133, 255);
}

.faq-answer {
  display: none;
  padding: 0 1rem 1rem;
  font-size: 1rem;
  color: #333;
}

.faq-item.active .faq-answer {
  display: block;
}

/* Desktop-only hover (devices that actually support hover) */
@media (hover: hover) and (pointer: fine) {
  .faq-question:hover {
    color: rgb(0, 133, 255);
  }
  .faq-question:hover .chevron {
    color: rgb(0, 133, 255);
  }
}

#plans-pricing {
    margin-bottom: 96px;
    padding-top: 96px;
}

#plans-pricing .header {
    border-bottom: 1px solid #1211271F;
    margin-bottom: 90px;
}

.pricing-block {
    padding: 24px 28px;
    gap: 16px;
    border-radius: 16px;
    /* border: 1px solid #DBDBDB; */
    box-shadow: 0px 1px 6px 0px #12112714;
    
    background-color: white;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: .3s all;
}

.pricing-block.active {
    /* border: 1px solid #006AA7; */
    /* background: #FAFBFD; */
    box-shadow: 0px 20px 50px 0px #1211271F;
}

.pill-btn {
    background: #FFD500;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #121127;
}

.p-pricing {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 25.2px;
    text-align: left;
    color: rgba(18, 17, 39, 0.48);
    margin-bottom: 24px;
}

.pricing-item {
    display: flex;
    height: 184px;
    background-color: white;
    border-radius: 12px;
    width: 100%;
    padding: 24px 32px 24px 24px;
    gap: 24px;
    scale: 1;
    transition: all 0.1s;
    position: relative;
    box-shadow: 0px 1px 6px 0px #12112714;
    transition: .3s all;
    /* border: 1px solid #DBDBDB; */
}

.pricing-item.active {
    /* border: 1px solid #006AA7; */
    /* background: #EBEFF6; */
    box-shadow: 0px 20px 50px 0px #1211271F;
    z-index: 1;
}

.pricing-item-img-container {
    width: 160px;
    height: 100%;
    position: relative;
    cursor: pointer;
    border: 1px solid #1211271F;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.product-best-offer {
    background-color: #006AA7;
    padding: 7px 28px;
    border-radius: 6px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.pricing-item-img-container:hover .zoom-icon path {
    fill: #006AA7;
}

.pricing-item-img-container .best-offer-badge {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    background-color: #006AA7;
    font-family: Poppins;
    font-size: 10px;
    font-weight: 500;
    line-height: 12px;
    text-align: center;
    text-decoration-skip-ink: none;
    color: #fff;
    border-radius: 0px 0px 8px 0px;
    /* width: 64px; */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;

}

.pricing-item .prod-img {
    width: 100%;
    object-fit: cover;
    /* height: 100%; */
    /* height: 136px; */
}

.pricing-item .zoom-icon {
    position: absolute;
    top: 6px;
    right: 6px;
}

.item-details {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-item .item-description {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    color: rgba(18, 17, 39, 0.48);
}

.pricing-item .item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pricing-item .btn-rent {
    height: 40px;
    border-radius: 4px;
    border: 1px solid #CED7DD;
    background-color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: rgba(18, 17, 39, 0.5);
    cursor: pointer;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pricing-item .btn-rent .checker {
    border: 1px solid #ABBECA;
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.pricing-item .btn-rent.active {
    border: 1px solid rgba(0, 106, 167, 1);
    color: rgba(0, 106, 167, 1);
}

.pricing-item .btn-rent.active .checker {
    border: 5px solid #006AA7;
}

/* .pricing-item .btn-rent.active::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 5px solid rgba(0, 106, 167, 1);
    border-radius: 50%;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
} */

.cta-button {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    background: rgba(18, 17, 39, 0.12);
    color: rgba(18, 17, 39, 1);
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    opacity: 1;
    color: rgba(18, 17, 39, 1);
    margin-top: auto;
}

.cta-button:disabled {
    opacity: 0;
}

.cta-button:hover {
    background: rgba(0, 106, 167, 1);
    color: #fff;
}

.text-pricing {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-pricing h3 {
    font-weight: bold;
}

#cta-button-blue {
    width: 456px;
    height: 52px;
    border-radius: 8px;
    
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    opacity: 1;
    margin-bottom: 48px;
    color: white;
}

.modal .modal-md {
    width: 468px;
}

.modal-inner {
    min-height: 200px;
    position: relative;
    padding: 32px 36px;

    /* width: 468px; */
}

.modal-inner .model-container {
    margin-left: -36px;
    margin-right: -36px;
}

.modal-inner .title {
    font-family: Poppins;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272D4E;
}

.modal-inner .description {
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #5B6182;
    width: 100%;
    margin-bottom: 16px;
}

.modal-header-form .close-modal-btn {
    position: relative;
    right: 0px;
    top: 0px;
}

.modal-header-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E7E7E7;
    padding-bottom: 16px;
}

.close-modal-btn {
    position: absolute;
    position: absolute;
    right: 24px;
    top: 24px;
    cursor: pointer;
}

#modal-form .subtitle {
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #5B6182;
}

#modal-form .text {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272D4E;
}

.selected-option-container {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E7E7E7;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272D4E;
    margin-bottom: 8px;
    margin-top: 8px;
}

.form {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form input, .form textarea {
    border: 1px solid #C3C3C3;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    /* color: #95989A; */
    border-radius: 4px;
}

.form input::placeholder, .form textarea::placeholder {
    color: #95989A;
}

.form input.has-error, .form textarea.has-error {
    border-color: red;
}

.error-message {
  color: #dc3545;          /* Bootstrap-style red */
  font-size: 0.875rem;     /* Slightly smaller than input text */
  margin-top: 4px;
  display: block;
}

.form-button {
    /* width: 160px; */
    height: 40px;
    background: rgb(0, 133, 255);
    color: #fff;
    border: none;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 28px;
}

.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.modal-backdrop {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 1040 !important;
}

.spinner-border {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 0.15em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}

@keyframes spinner-border {
  100% { transform: rotate(360deg); }
}

.navbar-toggler {
    border: none;
}

#pricing-list {
    width: 100%;
    list-style: none;
    padding-left: 0px;
}

#pricing-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    color: rgba(18, 17, 39, 1);
    margin-bottom: 12px;
    /* Distance between rows */
}

#pricing-list li.grey {
    color: rgba(18, 17, 39, 0.3);
}

#pricing-list li .icon {
    margin-left: 10px;
    width: 20px;
    height: 20px;
}

#slides-of-proposition {
    height: 796px;
    padding-left: 118px;
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
}

.slide-container {
    background: linear-gradient(to left, rgba(255, 241, 241, 1), rgba(233, 248, 251, 1));
    border-radius: 15px;
}

#main-text-block {
    font-family: Poppins;
    margin-top: 48px;
    position: relative;
}

.arrow-features {
    position: absolute;
    top: -48px;
    right: -40px;
    width: 183px;
}

.mobile-navbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: #fff;
    z-index: 2;
    height: 0px;
    opacity: 0;
    transition: .2s all;
}

.show .mobile-navbar {
    height: 100vh;
    opacity: 1;
}

.mobile-navbar .navbar-toggler {
    width: auto;
    margin-left: auto;
    margin-top: 24px;
    margin-right: 16px;
}

.mobile-navbar .navbar-toggler img {
    width: 24px;
    height: 24px;
}

.navbar-toggler {
    
}

.navbar-toggler .icon-bar {
    
}

.mobile-navbar li {
    width: 100%;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-navbar li a {
    font-size: 26px;
    font-weight: 500;
    color: #272d4e;
    text-decoration: none;
}

/* make mobile CTA look like the real yellow button */
.mobile-navbar #form-btn-nav-mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #ffcd00;                  /* same yellow as desktop */
  color: #101727;                        /* whatever your header BTN text is */
  border: none;
  border-radius: 14px;                   /* or 10px if that's your desktop one */
  padding: 12px 22px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  width: auto;
  box-shadow: 0 10px 25px rgba(255, 205, 0, .35);
  text-decoration: none;
}

/* prevents menu's generic <a> hover from overriding it */
.mobile-navbar #form-btn-nav-mobile:hover,
.mobile-navbar #form-btn-nav-mobile:focus {
  background: #ffd620;
  color: #101727;
}

.mobile-navbar #form-btn-nav-mobile {
  margin-top: 1rem;
  align-self: flex-start;  /* so it’s not full-width */
}

.heading {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(26px, 5vw, 40px);
    line-height: clamp(34px, 6vw, 56px);
    font-weight: 700;
    text-align: left;
}

#header-title-block .heading-slider {
    font-family: Poppins;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
}

#header-title-block {
    padding-bottom: 48px;
    /* border-bottom: 1px solid rgba(18, 17, 39, 0.12); */
}

.mobile-plan-switcher {
    position: relative;
    height: 60px;
    border: 1px solid #1211271F;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    padding: 4px;
}

.mobile-switch-button {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1211274D;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.mobile-switch-button.active {
    color: #fff;
}

.mobile-switch-badge {
    position: absolute;
    width: 50%;
    background-color: #006AA7;
    top: 4px;
    bottom: 4px;
    border-radius: 12px;
    left: 0;
    transition: left .2s;
}

.mobile-switch-badge.journal {
    left: 0;
}

.mobile-switch-badge.professional {
    left: 50%;
}

.slide-line {
    height: 1px;
    background-color: rgba(18, 17, 39, 0.12);
    width: 150%;
}

.app-slide {
    background: linear-gradient(to left, rgba(255, 241, 241, 1), rgba(233, 248, 251, 1));
    border-radius: 15px;
    padding-left: 118px;
    height: 796px;
    padding-top: 96px;
}

.slick-slide {
    height: auto;
}

#plans-pricing .heading {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
    margin-bottom: 24px;
}

.sticky-product {
    position: sticky;
    bottom: 0;
    border-top: 1px solid #DBDBDB;
    box-shadow: 0px -8px 8px 0px #00000005;
    background-color: #fff;
    z-index: 5;
}

.sticky-product-img {
    width: 54px;
    height: 36px;
    border: 1px solid #006AA7;
    border-radius: 4px;
}

.sticky-product-img img {
    width: 100%;
    height: 100%;
}

.sticky-product-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #5B6182;
    
}
.sticky-product-desc {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #272D4E;
    width: auto;
}
.sticky-product-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #006AA7;
}

#sticky-product-button {
    height: 40px;
    background: #006AA7;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0px 28px;
}

.success-tile {
    padding: 96px 0px;
}

.success-tile .success-img {
    height: 140px;
    width: auto;
    margin: auto;
    display: block;
}
.success-tile .success-text {
    text-align: center;
    color: #0085ff;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 26px;
    margin-top: 20px;
}

#pricing-button-1,
#pricing-button-2,
#pricing-button-3,
#pricing-button-4,
#simple-button {
    filter: brightness(1);
    transition: .2s all;
}

#pricing-button-1:hover,
#pricing-button-2:hover,
#pricing-button-3:hover,
#pricing-button-4:hover,
#sticky-product-button:hover {
    filter: brightness(0.85);
}

#form-btn-nav-mobile,
#form-btn-hero,
#form-btn-nav-desktop,
#form-btn-additional1,
#form-btn-additional2 {
    filter: brightness(1);
    transition: .2s all;
}

#form-btn-nav-mobile:hover,
#form-btn-hero:hover,
#form-btn-nav-desktop:hover,
#form-btn-additional1:hover,
#form-btn-additional2:hover {
    filter: brightness(0.85);
}

#form-btn{
    filter: brightness(1);
    transition: .2s all;
}

#form-btn:hover {
    filter: brightness(0.85);
}

#form-btn-mobile{
    filter: brightness(1);
    transition: .2s all;
}

#form-btn-mobile:hover {
    filter: brightness(0.85);
}

#simple-button:hover {
    border-color: rgba(0, 133, 255);
    color: rgba(0, 106, 167, 1);
}

@media (min-width: 1200px) {
    .container{
        max-width: 1152px;
    }
}


@media (max-width: 1024px) {

    #plans-pricing .heading {
        font-size: 24px;
        margin-bottom: 12px;
    }

    #plans-pricing {
        padding-top: 48px;
    }

    .slide-line {
        width: 100%;
        margin-bottom: 38px;
    }
    

    #hardware {
        background-size: cover;
        background-image: url("/cdn-cgi/image/format=auto,w=640/assets/landing/hardware-mobile.png");
        height: 830px;
        margin-bottom: 96px;
    }

    .header-style-two {
        padding-bottom: 32px;
    }

    .slide-container {
        border-radius: 0;
    }

    #slides-of-proposition {
        padding-left: 0px;
        height: 100%;
        /* padding-top: 96px; */
        /* padding-bottom: 96px; */
    }

    /*#header-title-block {
         margin-bottom: 24px; 
    }*/

    #header-title-block .heading-slider {
        font-size: 24px;
        line-height: 33.6px;
    }

    .slide-container {
        /* height: 1300px; */
        padding-top: 96px;
        padding-bottom: 16px;
        height: 100%;
    }

    .app-slide {
        padding-bottom: 0;
        border-radius: 0;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 25px;
        padding-right: 25px;
        height: unset;
        padding-top: 48px;
        min-height: 100%;
    }

    /* .slider {
        height: 100%;
    } */

    #image-block img {
        width: 350px;
        margin-left: auto;
        margin-right: auto;
        height: 487px;
        object-fit: contain;
    }

    #main-text-block {
        margin-top: 0px;
        height: 380px;
    }

    .arrow-left {
        left: 16px;
        top: 45%;
    }

    .arrow-right {
        right: 16px;
        top: 45%;
    }

    .slick-dots {
        top: 60%;
        padding-left: 0;
        text-align: center;
    }

    .pricing-item .btn-rent {
        font-size: 14px;
    }

    .pricing-item {
        flex-direction: column;
        height: auto;
    }

    .pricing-item-img-container {
        width: 100%;
    }

    .item-details {
        gap: 12px;
    }

    .pricing-item .item-actions {
        gap: 8px;
    }

    .pricing-item .btn-rent {
        flex: 1;
    }

    #plans-pricing .header {
        margin-bottom: 16px;
    }

    #sticky-product-button {
        width: 100%;
    }

    .sticky-product-desc {
        width: 100%;
    }
}

/* Base styles for stats-container */
.stats-container {
    display: none;
    /* Hide by default */
    top: 0;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
    margin: 20px;
    margin-top: -320px;
    width: 95%;
    background-color: white;
    z-index: 1000;
    /* Ensure it appears above other content */
}

.stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}

.stats-number-img {
    max-width: 100%;
    height: auto;
}

.stats-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 25.2px;
    text-align: center;
    color: rgba(18, 17, 39, 0.56);
    margin-top: 8px;
}

.highlight-message {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #121127;
    background-color: rgba(255, 213, 0, 0.12);
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    width: 100%;
}

#simple-and-fast .footer-line {
    margin-bottom: 48px;
    margin-left: 25px;
    margin-right: 25px;
}

#card-solutions .footer-line {
    margin-bottom: 48px;
    margin-left: 25px;
    margin-right: 25px;
}

#card-calculator .footer-line {
    margin-bottom: 48px;
    margin-left: 25px;
    margin-right: 25px;
}

.frame10 {
    width: 100%;
    height: auto;
    gap: 48px;
    position: relative;
    top: -50px;
    z-index: 1;
}


.subheading {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 29px;
    text-align: left;
    color: #6c757d;
    /* Gray color for subheading */
    margin-bottom: 48px;
}

.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    /* Add gap between the steps */
}

.step {
    width: 360px;
    height: auto;
    gap: 16px;
    opacity: 1;
    /* Ensure steps are visible */
    text-align: left;
}

.circle-number {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 106, 167, 0.12);
    color: #006aa7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 24px;
}

.step-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #121127;
    margin-bottom: 24px;
    /* Space between the heading and the description */
}

.step-description {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: rgba(18, 17, 39, 0.56);
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

}

.hardware-content {
    width: 1128px;
    height: auto;
    position: relative;
    top: 96px;
    left: 156px;
    gap: 48px;
    color: #ffffff;
    /* Adjust this color to match the text color */
}

.hardware-heading {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    text-align: left;
    color: #ffffff;
    /* Adjust this color to match the text color */
}

.hardware-subheading {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 29px;
    text-align: left;
    color: #e5e5e5;
    /* Adjust this color to match the text color */
}

.hardware-description {
    width: 360px;
    height: auto;
    position: absolute;
    right: 7%;
    transform: translateY(-50%);
    /* Center vertically */
    padding: 20px;
    border-radius: 6px;
}

.hardware-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    color: #ffffff;
}

.hardware-text {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: #ffffff;
}

#custom-information-block {
    /* background-color: rgba(255, 255, 255, 0.8); */
    margin-bottom: 96px;
}

#custom-information-block .icon {
    margin-bottom: 24px;
}

#custom-information-block .section-title {
    margin-bottom: 16px;
    
}

#custom-information-block .description {
    line-height: 25.2px;
    font-size: 14px;
    font-weight: 400;
}

#custom-information-block .icon img { width:60px; height:60px; }

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 22.4px;
    text-align: left;
    color: #121127;
}

.section {
    width: 1128px;
    height: auto;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.content-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 456px;
}

.icon {
    width: 48px;
    height: 48px;
}

.description {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: left;
    color: rgba(18, 17, 39, 0.56);
}

.main-description {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: #121127;
    margin-bottom: 20px;
    /* Adjust space between text and button */
}

.animated-digit {
    color: #006AA7;
}

#footer-skandi-fleet {
    background: linear-gradient(to left, rgba(255, 249, 241, 1), rgba(233, 248, 251, 1));
    width: 100%;
}

.footer-container {
    display: flex;
    justify-content: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 156px;
}

.footer-block-first {
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 70px;
}

.footer-block {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 70px;
}

.footer-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: left;
    margin-bottom: -8px;
}

.footer-text {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    text-align: left;
    color: rgba(18, 17, 39, 0.56);
}

.footer-category {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 23.8px;
    letter-spacing: 0.8px;
    text-align: left;
    color: rgba(18, 17, 39, 0.4);
}

.footer-list {
  list-style: none;      /* keep no bullets */
  padding: 0;
  margin: 0;
}

.footer-list li + li {
  margin-top: 10px;      /* spacing between rows */
}

.footer-list li a {
  display: block;        /* ensures the spacing applies even on multi-line */
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;      /* taller lines for readability */
  color: rgba(18, 17, 39, 0.72);
  text-decoration: none;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.footer-list li a:hover {
  color: #121127;        /* your hover color */
}

.footer-icons img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.footer-line {
    background: rgba(18, 17, 39, 0.12);
    max-width: 1128px;
    height: 1px;
}

.footer-line-web {
    background: rgba(18, 17, 39, 0.12);
    width: 100%; 
    height: 1px;
    margin: 24px auto; 
}

.footer-bottom {
    text-align: center;
    padding: 0px 0px 24px 0px;
    width: 100%;
}

.footer-bottom p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
    color: rgba(18, 17, 39, 0.56);
    margin: 0;
}

#plans-pricing .frame10 {
    width: 100%;
    height: auto;
    gap: 48px;
    position: relative;
    z-index: 1;
}

#plans-pricing .frame10::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
    position: absolute;
    bottom: -48px;
    left: 0;
}

#plans-pricing .subheading {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: #6c757d;
    /* Gray color for subheading */
    margin-bottom: 49px;
}

#pricing-blocks {
    display: flex;
    justify-content: space-between;
    width: 1128px;
    height: auto;
    margin: auto;
    margin-bottom: 96px;
}

#price-item-first {
    margin-top: 200px;
}

.pricing-item .item-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    color: rgba(18, 17, 39, 1);
}

/* .pricing-item .btn-rent::before,
.pricing-item .btn-buy::before {
    content: '';
    width: 15px;
    height: 15px;
    border: 1px solid rgba(18, 17, 39, 0.12);
    border-radius: 50%;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
}

.pricing-item .btn-rent:active::before,
.pricing-item .btn-buy:active::before {
    background-color: black;
} */

.btn-buy-updated {
    width: auto;
    height: 40px;
    padding: 8px 20px 8px 28px;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid rgba(0, 106, 167, 1);
    background-color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: rgba(0, 106, 167, 1);
    margin-right: 20px;
    cursor: pointer;
    position: relative;
}

#plans-and-pricing-buttons {
    display: none;
}

#pricing-second-mobile {
    display: none;
}

.subheading-slider {
    /* margin-left: 118px; */
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 28.8px;
    text-align: left;
    color: rgba(18, 17, 39, 0.56);
}

#main-text-block .main-heading {
    font-family: Poppins;
    font-size: 24px;
    font-weight: 700;
    line-height: 33.6px;
    text-align: left;
}

#main-text-block .main-description {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    line-height: 32.4px;
    text-align: left;
    color: rgba(18, 17, 39, 0.56);
}

.underline-custom {
    width: 100%;
    height: 1px;
    background: rgba(18, 17, 39, 0.12);
    position: relative;
    /* margin-left: 118px; */
    /* top: 49px; */
}

.display-flex-column {
    flex-direction: row-reverse;
}

.social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Makes the list horizontal */
    gap: 15px; /* Adds space between icons */
    align-items: center; /* Aligns icons properly */
}

.social-list li {
    display: inline-block; /* Ensures items stay in one line */
}

.social-list a {
    font-size: 24px; /* Adjust icon size */
    color: rgb(95, 128, 174); /* Custom blue color */
    transition: color 0.3s; /* Smooth hover effect */
    text-decoration: none;
}

.social-list a:hover {
    color: rgb(16, 114, 206); 
    }
/* ===== Work Time Calculator (scoped) ===== */
.wtc{--wtc-bg:#fff;--wtc-soft:#f5f7fb;--wtc-border:#e5e7eb;--wtc-text:#111827;--wtc-sub:#6b7280;--wtc-ok:#14532d;--wtc-ok-bg:#ecfdf5;--wtc-warn:#7c2d12;--wtc-warn-bg:#fff7ed;--wtc-blue:#2563eb}
.wtc *{box-sizing:border-box}
.wtc-card{background:var(--wtc-bg);border:1px solid var(--wtc-border);border-radius:16px;padding:20px;margin:24px 0}
@media (min-width:768px){.wtc-card{padding:28px}}
.wtc-form{display:grid;gap:16px}
.wtc-grid{display:grid;gap:16px}
@media (min-width:768px){.wtc-grid{grid-template-columns:repeat(2,1fr)}}
.wtc-field{display:flex;flex-direction:column;gap:8px}
.wtc-label{font-weight:600;color:var(--wtc-text)}
.wtc-input,.wtc-select{width:100%;padding:10px 12px;border:1px solid var(--wtc-border);border-radius:10px;background:#fff;font-size:16px;height:44px}
.wtc-select{-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#9ca3af 50%),linear-gradient(135deg,#9ca3af 50%,transparent 50%);background-position:calc(100% - 16px) 18px,calc(100% - 10px) 18px;background-size:6px 6px;background-repeat:no-repeat;padding-right:32px}
.wtc-input:focus,.wtc-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.wtc-hint{font-size:12px;color:var(--wtc-sub)}
.wtc-inline-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wtc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.wtc-result{background:var(--wtc-ok-bg);color:var(--wtc-ok);border:1px solid #86efac;border-radius:12px;padding:14px}
.wtc-result-main{font-weight:700;font-size:18px}
.wtc-result-sub{color:var(--wtc-sub);font-size:14px;margin-top:2px}
.wtc-alert{margin-top:8px;background:var(--wtc-warn-bg);color:var(--wtc-warn);border:1px solid #fdba74;border-radius:10px;padding:10px}
.wtc-share-status{font-size:12px;color:var(--wtc-sub)}
/* breaks */
.wtc-break-list{display:grid;gap:8px}
.wtc-break-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;border:1px solid var(--wtc-border);border-radius:10px;padding:10px}
.wtc-break-row button{white-space:nowrap}
.wtc-break-toolbar{display:flex;align-items:center;gap:10px;margin-top:6px}
.btn-pill{border-radius:999px}
.btn-sm{height:40px;padding:0 16px}
/* blue button */
.button-blue-custom2{background:var(--wtc-blue);border:0;color:#fff;border-radius:12px;padding:12px 18px;font-weight:600}
.button-blue-custom2:hover{filter:brightness(.95)}
.btn-white-secondary2{background:#fff;border:1px solid var(--wtc-border);border-radius:12px;padding:12px 18px}
.btn-white-secondary2:hover{filter:brightness(.95)}
/* switch (clean drop-in) */
.wtc-toggle{display:flex;align-items:center;gap:10px}

.wtc-switch{
  position:relative;
  display:inline-block;
  width:44px;height:24px;
}
.wtc-switch input{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; margin:0; cursor:pointer;
}

/* parts */
.wtc-switch .track{
    position: absolute; inset: 0;
    background: #e5e7eb; border-radius:999px;
    transition: background-color .2s ease;
}

.wtc-switch .knob{
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .2s ease;
}

/* ON state (if you use .is-on) */
.wtc-switch.is-on .track { background: var(--wtc-blue); }
.wtc-switch.is-on .knob  { transform: translateX(18px); }

/* title + toggle on one row */
.wtc-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.wtc-row .wtc-label{margin-right:auto;}
.wtc-row .wtc-hint{font-size:12px; color:var(--wtc-sub);}

.wtc-time-col{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px }
.wtc-input-time{ width:100px; text-align:center; padding:0 8px } /* fits "22:00" nicely */

/* prevent accidental value change by scroll on number inputs */
.wtc-input[readonly]::-webkit-outer-spin-button,
.wtc-input[readonly]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wtc-input[readonly] { -moz-appearance: textfield; }

/* === WTC WEEK – safe, scoped additions === */

/* Weekly: readonly colors */
#wtc-week .wtc-table .is-readonly.w-total,
#wtc-week .wtc-table .w-total[readonly]{
  background:#eef5ff !important;   /* light blue for work total */
  color:#111827;
}

#wtc-week .wtc-table .is-readonly.w-night,
#wtc-week .wtc-table .w-night[readonly]{
  background:#f3f4f6 !important;   /* light gray for night minutes */
  color:#111827;
}

/* No scroll-wheel changes on readonly numbers */
#wtc-week .wtc-table .wtc-input[readonly]::-webkit-outer-spin-button,
#wtc-week .wtc-table .wtc-input[readonly]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
#wtc-week .wtc-table .wtc-input[readonly] { -moz-appearance:textfield; }

/* Desktop/tablet widths so time fields don’t look full-row */
@media (min-width: 577px){
  #wtc-week .wtc-table { table-layout:fixed; border-collapse:separate; border-spacing:0 8px; width:100%; }
  #wtc-week .wtc-table th, #wtc-week .wtc-table td { padding:8px; text-align:center; vertical-align:middle; background:#fff; }
  #wtc-week .wtc-table thead th { font-weight:600; color:var(--wtc-text); border-bottom:1px solid var(--wtc-border); }
  #wtc-week .wtc-table th:nth-child(2),
  #wtc-week .wtc-table td:nth-child(2){ width:96px; }   /* Pradžia */
  #wtc-week .wtc-table th:nth-child(3),
  #wtc-week .wtc-table td:nth-child(3){ width:96px; }   /* Pabaiga */
  #wtc-week .wtc-table th:nth-child(4),
  #wtc-week .wtc-table td:nth-child(4){ width:100px; }  /* Pertraukos */
  #wtc-week .wtc-table th:nth-child(5),
  #wtc-week .wtc-table td:nth-child(5){ width:110px; }  /* Naktinis */
  #wtc-week .wtc-table th:nth-child(6),
  #wtc-week .wtc-table td:nth-child(6){ width:140px; }  /* Darbo laikas */
  #wtc-week .wtc-table .wtc-input { height:40px; padding:6px 10px; text-align:center; font-size:15px; }
}

/* Keep first column sticky on wide screens */
#wtc-week .wtc-table td:first-child,
#wtc-week .wtc-table th:first-child { text-align:left; position:sticky; left:0; z-index:1; background:#fff; }

/* ===== WTC Week — fluid, compact mobile layout (≤576px) ===== */
@media (max-width:576.98px){

  /* fluid spacing & sizing — no fixed widths */
  #wtc-week{
    --gap: clamp(2px, 1vw, 6px);
    --inp-h: clamp(28px, 6.5vw, 34px);
    --inp-px: clamp(2px, 0.9vw, 6px);
    --fs: clamp(12px, 3.3vw, 15px);
    --fs-total: clamp(11px, 2.8vw, 14px);
    --head-tilt: -70deg;      /* tweak only this if you want more/less tilt */
    --head-h: clamp(64px, 14vw, 86px);
  }

  /* remove sticky first column on mobile */
  #wtc-week .wtc-table td:first-child,
  #wtc-week .wtc-table th:first-child { position: static; }

  /* Hide header "Diena" only (weekday text must stay in tbody) */
  #wtc-week .wtc-table thead th:first-child{ display:none; }

  /* Let us grid the head/body with the same 5 fluid columns */
  #wtc-week .wtc-table{ width:100%; border-collapse:separate; border-spacing:0; }
  #wtc-week .wtc-table thead,
  #wtc-week .wtc-table tbody{ display:block; }

  /* ===== HEADER (full, vertical labels aligned to columns) ===== */
  #wtc-week .wtc-table thead tr{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
    align-items: end;
    height: var(--head-h);
    margin-left: 0;
    height: 105px;
    padding-left: 30px;
  }
  #wtc-week .wtc-table thead th{
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: visible;
  }
  #wtc-week .wtc-table thead th .full{
    position: absolute;
    left: 0; bottom: 0;
    display: inline-block;
    transform-origin: left bottom;
    transform: rotate(var(--head-tilt));
    pointer-events: none;
    font-size: 12px;
  }

  /* ===== BODY (weekday on its own line, then one compact row) ===== */
  #wtc-week .wtc-table tbody tr{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: auto;
    gap: var(--gap);
    align-items:center;
    background: transparent;
  }

  /* Full weekday name above the fields */
  #wtc-week .wtc-table tbody th.day{
    grid-column: 1 / -1;     /* span all five columns */
    display:block;
    padding:0;
    margin-top: 2px;
    font-weight:700;
    font-size: 14px;
    text-align:left;
    background:transparent;
  }

  /* Place each cell into the 5 columns (after the day header) */
  #wtc-week .wtc-table tbody td{
    display:block;
    padding:0;
    min-width:0;             /* allow natural shrinking */
    background:transparent;
  }
  #wtc-week .wtc-table tbody td:nth-child(2){ grid-column:1; } /* Pradžia  */
  #wtc-week .wtc-table tbody td:nth-child(3){ grid-column:2; } /* Pabaiga  */
  #wtc-week .wtc-table tbody td:nth-child(4){ grid-column:3; } /* Pertraukos (min.) */
  #wtc-week .wtc-table tbody td:nth-child(5){ grid-column:4; } /* Naktinis (min.)   */
  #wtc-week .wtc-table tbody td:nth-child(6){ grid-column:5; } /* Darbo laikas      */

  /* ===== Inputs — compact, neutral, centered ===== */
  #wtc-week .wtc-table .wtc-input{
    box-sizing: border-box;
    width: 100%;
    height: var(--inp-h);
    padding: 2px var(--inp-px);
    font-size: var(--fs);
    text-align: center;
    background: #fff;
    color: inherit;
  }
  /* remove colored look on read-only cells */
  #wtc-week .wtc-table .is-readonly,
  #wtc-week .wtc-table .w-night,
  #wtc-week .wtc-table .w-total{
    background:#fff !important;
    color:inherit !important;
  }
  /* Result text stays readable but never overflows */
  #wtc-week .wtc-table .w-total{
    font-size: var(--fs-total);
    padding-inline: var(--inp-px);
  }

  /* Free the Start/End columns on phones */
  #wtc-week .wtc-table { table-layout:auto; }  /* disable fixed column layout on mobile */
  #wtc-week .wtc-table th:nth-child(2),
  #wtc-week .wtc-table td:nth-child(2),
  #wtc-week .wtc-table th:nth-child(3),
  #wtc-week .wtc-table td:nth-child(3) {
    width:auto !important;
    min-width:0;                 /* lets Safari/iOS shrink time inputs */
  }

  /* ensure grid cells can shrink */
  #wtc-week .wtc-table tbody td { min-width:0; }

  /* time inputs fill their cells */
  #wtc-week .wtc-table .w-start,
  #wtc-week .wtc-table .w-end { width:100%;}

  /* FORCE time inputs to fill the grid cell on phones (iOS intrinsic width fix) */
  #wtc-week .wtc-table input[type="time"]{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;      /* let it shrink in Safari */
    display:block;               /* avoid inline min-content width */
    -webkit-appearance:none;     /* kill iOS intrinsic width */
    appearance:none;
  }

  /* Keep only time fields blue where intended */
  #def-start, #def-end,
  #wtc-week .wtc-table tbody input.w-start,
  #wtc-week .wtc-table tbody input.w-end{
    color:#2563eb;
    caret-color:#2563eb;
  }

  /* In case any old fixed time widths remain elsewhere, null them on mobile */
  #wtc-week .wtc-table .w-start,
  #wtc-week .wtc-table .w-end{
    width:100% !important;
    min-width:0 !important;
  }

}

/* Night range: make the two time inputs fluid on phones */
@media (max-width:576.98px){
  #night-range{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap: clamp(6px, 2.5vw, 12px);
  }
  #night-range input[type="time"]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    display:block;
    -webkit-appearance:none;
    appearance:none;
  }
}

/* Weekly table: force time inputs to fill the column on iOS */
@media (max-width:576.98px){
  #wtc-week .wtc-table input[type="time"]{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    display:block;
    -webkit-appearance:none;
    appearance:none;
  }
}

/* ensure pill/sm buttons are visually centered */
.button-blue-custom2,
.btn-white-secondary2{
  position: relative;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1; /* avoid vertical misalignment */
}

/* the overlay that holds the spinner/✓ */
.btn-status{
  position: absolute;
  inset: 0;                       /* cover the whole button */
  display: flex;
  align-items: center;
  justify-content: center;        /* <-- centers horizontally & vertically */
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}

/* hide the label while loading/success so it doesn't fight centering */
.is-loading  .btn-label,
.is-success .btn-label { visibility: hidden; }

.is-loading  .btn-status,
.is-success .btn-status { opacity: 1; }

/* spinner glyph */
.btn-status::after{
  content:"";
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.is-loading .btn-status::after{
  width:16px; height:16px;
  border:2px solid currentColor; 
  border-right-color:transparent;
  border-radius:50%;
  animation:spin .8s linear infinite;
}

/* when feedback finished — make the button green */
.button-blue-custom2.is-success,
.btn-white-secondary2.is-success {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

/* show the ✓ in the overlay slot */
.is-success .btn-status::after{
  content:"✓";
  font-weight:700;
  font-size:16px;
  border:none;          /* remove spinner ring */
  animation:none;       /* stop any rotation */
}

/* red background for reset on success */
.button-blue-custom2.is-danger,
.btn-white-secondary2.is-danger {
  background:#dc2626;
  border-color:#dc2626;
  color:#fff;
}

/* while red state is active, hide text + show overlay */
.is-danger .btn-label { visibility: hidden; }
.is-danger .btn-status { opacity: 1; }

/* show ✓ instead of spinner while .is-danger is active */
#wtc-reset.is-danger .btn-status::after {
  content: "✓";
  animation: none;   /* stop spinner */
  border: none;      /* hide spinner ring */
  width: auto;
  height: auto;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Calculator section layout (inside Bootstrap container) */
.wtc { padding: 24px 0 48px; }
.wtc .wtc-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
}

/* Small screens: keep it comfy */
@media (max-width: 575.98px){
  .wtc .wtc-card{ padding:16px; border-radius:12px; }
}

/* follow-up block under daily calculator */
.wtc-followup { padding: 24px 0 56px; }

.wtc-next {
  text-align: center;
  margin-bottom: 28px;
}
.wtc-next-title { margin: 0 0 8px; font-weight: 700; }
.wtc-next-text  { margin: 0 0 16px; color: rgba(18,17,39,.64); }
.wtc-next-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.btn-pill { border-radius: 999px; padding-inline: 20px; }

/* other calculator buttons */
.btn-othercalculator {
    font-family: 'Poppins', sans-serif;
    line-height: 29px;
    background-color: #ffffff;
    color: #000 !important;
    border: 1px solid rgb(0, 133, 255) !important;
    padding: 8px 24px !important;
    /* margin-left: 15px; */
    cursor: pointer;
    font-weight: 500;
    font-size: 20px !important;
    border-radius: 15px;
    display: flex;
    flex-direction: column;   
    align-items: center;
    justify-content: flex-end;
    text-align: bottom;
    line-height: 24px;
    height: 300px;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-othercalculator img {
  display: block;
  width: 400px;               /* control the icon size */
  height: 242px;
  object-fit: contain;       /* keeps transparent PNG/SVG nicely contained */
  margin-top: 8px;
  margin-bottom: 8px;
}

.btn-othercalculator span {
  align-self: stretch;       /* let it take full width */
  text-align: center;
  margin-top: auto;          /* pushes text to the bottom */
  padding-bottom: 8px;       /* breathing room from bottom */
  line-height: 1.2;
}

.btn-othercalculator:hover,
.btn-othercalculator:focus-visible {
  background: rgb(245, 248, 250);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* === Make .btn-othercalculator responsive only on small screens === */
@media (max-width: 576.98px){
  /* let the card fit the phone width and shrink in height */
  .btn-othercalculator{
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: auto;                 /* instead of fixed 300px */
    aspect-ratio: 3 / 2;          /* keeps a nice proportion */
    padding: 12px 16px;           /* a bit tighter on phones */

    /* iOS/Safari align quirk guards */
    line-height: 1.2;
    text-align: center;           /* 'bottom' isn't a valid value anyway */
  }

  /* image scales with the card, never overflows */
  .btn-othercalculator img{
    width: 100%;
    max-width: 100%;
    height: auto;                 /* instead of fixed 242px */
    object-fit: contain;
    margin: 8px 0;
    flex: 1 1 auto;               /* give the image flexible space */
  }

  /* label remains readable and pinned to the bottom */
  .btn-othercalculator span{
    margin-top: auto;
    padding-bottom: 8px;
    line-height: 1.2;
    font-size: clamp(14px, 3.8vw, 18px);
  }

  /* if these sit in a row, allow wrapping & shrinking */
  .wtc-next-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .wtc-next-actions .btn-othercalculator{
    flex: 1 1 100%;               /* full width on phones */
  }
}

/* savings CTA band */
.btn-savings {
    font-family: 'Poppins', sans-serif;
    line-height: 29px;
    background-color: #ffd500;
    color: #000 !important;
    border: none;
    padding: 8px 24px !important;
    /* margin-left: 15px; */
    cursor: pointer;
    font-weight: 700;
    font-size: 20px !important;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 24px;
    height: 150px;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.btn-savings:hover,
.btn-savings:focus-visible {
  background: #d6b100;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.wtc-savings {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, #FFF7E6 0%, #E9F8FB 100%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px 20px;
  min-height: 200px;   /* optional baseline */
  height: auto;        /* allow content height */
  margin-top: 100px;
}
.wtc-savings h4 { margin: 0 0 6px; font-weight: 700; }
.wtc-savings p  { margin: 0; color: rgba(18,17,39,.74); }
.wtc-savings-btn { white-space: nowrap; }

@media (max-width: 767.98px){
  .wtc-savings{ flex-direction: column; align-items: stretch; text-align: left; }
  .wtc-savings-btn{ align-self: flex-start; }
}
/* === Savings CTA: make the button fit on mobile === */
@media (max-width: 767.98px){
  .wtc-savings{
    padding: 16px;
    gap: 12px;
    flex-direction: column;      /* already set, keep it */
    align-items: stretch;         /* make children full width */
    text-align: left;
  }

  /* let the button fill the container and wrap text */
  .wtc-savings-btn{ 
    align-self: stretch;          /* instead of flex-start */
    white-space: normal;          /* allow wrapping */
  }

  .btn-savings{
    box-sizing: border-box;
    width: 100%;
    height: auto;                 /* drop the fixed 150px */
    padding: 14px 16px;           /* comfortable touch target */
    line-height: 1.25;
    font-size: clamp(16px, 4.2vw, 20px);
    border-radius: 12px;
    text-align: center;
  }
}

/* Breadcrumbs */
.breadcrumbs{
  list-style:none;
  margin:0 0 24px;
  padding:0;
  display:flex;             /* one row */
  flex-wrap:wrap;           /* allow wrap on very small screens (optional) */
  gap:.25rem;               /* small spacing */
  align-items:center;
  padding-top: 96px;
}
.breadcrumbs > li{
  display:flex; align-items:center;
}
.breadcrumbs > li + li::before{
  content:"/";              /* the slash */
  margin:0 .5rem;
  color:#9aa0a6;            /* subtle divider */
}
.breadcrumbs a{
  text-decoration:none; color:inherit;
}
.breadcrumbs a:hover{
  color:#111; text-decoration:underline; /* hover */
}
.breadcrumbs [aria-current="page"]{
  color:#111; font-weight:600;   /* style current page */
}

/* ================== Solution features ================== */
#solution-features.ptb-60{padding-top:60px;padding-bottom:60px;}

#solution-features .inner-wrapper{max-width:1400px;margin:0 auto;}
#solution-features .content-sizer{width:85%;max-width:1200px;margin:0 auto;}
@media (max-width:767px){
  #solution-features .content-sizer{width:100%;padding:0 20px;}
}

/* Grid (no Bootstrap required) */
#solution-features .row{display:flex;flex-wrap:wrap;margin:0;}
#solution-features .section-column{box-sizing:border-box;padding:20px 0;}
#solution-features .col-sm-6{flex:0 0 100%;max-width:100%;}

/* Typography */
#solution-features .tb{font-family:inherit;}
#solution-features .tb .tb-title{margin:8px 0 12px;font-weight:700;line-height:1.25;}
#solution-features .t34{font-size:clamp(22px,2.2vw,34px);}
#solution-features .tb .tb-text{line-height:1.6;font-weight:500;}
#solution-features .t18{font-size:clamp(16px,1.6vw,18px);}

/* Images */
#solution-features .img-responsive{display:block;max-width:100%;height:auto;}
#solution-features .margin-sides-auto{margin-left:auto;margin-right:auto;}

/* ------------- 3-card LED strip ------------- */
#solution-features .cards-row{margin:24px 0 8px;}
#solution-features .cards3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px;
  align-items:start;
}
@media (max-width:1024px){ #solution-features .cards3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){  #solution-features .cards3{grid-template-columns:1fr;} }
#solution-features .feature-card{text-align:center;}
#solution-features .feature-card img{margin-bottom:12px;}
#solution-features .card-title{
  margin:6px 0 6px;
  font-weight:700;
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.3;
}
#solution-features .card-text{
  margin:0;
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.6;
  font-weight:500;
}

/* Feature rows chess + vertical centering */
#solution-features .section-row{ display:flex; align-items:center; }
@media (min-width:768px){
  #solution-features .section-row:nth-of-type(even){ flex-direction:row-reverse; }
}

@media (max-width:640px){
  #solution-features .cards3{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:12px;
  }
  #solution-features .card-title{font-size:14px;}
  #solution-features .card-text{font-size:13px;}
}

#solution-features #featurePolicies.ptb-60{
  padding-top:60px;
  padding-bottom:60px;
}

@media (min-width:768px){
  #solution-features #featurePolicies .section-row{
    display:flex;
    align-items:center;
  }

  /* flip even rows */
  #solution-features #featurePolicies .section-row:nth-of-type(even){
    flex-direction:row-reverse;
  }

  /* parity fix after the highlight row */
  #solution-features #featurePolicies #nxRulesHighlight{
    flex-direction:row;
  }
  #solution-features #featurePolicies #nxRulesHighlight ~ .section-row:nth-of-type(even){
    flex-direction:row;
  }
  #solution-features #featurePolicies #nxRulesHighlight ~ .section-row:nth-of-type(odd){
    flex-direction:row-reverse;
  }
}

#solution-features #featurePolicies .section-column{
  padding: 24px 0; /* vertical rhythm */
}

@media (min-width: 768px){
  #solution-features #featurePolicies .section-column{
    padding: 36px 0; /* a bit more on desktop */
  }
}

#solution-features #featurePolicies .section-row img{
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
}

/* --- Desktop: 2 columns + safe gap (no wrapping) --- */
@media (min-width:768px){
  #solution-features #featurePolicies .section-row{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;                  /* important */
    --col-gap: clamp(20px, 4vw, 56px);
    gap: var(--col-gap);
  }

  #solution-features #featurePolicies .section-row > .col-sm-6{
    flex: 0 0 calc(50% - (var(--col-gap) / 2));
    max-width: calc(50% - (var(--col-gap) / 2));
  }
}

/* Mobile feature separator */
@media (max-width: 767px){

  #solution-features #featurePolicies .section-row{
    position: relative;
    padding-bottom: 32px;
    margin-bottom: 32px;
  }

  #solution-features #featurePolicies .section-row::after{
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: #e5e7eb; /* neutral grey */
    margin: 28px auto 0 auto;
  }

  /* remove separator on last item */
  #solution-features #featurePolicies .section-row:last-of-type::after{
    display:none;
  }

}

/* Mobile: tighter image-text pairing */
@media (max-width: 767px){

  #solution-features #featurePolicies .section-column{
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

@media (max-width: 767px){
  #solution-features{
    --bs-gutter-x: 1rem; /* 16px */
  }

  #solution-features #featurePolicies .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Fill parent container edges; only bottom gap */
.price-wrap{
  width:100%;
  max-width:none;      /* remove the 1100px cap */
  padding:0;           /* let the parent control gutters */
  margin:0 auto 40px;  /* no top gap, 40px after */
}

/* If this block sits OUTSIDE your container, use this helper to
   align it with the same left/right as your content: */
/* .your-section .container .hw-price-wrap { width:100%; max-width:100%; } */

.price{
  --blue: rgb(0,133,255);
  border:2px solid var(--blue);
  background:rgba(0,133,255,0.12);
  border-radius:12px;          /* closer to the yellow button rounding */
  padding:18px 24px;
  display:flex;
  flex-direction:column;       /* always two lines */
  align-items:center;
  text-align:center;
  color:#0b0b0b;               /* black text */
  font-family:inherit;         /* inherit Poppins */
}

/* ensure children inherit too */
.price *{
  font-family:"Poppins", sans-serif !important;
}

.price__title{
  font-weight:700;
  font-size:clamp(14px, 0.9vw + 12px, 18px);
  margin-bottom:4px;
}

.price__amount{
  font-weight:700;  /* use 700 unless you load Poppins 800 */
  font-size:clamp(20px, 1.2vw + 16px, 28px);
}

/* tiny gap after SEO text; bottom gap after button; no gap between image & button */
.back-to-solutions{
  padding-top: 6px;                /* small gap above image */
  padding-bottom: 60px;            /* gap below button */
  border-top: 1px solid transparent; /* prevents margin-collapsing from previous block */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;                          /* no space between children */
}

/* neutralize any globals that add margins inside */
.back-to-solutions > * { margin: 0; }

/* --- image --- */
.back-to-solutions__image{
  display: block;
  margin: 0 !important;            /* ensure no gap above/below */
  max-width: 960px;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* --- button --- */
.back-to-solutions__cta{
  width: 100%;
  display: flex;
  justify-content: center;         /* center the button horizontally */
}

.back-to-solutions__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 560px);         /* nice wide button, responsive */
  padding: 14px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600 !important; 
  font-size: 1rem !important; 
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
  transition: transform .05s ease, box-shadow .2s ease, background-color .15s ease;
}

/* color + hover (no white flash) */
.back-to-solutions .btn.btn--yellow{
  background: var(--brand-yellow, #FFD400);
  color: var(--button-text, #111);
}
.back-to-solutions .btn.btn--yellow:hover{
  background: #d6b100;             /* darker */
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Mobile gutters for the yellow button */
@media (max-width: 768px){
  .back-to-solutions__cta{
    padding-inline: clamp(12px, 4vw, 20px); /* side gaps */
  }
  .back-to-solutions__btn{
    width: 100%; /* fill the padded area, not the full screen */
  }
}

.back-to-solutions__icon{ flex: 0 0 auto; }

/* accessibility helper */
.visually-hidden{
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* --- Color bubbles --- */
.color-picker { display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap; }
.color-picker__label { position:relative; width:40px; height:40px; border-radius:50%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

/* the color dot */
.color-picker__dot { width:32px; height:32px; border-radius:50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }

/* ring (hover/focus/checked) */
.color-picker__label::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid transparent; transition:border-color .15s ease;
}
.color-picker__input:focus-visible + .color-picker__label::after,
.color-picker__label:hover::after{ border-color:#0085FF; }
.color-picker__input:checked + .color-picker__label::after{ border-color:#0085FF; }

/* make white swatch visible */
.color--white { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* small “selected color” text */
#selectedColorLabel{ margin-top:10px; font-weight:600; }

/* Preview image (the big one on the left) */
#colorPreview{
  display:block;
  width:100%;
  height:auto;
  transition: opacity .2s ease;   /* enables fade */
}

/* optional: dim while loading the new image */
#colorPreview.is-updating{ opacity:.25; }

/* Rounded, responsive media card */
.media-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;              /* clip video & controls in Safari */
  background:#000;
  aspect-ratio:4 / 3;          /* change if you want 4/3 etc. */
}

/* video + optional poster image */
.media-card > img,
.media-card > video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Extra nudge for stubborn Safari poster clipping */
.media-card{ clip-path: inset(0 round 16px); }
.media-card > video{ clip-path: inset(0 round 16px); }

/* Optional: subtle play overlay */
.media-card .play-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  pointer-events:none;
}
.media-card .play-overlay span{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="26,20 48,32 26,44" fill="black"/></svg>') center/40% no-repeat;
}

/* Reorder “Estetiškas montavimas” on mobile */
@media (max-width: 767px){
  #featureFlushMount{
    display:flex;            /* make the row flex */
    flex-wrap:wrap;
  }
  #featureFlushMount .section-column{
    float:none !important;   /* disable BS3 floats */
    width:100% !important;   /* full width */
  }
  /* use the classes you already put in HTML */
  #featureFlushMount .order-1{ order:1; }
  #featureFlushMount .order-2{ order:2; }
}

/* iOS Safari: kill intrinsic min-width of time inputs and let cells shrink */
@supports (-webkit-touch-callout:none){

  /* allow every parent cell to actually shrink */
  #wtc-week .wtc-inline-3,
  #wtc-week .wtc-inline-3 > *,
  #wtc-week .wtc-table tbody,
  #wtc-week .wtc-table tr,
  #wtc-week .wtc-table td { min-width:0 !important; }

  /* both “Numatytieji laikai” and weekly table time inputs */
  #wtc-week input[type="time"]{
    -webkit-appearance:none !important; /* remove iOS intrinsic control width */
    appearance:none !important;
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* stop iOS text inflation that secretly enlarges controls */
  #wtc-week{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
}

/* make ONLY time inputs blue (defaults + weekly table) */
#wtc-week input[type="time"]{
  color:#2563eb !important;
  -webkit-text-fill-color:#2563eb !important; /* iOS uses this */
  caret-color:#2563eb !important;
}

/* force non-time inputs & selects back to black inside calculator */
#wtc-week input:not([type="time"]),
#wtc-week select,
#wtc-week .btn-white-secondary2,
#wtc-week .btn-white-secondary2 .btn-label{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}

/* iOS Safari: fix DAILY calculator time inputs so they don't overflow */
@supports (-webkit-touch-callout:none){

  /* allow the flex/grid parents to shrink */
  #wtc .wtc-grid,
  #wtc .wtc-field,
  #wtc .wtc-inline-2,
  #wtc .wtc-inline-3,
  #wtc .wtc-field > * {
    min-width: 0 !important;
  }

  /* actual time inputs in the DAY calc */
  #wtc input[type="time"]{
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* stop iOS text inflation for this block too */
  #wtc {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* match the “blue time” styling you did for week */
#wtc input[type="time"]{
  color: #2563eb !important;
  -webkit-text-fill-color: #2563eb !important;
  caret-color: #2563eb !important;
}

/* keep other inputs/selects/white buttons black in the daily calc */
#wtc input:not([type="time"]),
#wtc select,
#wtc .btn-white-secondary2,
#wtc .btn-white-secondary2 .btn-label{
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

/* =======================
   Work Time Calculator – MONTH
   ======================= */

.wtc-month {
  padding: 32px 0 48px;
}

.wtc-month .wtc-card {
  background: #fff;
  border-radius: 20px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(12, 65, 113, 0.06);
  background-image: radial-gradient(circle at top, rgba(0,133,255,0.02), transparent 55%);
}

@media (max-width: 575.98px) {
  .wtc-month .wtc-card {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }
}

/* top grid (year, month, norms, night) */
.wtc-month .wtc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 991.98px) {
  .wtc-month .wtc-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 575.98px) {
  .wtc-month .wtc-grid {
    grid-template-columns: 1fr;
  }
}

.wtc-month .wtc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wtc-month .wtc-label {
  font-size: .75rem;
  font-weight: 600;
  color: #121127;
}

.wtc-month .wtc-input,
.wtc-month .wtc-select {
  width: 100%;
  border: 1px solid rgba(18,17,39,0.09);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: .875rem;
  background-color: #fff;
  transition: border .2s, box-shadow .2s;
}

.wtc-month .wtc-input:focus,
.wtc-month .wtc-select:focus {
  outline: none;
  border-color: rgba(0,133,255, .35);
  box-shadow: 0 0 0 3px rgba(0,133,255, .09);
}

.wtc-month .wtc-hint {
  font-size: .7rem;
  color: rgba(18,17,39,.5);
  line-height: 1.25;
}

/* night toggle same as week */
.wtc-month .wtc-row-inline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.wtc-month .wtc-inline-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

@media (max-width: 575.98px) {
  .wtc-month .wtc-inline-2 {
    grid-template-columns: 1fr 1fr;
  }
}

/* table wrap */
.wtc-month .wtc-table-wrap {
  margin-top: 12px;
  border: 1px solid rgba(12, 65, 113, 0.05);
  border-radius: 16px;
  overflow: auto;
  background: #fff;
  max-height: 420px; /* so 31 rows don’t kill the page */
}

/* table itself */
.wtc-month-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px; /* force horizontal scroll on small screens */
}

.wtc-month-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(12, 65, 113, 0.08);
  white-space: nowrap;
}

.wtc-month-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,.012);
}

.wtc-month-table th.day-col {
  width: 110px;
}

.wtc-month-table th,
.wtc-month-table td {
  text-align: left;
}

.wtc-month-table td {
  padding: 6px 6px 6px 0;
  vertical-align: middle;
}

.wtc-month-table td:last-child {
  padding-right: 8px;
}

.wtc-month-table .day-label {
  padding: 6px 8px 6px 12px;
  font-weight: 500;
  font-size: .78rem;
  white-space: nowrap;
}

.wtc-month-table input.wtc-input {
  height: 34px;
  border-radius: 10px;
  text-align: left;
}

/* actions (bottom buttons) */
.wtc-month .wtc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

@media (max-width: 575.98px) {
  .wtc-month .wtc-actions {
    flex-direction: row;
  }
  .wtc-month .wtc-actions > * {
    flex: 1 1 calc(50% - 5px);
  }
}

/* reuse your existing button styles; just tiny tweaks */
.wtc-month .button-blue-custom2,
.wtc-month .btn-white-secondary2 {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  white-space: nowrap;
}

.wtc-month .button-blue-custom2 {
  background: #0085ff;
  color: #fff;
  font-weight: 500;
}

.wtc-month .btn-white-secondary2 {
  background: #f4f6f9;
  color: #121127;
}

.wtc-month .button-blue-custom2.is-loading .btn-label,
.wtc-month .btn-white-secondary2.is-loading .btn-label {
  opacity: .6;
}

/* result block */
.wtc-month .wtc-result {
  margin-top: 14px;
  background: rgba(0,133,255,.03);
  border: 1px solid rgba(0,133,255,.04);
  border-radius: 16px;
  padding: 12px 14px;
}

.wtc-month .wtc-result-main {
  font-weight: 600;
  color: #121127;
  margin-bottom: 3px;
  font-size: .9rem;
}

.wtc-month .wtc-result-sub {
  font-size: .75rem;
  color: rgba(18,17,39,.7);
  line-height: 1.4;
}

.wtc-month .wtc-alert {
  margin-top: 8px;
  background: rgba(255, 106, 106, .1);
  border: 1px solid rgba(255, 106, 106, .15);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .7rem;
  color: #b32121;
}

.wtc-month .wtc-share {
  margin-top: 6px;
  font-size: .7rem;
  color: rgba(18,17,39,.4);
}

/* hide rows utility (when month has 28-30 days) */
.wtc-month-table tr.is-hidden {
  display: none;
}

/* small badge for holiday / weekend */
.wtc-month-table .day-badge {
  display: inline-block;
  margin-left: 4px;
  background: rgba(196, 20, 60, .08);
  color: #c4143c;
  font-size: .6rem;
  padding: 0 6px 1px;
  border-radius: 999px;
  line-height: 1.35;
}

.wtc-month-table .is-holiday-row {
  background: rgba(196, 20, 60, .02);
}

.wtc-month-table .is-holiday-row input.wtc-input {
  background: rgba(255, 249, 249, .7);
}

/* day number circle (optional) */
.wtc-month-table .day-num {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0,133,255,.08);
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 600;
  margin-right: 6px;
  color: #0085ff;
}

/* month night = clone of day night */
#wtc-month #month-night-range {
  gap: 12px;
}

#wtc-month #month-night-range .wtc-time-col {
  flex: 1 1 160px;
}

/* ===== MONTH TABLE tweaks ===== */

/* make weekend row go through ALL cells */
#wtc-month .wtc-month tr.is-weekend-row > th,
#wtc-month .wtc-month tr.is-weekend-row > td {
  background: #f3f4f6; /* light grey */
}

/* round corners on weekend row */
#wtc-month .wtc-month tr.is-weekend-row > th:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
#wtc-month .wtc-month tr.is-weekend-row > td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* night (mėlyna / pilka) column – same as week */
#wtc-month .wtc-month td.col-night .wtc-input.is-readonly,
#wtc-month .wtc-month .m-night.is-readonly {
  background: #e5e7eb;       /* grey */
  color: #1f2937;
  cursor: default;
}

#wtc-month table.wtc-month td.col-total .wtc-input.is-readonly,
#wtc-month table.wtc-month .m-total.is-readonly {
  background: rgba(11, 99, 255, 0.08);
  color: #0b63ff;
  font-weight: 500;
  cursor: default;
}

/* time inputs in month – show blue text when value present */
#wtc-month .wtc-month input[type="time"],
#wtc-month .wtc-month .wtc-input.is-time {
  color: #0b63ff;
}

/* but when empty ( --:-- ) keep default text color */
#wtc-month .wtc-month input[type="time"]:placeholder-shown {
  color: #111827;
}

/* MONTH: show holiday name inline as text */
#wtc-month .day-badge.day-holiday {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px 4px;
  border-radius: 9999px;
  background: rgba(0,0,0,.06); /* same tone as mobile grey */
  color: #000;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  vertical-align: middle;
}

/* 2 columns: month norm + day norm */
#wtc-month .month-norm-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* make inputs equal height like others */
#wtc-month #month-day-hours {
  max-width: 100%;
}

#wtc-month.is-loading {
  opacity: .6;
  pointer-events: none;
  position: relative;
}

#wtc-month.is-loading::after {
  content: 'Kraunama…';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.6);
  font-weight: 500;
}

/* =====================================
   WTC MONTH — Desktop/tablet (≥577px)
   ===================================== */
@media (min-width: 577px){
  #wtc-month .wtc-table { table-layout:fixed; border-collapse:separate; border-spacing:0 8px; width:100%; }
  #wtc-month .wtc-table th, #wtc-month .wtc-table td { padding:8px; text-align:center; vertical-align:middle; background:#fff; }
  #wtc-month .wtc-table thead th { font-weight:600; color:var(--wtc-text); border-bottom:1px solid var(--wtc-border); }

  #wtc-month .wtc-table th:nth-child(2),
  #wtc-month .wtc-table td:nth-child(2){ width:96px; }   /* Pradžia */
  #wtc-month .wtc-table th:nth-child(3),
  #wtc-month .wtc-table td:nth-child(3){ width:96px; }   /* Pabaiga */
  #wtc-month .wtc-table th:nth-child(4),
  #wtc-month .wtc-table td:nth-child(4){ width:100px; }  /* Pertraukos */
  #wtc-month .wtc-table th:nth-child(5),
  #wtc-month .wtc-table td:nth-child(5){ width:110px; }  /* Naktinis */
  #wtc-month .wtc-table th:nth-child(6),
  #wtc-month .wtc-table td:nth-child(6){ width:140px; }  /* Darbo laikas */
  #wtc-month .wtc-table .wtc-input { height:40px; padding:6px 10px; text-align:center; font-size:15px; }
}

/* Keep first column sticky on wide screens */
#wtc-month .wtc-table td:first-child,
#wtc-month .wtc-table th:first-child {
  text-align:left;
  position:sticky;
  left:0;
  z-index:1;
  background:#fff;
}

/* =====================================
   WTC MONTH — fluid, compact mobile layout (≤576px)
   ===================================== */
@media (max-width:576.98px){

  #wtc-month{
    --gap: clamp(2px, 1vw, 6px);
    --inp-h: clamp(28px, 6.5vw, 34px);
    --inp-px: clamp(2px, 0.9vw, 6px);
    --fs: clamp(12px, 3.3vw, 15px);
    --fs-total: clamp(11px, 2.8vw, 14px);
    --head-tilt: -70deg;
    --head-h: clamp(64px, 14vw, 86px);
  }

  /* remove sticky first column on mobile */
  #wtc-month .wtc-table td:first-child,
  #wtc-month .wtc-table th:first-child { position: static; }

  /* Hide header "Diena" only (weekday text must stay in tbody) */
  #wtc-month .wtc-table thead th:first-child{ display:none; }

  /* table → block for grid */
  #wtc-month .wtc-table{ width:100%; border-collapse:separate; border-spacing:0; }
  #wtc-month .wtc-table thead,
  #wtc-month .wtc-table tbody{ display:block; }

  /* ===== HEADER (rotated column labels) ===== */
  #wtc-month .wtc-table thead tr{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 25px;
    align-items: end;
    height: var(--head-h);
    padding-left: 30px;
  }
  #wtc-month .wtc-table thead th{
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: visible;
  }
  #wtc-month .wtc-table thead th .full{
    position: absolute;
    left: 0; bottom: 0;
    display: inline-block;
    transform-origin: left bottom;
    transform: rotate(var(--head-tilt));
    pointer-events: none;
    font-size: 12px;
  }

  /* ===== BODY (day name, then 5 inputs) ===== */
  #wtc-month .wtc-table tbody tr{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--gap);
    align-items:center;
    background: transparent;
  }

  #wtc-month .wtc-table tbody th.day{
    grid-column: 1 / -1;
    display:block;
    padding:0;
    margin-top: 2px;
    font-weight:700;
    font-size: 14px;
    text-align:left;
    background:transparent;
  }

  #wtc-month .wtc-table tbody td{
    display:block;
    padding:0;
    min-width:0;
    background:transparent;
  }
  #wtc-month .wtc-table tbody td:nth-child(2){ grid-column:1; } /* Pradžia */
  #wtc-month .wtc-table tbody td:nth-child(3){ grid-column:2; } /* Pabaiga */
  #wtc-month .wtc-table tbody td:nth-child(4){ grid-column:3; } /* Pertrauka */
  #wtc-month .wtc-table tbody td:nth-child(5){ grid-column:4; } /* Naktinis */
  #wtc-month .wtc-table tbody td:nth-child(6){ grid-column:5; } /* Dienos laikas */

  #wtc-month .wtc-table .wtc-input{
    box-sizing: border-box;
    width: 100%;
    height: var(--inp-h);
    padding: 2px var(--inp-px);
    font-size: var(--fs);
    text-align: center;
    background: #fff;
    color: inherit;
  }

  #wtc-month .wtc-table .is-readonly,
  #wtc-month .wtc-table .m-night,
  #wtc-month .wtc-table .m-total{
    background:#fff !important;
    color:inherit !important;
  }

  #wtc-month .wtc-table .m-total{
    font-size: var(--fs-total);
    padding-inline: var(--inp-px);
  }

  #wtc-month .wtc-table { table-layout:auto; }
  #wtc-month .wtc-table th:nth-child(2),
  #wtc-month .wtc-table td:nth-child(2),
  #wtc-month .wtc-table th:nth-child(3),
  #wtc-month .wtc-table td:nth-child(3) {
    width:auto !important;
    min-width:0;
  }

  #wtc-month .wtc-table tbody td { min-width:0; }

  #wtc-month .wtc-table .m-start,
  #wtc-month .wtc-table .m-end { width:100%; }

  #wtc-month .wtc-table input[type="time"]{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    display:block;
    -webkit-appearance:none;
    appearance:none;
  }

  #month-def-start, #month-def-end,
  #wtc-month .wtc-table tbody input.m-start,
  #wtc-month .wtc-table tbody input.m-end{
    color:#2563eb;
    caret-color:#2563eb;
  }

  #wtc-month .wtc-table .m-start,
  #wtc-month .wtc-table .m-end{
    width:100% !important;
    min-width:0 !important;
  }
}

/* === Enhancements for MONTH mobile (visual parity with web) === */
@media (max-width:576.98px){

  /* Use same grey tone as input cell background: #f3f4f6 */
  #wtc-month .wtc-table tbody tr.is-weekend-row {
    background: #f3f4f6 !important;
    border-radius: 8px;
  }

  /* Keep weekday rows white */
  #wtc-month .wtc-table tbody tr:not(.is-weekend-row) {
    background: transparent !important;
  }

  /* Match weekend input backgrounds perfectly with parent */
  #wtc-month .wtc-table tbody tr.is-weekend-row input {
    background: #fff !important;
  }

  /* Preserve spacing and layout */
  #wtc-month .wtc-table tbody tr + tr {
    margin-top: 0;
  }

  /* Space above the “Išvalyti mėnesį” button */
  #month-clear-all {
    margin-top: 14px !important;
  }
}

/* ===== Mobile hero tightening (≤480px) ===== */
@media (max-width: 480px){

  /* Container spacing near the top */
  .hero,
  .page-hero {                 /* use whichever class you have */
    padding-top: 8px;
    padding-bottom: 10px;
  }

  /* Breadcrumbs: smaller + tighter or hide if you prefer */
  .breadcrumbs{
    font-size: 13px;
    gap: 6px;
    margin: 6px 0 10px;
  }
  /* optional: hide on very small screens */
  @media (max-width: 360px){
    .breadcrumbs{ display:none; }
  }

  /* H1: smaller, tighter leading, balanced wrapping */
  .heading,
  .page-title, 
  h1.hero-title{
    font-size: clamp(26px, 7vw, 36px);   /* was ~52–64px */
    line-height: 1.15;                   /* was ~1.25–1.3 */
    letter-spacing: 0;
    margin: 6px 0 10px;                  /* trim big gaps */
    text-wrap: balance;                  /* iOS 17+/modern */
    -webkit-hyphens: auto; hyphens: auto;
  }

  /* Subheading / intro paragraph */
  .subheading,
    .hero-lead{
      font-size: 16px;                     /* was 18–20 */
      line-height: 1.45;                   /* tighter */
      margin: 0 0 14px;
      max-width: 60ch;                     /* keep readable line length */
    }
  }

  @media (max-width: 360px){
    .heading{ font-size: 24px; line-height: 1.12; }
    .subheading{ font-size: 15px; line-height: 1.4; }
  }

/* Hero */
#roi-narrative .nv-hero{
  margin:8px 0 20px; padding:22px; border-radius:24px;
  background: linear-gradient(90deg,#fff8ea 0%, #ebfbff 100%);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
#roi-narrative .nv-hero h2{ margin:0 0 6px; }
#roi-narrative .nv-hero p{ margin:0; opacity:.9; }

/* Layout */
.nv-layout{ display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start; padding-bottom: 150px;}
@media (max-width: 768px) {
  .nv-layout {
    padding-bottom: 30px;
  }
}
.nv-left{ display:grid; gap:16px; }

/* Cards */
.nv-card{
  --g1:#ffffff; --g2:#ffffff;
  background: linear-gradient(90deg,var(--g1),var(--g2));
  border-radius:22px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.07);
  transition: filter .2s, opacity .2s;
}
.nv-card .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; gap:12px; }
.nv-card h3{ margin:0; font-size:1.28rem; font-weight: 700;}
.nv-card p{ margin:8px 0; }
.nv-card .inline{ display:inline-flex; align-items:center; gap:6px; }
.nv-card input[type="number"]{ width:92px; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; font-size:.95rem; }
.nv-card input:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25); outline:none; }

.rowline{ display:flex; align-items:center; gap:8px; margin:8px 0; }
.row.between{ display:flex; justify-content:space-between; align-items:center; }

/* Info panel */
.note{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:12px; background: rgba(13,60,97,.08); }
.note .ico{ flex:0 0 22px; width:22px; height:22px; border-radius:50%; background:#0b60cf; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; line-height:1; }
.note .ico::before{ content:"i"; }

/* Subcards — same gradient as parent */
.sub{ margin-top:12px; padding:12px; border-radius:16px; }
.sub.same{ background: linear-gradient(90deg, var(--g1), var(--g2)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.sub-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.sub h4{ margin:0; font-size:1.05rem; font-weight: 500;}

/* Totals */
.mod-total{
  margin-top:12px; padding:14px; border-radius:14px;
  background: rgba(255,255,255,.65);
  display:flex; justify-content:center; align-items:center; gap:42px; text-align:center;
}
.mod-total .label{ display:block; opacity:.85; font-size:.98rem; margin-bottom:6px; }
.mod-total strong{ font-size:2.2rem; font-weight:900; letter-spacing:-0.02em; }
.mod-total.mod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:42px; }

/* Toggle */
.toggle{ display:inline-flex; align-items:center; gap:10px; user-select:none; }
.toggle input{ appearance:none; width:56px; height:32px; border-radius:999px; background:#d1d5db; position:relative; cursor:pointer; transition:background .2s; }
.toggle input::after{ content:""; position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:999px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:left .2s; }
.toggle input:checked{ background:#22c55e; }
.toggle input:checked::after{ left:28px; }
.toggle .t{ font-weight:700; }

/* Disabled look */
.nv-card.is-off{ filter: grayscale(1) saturate(.6) brightness(.96); opacity:.70; }
.nv-card.is-off input{ pointer-events:none; opacity:.7; }
.sub.is-off{ opacity:.6; pointer-events:none; }

/* THEMES */
.nv-card[data-theme="peach"]{ --g1:#ffe9d2; --g2:#fff6ee; }
.nv-card[data-theme="mint"] { --g1:#dffbea; --g2:#f4fff8; }
.nv-card[data-theme="lav"]  { --g1:#efe6ff; --g2:#fbf7ff; }
.nv-card[data-theme="sky2"] { --g1:#e6f2ff; --g2:#eef6ff; }
.nv-card[data-theme="base"] { --g1:#ffffff; --g2:#ffffff; }

/* Unseen list bullets — perfectly centered */
.unseen-list{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:10px; }
.uv-item{ display:flex; align-items:center; gap:10px; line-height:1.35; }
.uv-item .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:#0b60cf; color:#fff; font-size:12px; font-weight:800;
  flex:0 0 20px;
}
.uv-item .ico::before{ content:"i"; }

/* Sidebar: sticky with nav offset 96px */
.nv-right{ position:sticky; top: calc(96px + 16px); }
.nv-sum{
  background:#0b1220; color:#fff; padding:16px; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.28);
  display:flex; flex-direction:column; gap:10px;
}

.sum-pair{ margin-top:16px; display:flex; justify-content:space-between; gap:18px; text-align:center; }
.sum-label{ opacity:.9; font-size:.95rem; }
.sum-big{ font-size:2.4rem; font-weight:900; letter-spacing:-0.02em; line-height:1; }
.sum-slogan{ text-align:center; font-weight:800; margin-top:20px; font-size:1.05rem; opacity:.9; }

.button-yellow{
  background: rgb(255,213,0);
  border: none; color:#0b1220; font-weight:800;
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.button-yellow:hover{ filter: brightness(0.98); }

.nv-sum .row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0; }
.is-hidden{ display:none; }

/* Actions */
.nv-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* Responsive */
@media (max-width:980px){ .nv-layout{ grid-template-columns:1fr; } .nv-right{ position:static; } }
@media (max-width:560px){ .nv-sum{ position:sticky; bottom:0; border-radius:16px 16px 0 0; } }

/* unify yellow look for both <a> and <button> */
.btn.btn-yellow{
  background: rgb(255,213,0);
  color:#0b1220;
  font-weight:800;
  padding:10px 14px;
  border-radius:12px;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}
.btn.btn-yellow:hover{ filter:brightness(.98); }

/* reset button on white */
#nv-reset.btn-white-secondary2{
  background:#fff;
  color:#111827;
  border:1.5px solid #e5e7eb;     /* <- visible border */
  border-radius:12px;
  padding:10px 14px;
}
#nv-reset.btn-white-secondary2:hover{
  border-color:#cfd3d8;
}

/* === FIX for yellow CTA === */
#nv-offer.btn.btn-yellow {
  background: rgb(255, 213, 0) !important;
  color: #0b1220 !important;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center; /* centers text horizontally */
  text-align: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

#nv-offer.btn.btn-yellow:hover {
  background: rgb(171, 142, 0) !important; /* darker yellow on hover */
  color: #0b1220 !important;
  transform: translateY(-1px);
}

/* optional: match arrow alignment */
#nv-offer .arrow {
  font-weight: 600;
  margin-left: 4px;
}



@media (max-width: 767px){

  /* card should not touch screen edges */
  .numbers-second{
    margin-left: 16px;
    margin-right: 16px;
    padding: 18px 16px;       /* inner spacing */
    border-radius: 18px;
  }

}

:root{
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
}

@media (max-width: 767px){

  #header-style-two .hero{
    margin-bottom: var(--space-md);
  }

  .numbers-second{
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
  }

  .breadcrumbs{
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
  }

  #solution-features .header{
    margin-top: var(--space-sm);
  }

}

/* =========================================
   NX (Neatvykimų) – cleaned + stable overrides
   Works even if vendor.min.css loads AFTER this
   ========================================= */

/* ===== NX base ===== */
.nx-wrap{ padding:72px 0; }
@media (max-width:767px){ .nx-wrap{ padding:48px 0; } }

.nx-section-title{
  font-size:clamp(1.6rem,2.2vw,2.2rem);
  font-weight:700;
  margin:0 0 12px;
}
.nx-section-sub{
  color:rgba(18,17,39,.56);
  line-height:1.8;
  margin:0 0 28px;
  max-width:64ch;
}

.nx-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
@media (max-width:991px){ .nx-grid-2{ grid-template-columns:1fr; } }

/* cards */
.nx-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.25);
  border:1px solid rgba(18,17,39,.08);
  transform:translateY(10px);
  opacity:0;
  transition:transform .6s ease, opacity .6s ease, box-shadow .3s ease, border-color .3s ease;
}
.nx-card.is-visible{ transform:translateY(0); opacity:1; }
.nx-card:hover{
  box-shadow:0 16px 42px -22px rgba(0,0,0,.32);
  border-color:rgba(11,128,240,.25);
}

.nx-mini-title{ font-weight:700; margin:0 0 8px; font-size:18px; }
.nx-mini-list{ margin:10px 0 0; padding-left:18px; color:rgba(18,17,39,.72); line-height:1.7; }
.nx-mini-list li{ margin:4px 0; }

.nx-list{ margin:0; padding-left:18px; color:rgba(18,17,39,.78); line-height:1.8; }
.nx-list li{ margin:6px 0; }

.nx-pill-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.nx-pill{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(11,128,240,.08);
  border:1px solid rgba(11,128,240,.18);
  color:rgba(18,17,39,.8);
}

.nx-muted{ color:rgba(18,17,39,.56); }

/* icons */
.nx-ico{ width:18px; height:18px; flex:0 0 18px; color:rgba(18,17,39,.72); }
.nx-node-ico, .nx-icon{
  background:rgba(11,128,240,.06);
  border:1px solid rgba(11,128,240,.14);
}
.nx-node-ico svg, .nx-icon svg{ width:18px; height:18px; }

/* Top 3 */
.nx-card--tight{ padding:18px; }
.nx-card--equal{ height:100%; }
.nx-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:991px){ .nx-grid-3{ grid-template-columns:1fr; } }

/* ===== NX Flow (integrations) ===== */
.nx-flow{
  position:relative;
  padding:18px;
  border-radius:18px;
  border:1px dashed rgba(18,17,39,.18);
  background:linear-gradient(to left, rgba(255,249,241,1), rgba(233,248,251,1));
}
.nx-flow-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
}
@media (max-width:991px){ .nx-flow-grid{ grid-template-columns:1fr; } }

.nx-node{
  background:#fff;
  border:1px solid rgba(18,17,39,.10);
  border-radius:16px;
  padding:14px;
  min-height:92px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transform:translateY(10px);
  opacity:0;
  transition:transform .6s ease, opacity .6s ease, border-color .3s ease;
}
.nx-node.is-visible{ transform:translateY(0); opacity:1; }
.nx-node:hover{ border-color:rgba(11,128,240,.28); }

.nx-node-top{ display:flex; align-items:center; gap:10px; }
.nx-node-ico{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
}
.nx-node-title{ font-weight:700; margin:0; font-size:15px; }
.nx-node-sub{ margin:8px 0 0; color:rgba(18,17,39,.62); font-size:13px; line-height:1.5; }

.nx-arrow{ display:none; }
@media (min-width:992px){
  .nx-arrow{ display:block; position:absolute; left:0; top:50%; width:100%; height:0; }
  .nx-arrow svg{ width:100%; height:44px; }
  .nx-arrow path{ stroke:rgba(11,128,240,.25); stroke-width:2; fill:none; stroke-dasharray:6 8; }
}

/* CTA band */
.nx-cta-band{
  margin-top:22px;
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(18,17,39,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.nx-cta-text{ margin:0; color:rgba(18,17,39,.7); }
.nx-cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================
   NX Mobile Carousel – CLEAN (NO DUPLICATES)
   - One source of truth for layout + animation
   - No conflicting .nx-mc__img blocks
   ========================================= */

#nx-mobile-carousel{ margin: 34px 0; }

/* IMPORTANT: your HTML has <div class="container"> inside. Override it. */
#nx-mobile-carousel > .container{
  max-width: 1600px !important;
  width: calc(100% - 80px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 991px){
  #nx-mobile-carousel > .container{
    width: calc(100% - 32px) !important;
  }
}

/* Main wrap */
#nx-mobile-carousel .nx-mc__wrap{
  border-radius: 22px;
  padding: 34px;
  background: linear-gradient(135deg, rgba(233,248,251,1), rgba(255,249,241,1));
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: stretch;      /* equal height columns */
  overflow: hidden;
  width: 100%;
}
@media (max-width: 991px){
  #nx-mobile-carousel .nx-mc__wrap{
    grid-template-columns: 1fr;
    padding: 22px;
  }
}

/* LEFT column layout zones */
#nx-mobile-carousel .nx-mc__copy{
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto; /* top / middle / bottom */
}
#nx-mobile-carousel .nx-mc__top{ align-self: start; }
#nx-mobile-carousel .nx-mc__mid{ align-self: center; position: relative; }
#nx-mobile-carousel .nx-mc__bottom{ align-self: end; }

/* Typography */
#nx-mobile-carousel .nx-mc__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  font-weight: 700;
}
#nx-mobile-carousel .nx-mc__sub{
  margin: 0 0 18px;
  color: rgba(18,17,39,.56);
  font-size: 16px;
  line-height: 1.9;
  max-width: 52ch;
}
#nx-mobile-carousel .nx-mc__h3{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
}
#nx-mobile-carousel .nx-mc__list{
  margin: 0 0 16px;
  padding-left: 18px;
  color: rgba(18,17,39,.72);
  line-height: 1.9;
}
#nx-mobile-carousel .nx-mc__list li{ margin: 6px 0; }

/* Tabs (high specificity + beat vendor) */
#nx-mobile-carousel .nx-mc__tabs{
  display: inline-flex !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(18,17,39,.08) !important;
  gap: 6px !important;
  margin-bottom: 18px !important;
}
#nx-mobile-carousel .nx-mc__tab{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  color: rgba(18,17,39,.72) !important;
  cursor: pointer !important;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}

/* ACTIVE = yellow */
#nx-mobile-carousel .nx-mc__tab.is-active{
  background:#FFC700 !important;
  color:#121127 !important;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.35) !important;
}

/* Nav buttons + dots */
#nx-mobile-carousel .nx-mc__nav{
  display: grid !important;
  grid-template-columns: 44px 1fr 44px !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 12px !important;
}
#nx-mobile-carousel .nx-mc__btn{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 1px solid rgba(18,17,39,.12) !important;
  background: rgba(255,255,255,.75) !important;
  box-shadow: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  font-size: 24px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#nx-mobile-carousel .nx-mc__btn:disabled{ opacity: .45 !important; cursor: not-allowed !important; }

#nx-mobile-carousel .nx-mc__dots{
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
}
#nx-mobile-carousel .nx-mc__dot{
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  background: rgba(18,17,39,.18) !important;
  box-shadow: none !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: width .2s ease, background .2s ease;
}
#nx-mobile-carousel .nx-mc__dot.is-active{
  width: 22px !important;
  background: rgba(18,17,39,.55) !important;
}

/* RIGHT column alignment */
#nx-mobile-carousel .nx-mc__right,
#nx-mobile-carousel .nx-mc__visual{
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* PHONE frame */
#nx-mobile-carousel .nx-mc__phone{
  width: clamp(240px, 60vw, 300px) !important;
  aspect-ratio: 9 / 17 !important;

  border-radius: 26px !important;
  padding: 10px !important;

  background: rgba(255,255,255,.65) !important;
  border: 1px solid rgba(18,17,39,.08) !important;
  box-shadow: 0 20px 40px -30px rgba(18,17,39,.35) !important;

  margin-inline: auto !important;
}

/* screen */
#nx-mobile-carousel .nx-mc__screen{
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  border: 1px solid rgba(18,17,39,.08) !important;
  overflow: hidden !important;
}

/* =========================================
   IMAGE ANIMATION (ONE BLOCK ONLY)
   ========================================= */
#nx-mobile-carousel .nx-mc__img{
  position: absolute !important;
  width: calc(100% + 2px) !important;
  height: calc(100% + 2px) !important;

  display: block !important;
  object-fit: cover !important;
  object-position: center !important;

  opacity: 0;
  transform: translateX(24px) scale(.985) translateZ(0);
  filter: blur(6px);

  transition:
    opacity .45s cubic-bezier(.22,.61,.36,1),
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .55s cubic-bezier(.22,.61,.36,1);

  will-change: opacity, transform, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
#nx-mobile-carousel .nx-mc__img.is-active{
  opacity: 1;
  transform: translateX(0) scale(1) translateZ(0);
  filter: blur(0);
  z-index: 2;
}
#nx-mobile-carousel .nx-mc__img.is-exit{
  opacity: 0;
  transform: translateX(-24px) scale(.985) translateZ(0);
  filter: blur(6px);
  z-index: 1;
}

/* web/mob switches */
#nx-mobile-carousel .nx-mc__img--mob{ display:none; }
@media (max-width: 767px){
  #nx-mobile-carousel .nx-mc__img--web{ display:none; }
  #nx-mobile-carousel .nx-mc__img--mob{ display:block; }
}

/* =========================================
   TEXT FADE (middle zone only)
   ========================================= */
#nx-mobile-carousel .nx-mc__mid.is-fading{
  pointer-events: none;
}
#nx-mobile-carousel .nx-mc__h3,
#nx-mobile-carousel .nx-mc__list{
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
}
#nx-mobile-carousel .nx-mc__mid.is-fading .nx-mc__h3,
#nx-mobile-carousel .nx-mc__mid.is-fading .nx-mc__list{
  opacity: 0;
  transform: translateY(6px);
}

/* =========================================
   HINT RING
   ========================================= */
#nx-mobile-carousel .nx-mc__btn,
#nx-mobile-carousel .nx-mc__dot,
#nx-mobile-carousel .nx-mc__tabs{
  position: relative;
}
#nx-mobile-carousel.is-hinting .nx-mc__btn::after,
#nx-mobile-carousel.is-hinting .nx-mc__dot::after,
#nx-mobile-carousel.is-hinting .nx-mc__tabs::after{
  content: "" !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  border: 2px solid rgba(255,199,0,0) !important;
  box-shadow: 0 0 0 0 rgba(255,199,0,0);
  animation: nxHintRing 1.1s ease-in-out infinite;
}
#nx-mobile-carousel.is-hinting .nx-mc__dot::after{ inset: -5px !important; }
#nx-mobile-carousel.is-hinting .nx-mc__tabs::after{ inset: -8px !important; }

@keyframes nxHintRing{
  0%,100%{
    border-color: rgba(255,199,0,0);
    box-shadow: 0 0 0 0 rgba(255,199,0,0);
    transform: scale(1);
  }
  50%{
    border-color: rgba(255,199,0,1);
    box-shadow: 0 0 0 10px rgba(255,199,0,.20);
    transform: scale(1.01);
  }
}

/* OPTIONAL: blink-fill ONLY the NEXT button */
#nx-mobile-carousel.is-hinting #nx-mc-next{
  animation: nxHintFill 1.1s ease-in-out infinite;
}
@keyframes nxHintFill{
  0%,100%{
    background: rgba(255,255,255,.75);
    border-color: rgba(18,17,39,.12);
  }
  50%{
    background: #FFC700;
    border-color: #FFC700;
  }
}

/* =========================
   NX Mobile Carousel — MOBILE STACK FIX
   (įdėk CSS gale)
   ========================= */
@media (max-width: 767px){

  #nx-mobile-carousel{ margin: 18px 0; }

  #nx-mobile-carousel .nx-mc__wrap{
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px;
  }

  /* IMPORTANT: išjunk “equal height + 3 zonos” desktop logiką */
  #nx-mobile-carousel .nx-mc__copy{
    min-height: 0 !important;
    display: block !important;          /* vietoj grid */
  }
  #nx-mobile-carousel .nx-mc__top,
  #nx-mobile-carousel .nx-mc__mid,
  #nx-mobile-carousel .nx-mc__bottom{
    align-self: auto !important;
  }

  /* tekstas turi būti tiesiog vienas po kito, be didelių skylių */
  #nx-mobile-carousel .nx-mc__title{ margin: 0 0 8px; }
  #nx-mobile-carousel .nx-mc__sub{ margin: 0 0 12px; }
  #nx-mobile-carousel .nx-mc__tabs{ margin-bottom: 12px !important; }

  #nx-mobile-carousel .nx-mc__h3{ margin: 10px 0 8px; }
  #nx-mobile-carousel .nx-mc__list{ margin: 0 0 12px; }

  /* phone per visą plotį, bet su max (atrodo švariai) */
  #nx-mobile-carousel .nx-mc__right{
    justify-content: center !important;
  }
  #nx-mobile-carousel .nx-mc__phone{
    width: min(340px, 100%) !important;
    margin: 8px auto 0 !important;
  }

  /* navigacija arčiau vaizdo */
  #nx-mobile-carousel .nx-mc__nav{
    margin-top: 10px !important;
    grid-template-columns: 40px 1fr 40px !important;
    gap: 8px !important;
  }
  #nx-mobile-carousel .nx-mc__btn{
    width: 40px !important;
    height: 40px !important;
    font-size: 22px !important;
  }
  #nx-mobile-carousel .nx-mc__dots{ gap: 6px !important; }
}

@media (max-width: 767px){
  #nx-mobile-carousel #nx-mc-prev,
  #nx-mobile-carousel #nx-mc-next{ display:none !important; }
  #nx-mobile-carousel .nx-mc__nav{ grid-template-columns: 1fr !important; }
}

/* ===========================
   NX Policy Types (4 cards)
   =========================== */

#nx-policy-types.nx-pt{
  margin: 26px 0 10px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(18,17,39,.08);
  box-shadow: 0 14px 40px -28px rgba(18,17,39,.25);
}

#nx-policy-types .nx-pt__head{ margin-bottom: 14px; }
#nx-policy-types .nx-pt__title{
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.25;
}
#nx-policy-types .nx-pt__sub{
  margin: 0;
  color: rgba(18,17,39,.56);
  line-height: 1.8;
  max-width: 70ch;
}

#nx-policy-types .nx-pt__grid{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1199px){
  #nx-policy-types .nx-pt__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  #nx-policy-types.nx-pt{ padding: 16px; }
  #nx-policy-types .nx-pt__grid{ grid-template-columns: 1fr; }
}

#nx-policy-types .nx-pt__card{
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid rgba(18,17,39,.10);
  box-shadow: 0 14px 40px -34px rgba(18,17,39,.30);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

#nx-policy-types .nx-pt__card:hover{
  transform: translateY(-2px);
  border-color: rgba(11,128,240,.25);
  box-shadow: 0 18px 46px -34px rgba(18,17,39,.38);
}

#nx-policy-types .nx-pt__badge{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: rgba(11,128,240,.08);
  border: 1px solid rgba(11,128,240,.18);
  color: rgba(18,17,39,.82);
}

#nx-policy-types .nx-pt__name{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 8px;
  padding-right: 40px; /* space for badge */
}

#nx-policy-types .nx-pt__desc{
  margin: 0 0 12px;
  color: rgba(18,17,39,.62);
  line-height: 1.7;
  font-size: 14px;
}

#nx-policy-types .nx-pt__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#nx-policy-types .nx-pt__chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18,17,39,.05);
  border: 1px solid rgba(18,17,39,.08);
  color: rgba(18,17,39,.78);
}

/* --- Sequential blink (active card) --- */
@keyframes nxCardBlink {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,199,0,0); border-color: rgba(18,17,39,.12); }
  50%     { box-shadow: 0 0 0 10px rgba(255,199,0,.22); border-color: #FFC700; }
}

/* apply only while blinking */
#nx-policy-types [data-pt-card].is-blink{
  animation: nxCardBlink .75s ease-in-out;
}

/* ===========================
   NX Ecosystem (Ultra Premium)
   =========================== */

#nx-ecosystem.nx-eco{
  margin: 26px 0 18px;
}

@media (min-width: 768px){
  #nx-ecosystem.nx-eco{
    padding-top: 50px;
  }
}

#nx-ecosystem .nx-eco__head{
  margin: 0 auto 14px;
}

#nx-ecosystem .nx-eco__title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.1vw, 44px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(18,17,39,.96);
}

#nx-ecosystem .nx-eco__sub{
  margin: 0 0 14px;
  color: rgba(18,17,39,.62);
  line-height: 1.85;
  font-size: 16px;
  max-width: 78ch;
}

#nx-ecosystem .nx-eco__note{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(18,17,39,.08);
  box-shadow: 0 10px 26px -22px rgba(18,17,39,.25);
  color: rgba(18,17,39,.74);
  line-height: 1.6;
}

#nx-ecosystem .nx-eco__noteDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,199,0,.95);
  box-shadow: 0 0 0 6px rgba(255,199,0,.18);
  margin-top: 6px;
  flex: 0 0 10px;
}

#nx-ecosystem .nx-eco__panel{
  position: relative;
  margin-top: 14px;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(233,248,251,1), rgba(255,249,241,1));
  border: 1px solid rgba(18,17,39,.08);
  box-shadow: 0 18px 60px -44px rgba(18,17,39,.35);
  overflow: hidden;
}

#nx-ecosystem .nx-eco__panel::before{
  content:"";
  position:absolute;
  inset:-140px -220px auto auto;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: rgba(11,128,240,.08);
  filter: blur(0px);
  pointer-events:none;
}

#nx-ecosystem .nx-eco__panel::after{
  content:"";
  position:absolute;
  inset:auto auto -180px -240px;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: rgba(255,199,0,.08);
  pointer-events:none;
}

#nx-ecosystem .nx-eco__rail{
  position:absolute;
  left: 18px;
  right: 18px;
  top: 88px;
  height: 0;
  border-top: 2px dashed rgba(11,128,240,.22);
  pointer-events:none;
}

#nx-ecosystem .nx-eco__grid{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  z-index: 1;
}

@media (max-width: 1199px){
  #nx-ecosystem .nx-eco__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nx-ecosystem .nx-eco__rail{ display:none; }
}
@media (max-width: 767px){
  #nx-ecosystem .nx-eco__panel{ padding: 14px; }
  #nx-ecosystem .nx-eco__grid{ grid-template-columns: 1fr; }
}

#nx-ecosystem .nx-eco__card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(18,17,39,.10);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: 0 14px 44px -36px rgba(18,17,39,.32);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 162px;
  transform: translateY(10px);
  opacity: 0;
}

#nx-ecosystem .nx-eco__card.is-in{
  transform: translateY(0);
  opacity: 1;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s cubic-bezier(.22,.61,.36,1);
}

#nx-ecosystem .nx-eco__card:hover{
  transform: translateY(-2px);
  border-color: rgba(11,128,240,.22);
  box-shadow: 0 18px 60px -42px rgba(18,17,39,.40);
}

#nx-ecosystem .nx-eco__card.is-primary{
  border-color: rgba(11,128,240,.22);
  box-shadow: 0 20px 70px -52px rgba(18,17,39,.45);
}

#nx-ecosystem .nx-eco__cardTop{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}

#nx-ecosystem .nx-eco__icon{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,128,240,.08);
  border: 1px solid rgba(11,128,240,.16);
  color: rgba(18,17,39,.78);
  flex: 0 0 36px;
}

#nx-ecosystem .nx-eco__icon svg{
  width: 18px;
  height: 18px;
}

#nx-ecosystem .nx-eco__name{
  margin: 0;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: rgba(18,17,39,.92);
}

#nx-ecosystem .nx-eco__desc{
  margin: 0 0 10px;
  color: rgba(18,17,39,.64);
  line-height: 1.65;
  font-size: 13.5px;
}

#nx-ecosystem .nx-eco__tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: auto;
}

#nx-ecosystem .nx-eco__tag{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(18,17,39,.05);
  border: 1px solid rgba(18,17,39,.08);
  color: rgba(18,17,39,.76);
}

/* CTA */
#nx-ecosystem .nx-eco__cta{
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(18,17,39,.10);
  box-shadow: 0 14px 50px -40px rgba(18,17,39,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#nx-ecosystem .nx-eco__ctaKicker{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(18,17,39,.55);
  margin-bottom: 6px;
}

#nx-ecosystem .nx-eco__ctaTitle{
  font-weight: 900;
  font-size: 18px;
  color: rgba(18,17,39,.92);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

#nx-ecosystem .nx-eco__ctaSub{
  color: rgba(18,17,39,.62);
  line-height: 1.7;
  font-size: 14px;
  max-width: 72ch;
}

#nx-ecosystem .nx-eco__ctaActions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

#nx-ecosystem .nx-eco__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(18,17,39,.12);
  background: rgba(255,255,255,.75);
  color: rgba(18,17,39,.88);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}

#nx-ecosystem .nx-eco__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -30px rgba(18,17,39,.35);
  border-color: rgba(11,128,240,.22);
}

#nx-ecosystem .nx-eco__btn--primary{
  background: #0B80F0;
  border-color: rgba(11,128,240,.45);
  color: #fff;
}

#nx-ecosystem .nx-eco__btn--primary:hover{
  box-shadow: 0 18px 50px -34px rgba(11,128,240,.55);
}

#nx-ecosystem .nx-eco__btn--ghost{
  background: rgba(255,255,255,.55);
}

/* CTA layout upgrade */
#nx-ecosystem .nx-eco__cta{
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  align-items: center;
  gap: 16px;
}

@media (max-width: 991px){
  #nx-ecosystem .nx-eco__cta{
    grid-template-columns: 1fr;
  }
}

/* left/right containers */
#nx-ecosystem .nx-eco__ctaLeft{ min-width: 0; }
#nx-ecosystem .nx-eco__ctaRight{
  display: grid;
  gap: 12px;
  justify-items: end;
}

@media (max-width: 991px){
  #nx-ecosystem .nx-eco__ctaRight{ justify-items: start; }
}

/* price card */
#nx-ecosystem .nx-eco__price{
  width: 100%;
  max-width: 430px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(18,17,39,.10);
  box-shadow: 0 14px 40px -34px rgba(18,17,39,.32);
}

#nx-ecosystem .nx-eco__priceTop{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: rgba(18,17,39,.55);
  margin-bottom: 6px;
}

#nx-ecosystem .nx-eco__priceMain{
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1;
  margin-bottom: 6px;
}

#nx-ecosystem .nx-eco__priceFrom{
  font-weight: 900;
  color: rgba(18,17,39,.70);
}

#nx-ecosystem .nx-eco__priceVal{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: rgba(18,17,39,.92);
}

#nx-ecosystem .nx-eco__priceVat{
  font-weight: 900;
  color: rgba(18,17,39,.62);
}

#nx-ecosystem .nx-eco__priceNote{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(18,17,39,.58);
}

/* make buttons align nicely under price */
#nx-ecosystem .nx-eco__ctaActions{
  justify-content: flex-end;
}

@media (max-width: 991px){
  #nx-ecosystem .nx-eco__ctaActions{ justify-content: flex-start; }
}

/* ===============================
   PRICE MINI TAB — PRIMARY FOCUS
   =============================== */

#nx-ecosystem .nx-eco__price{

  /* layout */
  display: inline-block;
  padding: 14px 18px;

  /* blue highlight */
  border: 2px solid #1a73e8;
  background: rgba(26,115,232,0.06);

  /* shape */
  border-radius: 14px;

  /* typography stays readable */
  line-height: 1.35;

  /* premium feel */
  transition: all .25s ease;
}

/* subtle premium hover */
#nx-ecosystem .nx-eco__price:hover{
  background: rgba(26,115,232,0.09);
  box-shadow: 0 12px 32px -18px rgba(26,115,232,.35);
  transform: translateY(-1px);
}

/* EXACT SAME SIZE as "Peržiūrėti galimybes" */
#nx-ecosystem .btn-contact-us{

  height: 42px !important;              /* force identical height */
  
  border-radius: 12px !important;

  font-size: 15px !important;
  font-weight: 600 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;           /* CRITICAL */

  background: #FFC700 !important;
  border: 1px solid #FFC700 !important;
  color: #121127 !important;

  box-shadow: 0 10px 24px -12px rgba(255,199,0,.45);

  transition: all .2s ease;
}

/* arrow alignment */
#nx-ecosystem .btn-contact-us .arrow{
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
}

/* hover */
#nx-ecosystem .btn-contact-us:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -12px rgba(255,199,0,.55);
}

/* --- Mobile: stack CTA buttons full-width --- */
@media (max-width: 767px){
  #nx-ecosystem .nx-eco__ctaActions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* make BOTH buttons full width */
  #nx-ecosystem .nx-eco__ctaActions > *{
    width: 100% !important;
  }

  /* if buttons are <button> or <a>, force block sizing */
  #nx-ecosystem .nx-eco__ctaActions .btn-contact-us,
  #nx-ecosystem .nx-eco__ctaActions .nx-eco__btn{
    width: 100% !important;
    height: 46px !important;
    justify-content: center !important;
  }
}

/* Optional: make injected prefix/suffix align like real typography */
.count { display: inline-flex; align-items: baseline; gap: 6px; }
.nx-count__prefix,
.nx-count__suffix { font-weight: 800; }

/* FOR AI hide */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}