/* font */

@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regular-webfont.woff2') format('woff2'),
        url('../fonts/n27-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regular-webfont.woff2') format('woff2'),
        url('../fonts/n27-regular-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* regular - italic */
@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-regularitalic-webfont.woff2') format('woff2'),
        url('../fonts/n27-n27-regularitalic-webfont-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

/* bold */
@font-face {
    font-family: 'N27';
    src: url('../fonts/n27-bold-webfont.woff2') format('woff2'),
        url('../fonts/n27-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}



html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: hidden;
}

b {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}


:root {
    --primary: #122A3C;
    --green: #3EB8B1;
    --red: #E94667;
    --yellow: #BFD121;
}


a{
    text-decoration: none;
}

a:hover{
    cursor: pointer;
}

ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

h1, h2, h3, p{
    margin: 0;
    padding: 0;
}

.container{
    width: 1300px;
    max-width: 100%;
    margin: 0px auto;
    padding: 0 10px;
}


body {
    margin: 0;
    background: #fff;
    font-family: 'N27';
    color: var(--primary);
}


h1{
    font-size: 55px;
    font-weight: 700;
}

h2{
    margin: 0px;
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 40px;
}

/* NAVIGATION */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 48px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: relative;
    z-index: 3;
}
.logo img {
    height: 34px;
}
.navbar nav ul {
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    /*    margin-top: 50px;*/
}
.navbar nav a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    transition: color .2s;
}
.navbar nav a:hover {
    color: var(--green);
}


.navbar nav a.active{
    color: var(--green);
}


.navbar .main-logo svg{
    fill: #333;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.lang {
    display: flex;
    gap: 10px;
}

.lang li{
}

.lang li a{
    color: var(--primary);
    font-weight: 700;
}
.lang li a:hover{
    color: var(--red);
}

.lang li a.lang-nav-active{
    color: var(--red);
}


.btn-signup {
    background: var(--primary);
    color: #ffffff;
    border-radius: 22px;
    text-decoration: none;
    transition: background .2s;
    text-transform: uppercase;
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    font-weight: 700;
}
.btn-signup:hover {
    background: var(--green);
}

/* HERO */
.hero {
    min-height: 92vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
}
.hero-left {
    color: #fff;
    /* max-width: 450px; */
}
.hero-left h1 {
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 15px;
}
.hero-left{
    font-size: 20px;
    margin-bottom: 20px;
    flex: 1;
}
.app-buttons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}
.appstore img, .googleplay img {

}

.hero-right {
    width: 530px;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
}

.hero-card {
    background: rgb(20 30 44 / 66%);
    padding: 36px 34px 30px 34px;
    width: 100%;
    border-radius: 22px;
    border: 2px solid var(--green);
}
.tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.tab {
    color: var(--green);
    border: none;
    font-size: 16px;
    cursor: pointer;
    background: none;
    height: 41px;
    display: inline-block;
    font-weight: 700;
    padding: 0px 22px;
}
.tab.active{
    color: #fff;
    border: 1px solid #ffffff;
    border-radius: 22px;
}

.tab:hover {
    color: #fff;
}

.card-content h3 {
    color: #ffffff;
    font-size: 25px;
    margin: 0;
    margin-bottom: 10px;
}
.card-content p {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
    color: #b2d2e3;
}




.feature-section {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 0;
}

/* Top row */
.feature-top {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}
.feature-top-left {
    flex: 1;
}
.feature-top-left h2 {

}
.feature-top-left ul {
    margin: 0;
    padding-bottom: 65px;
}
.feature-top-left li {
    margin-bottom: 9px;
    position: relative;
    font-size: 20px;
    padding-left: 40px;
    margin-bottom: 15px;
}
.feature-top-left li:before {
    content: '';
    position: absolute;
    left: 0;
    width: 28px;
    height: 28px;
    background: url('../images/icons/check.svg') center/contain no-repeat;
}
.feature-top-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-top-right img{
    width: 260px;
}

.feature-top-right .phone1{
    z-index: 1;
}

.feature-top-right .phone2{
    width: 220px;
    height: 448px;
    margin-left: -55px;
}


/* Middle row */
.feature-main {
    background-color: var(--primary);
    position: relative;
    margin-top: -42px;
    padding: 80px 0;
    background: linear-gradient(
        90deg, #103a4e, #122a3c);
}

.feature-main .feature-main-box{
    display: flex;
    align-items: center;
}

.feature-images {
    display: grid;
    grid-template-columns: repeat(3, 169px);
    grid-template-rows: repeat(3, 221px);
    gap: 18px;
    position: relative;
    margin-right: 24px;
}
.feature-images img {
    border-radius: 20px;
    width: 169px;
    height: 221px;
    object-fit: cover;
    border: 4px solid var(--green);
}
.feature-images img:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    margin-top: 100px;
}
.feature-images img:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
.feature-images img:nth-child(3) {
    grid-column: 3;
    grid-row: 1;
    margin-top: 100px;
}
.feature-images img:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
    margin-top: 100px;
}
.feature-images img:nth-child(5) {
    grid-column: 2;
    grid-row: 2;
}
.feature-images img:nth-child(6) {
    grid-column: 3;
    grid-row: 2;
    margin-top: 100px;
}
.feature-images img:nth-child(7) {
    grid-column: 2;
    grid-row: 3;
}
.feature-main-right {
    flex: 1.4;
    color: #fff;
    margin-left: 38px;
}
.feature-main-right h2 {
    color: #fff;
}
.feature-list {
    /*    display: flex;
        flex-direction: column;
        gap: 24px;*/
    color: #b2d2e3;
}

.feature-main-right{
    font-size: 20px;
}

.feature-main-right h3{
    font-weight: 700;
    color: #22d0ba;
    font-size: 30px;
    margin-bottom: 10px;
    display: block;
    margin-top: 30px;
}

/* Bottom stats bar */
.feature-stats {
    width: 100%;
    background-color: var(--green);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
}

.feature-stats .feature-stats-box{
    display: flex;
    padding: 50px 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}


.feature-stats .feature-stats-box .single-stat{
    flex: 1;
    text-align: center;
    font-size: 30px;
    color: #ffffff;
}

.feature-stats .feature-stats-box .single-stat .number{
    font-size: 60px;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: -10px;
}


.explore-section {
    width: 100%;
    background: #F9FAFA;
}
.explore-inner {
    padding-top: 90px;
    padding-bottom: 50px;
}
.explore-title {
    text-align: center;
    /* margin-bottom: 32px; */
}
.explore-flex {
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
}
.explore-left {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex: 1;
}

.explore-left .content{
}

.explore-feature {
    background: #fff;
    display: flex;
    align-items: flex-start;
    min-height: 76px;
    position: relative;
    padding: 25px 40px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    border: 1px solid #F3EDED;
}
.explore-feature .bar {
    width: 12px;
    border-radius: 3px;
    flex-shrink: 0;
    position: absolute;
    height: 100%;
    left: 0px;
    top: 0;
}
.explore-feature.green .bar {
    background: #BFD121;
}
.explore-feature.pink .bar {
    background: #E94667;
}
.explore-feature.yellow .bar {
    background: var(--green);
}
.ef-title {
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 9px;
}
.ef-desc {
    font-size: 20px;
}

.explore-right {
    flex: 1;
    display: flex;
    align-items: center;
}
.explore-phones {
    position: relative;
    width: 237px;
    height: auto;
    display: flex;
    align-items: center;
}
.explore-phones .phone {
    position: absolute;
    width: 110px;
    height: 220px;
    object-fit: contain;
    top: 0;
    filter: drop-shadow(0 8px 30px rgba(45,56,80,0.13));
    transition: transform 0.18s;
}
.explore-phones .phone1 {
    width: 210px;
    height: 421px;
    margin-right: -50px;
}
.explore-phones .phone2 {
    left: 52px;
    z-index: 2;
    height: 482px;
}
.explore-phones .phone3 {
    width: 210px;
    height: 421px;
    margin-left: -50px;
}
.explore-slider-dots {
    margin: 24px 0 0 0;
    text-align: center;
}
.explore-slider-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d7e3eb;
    margin: 0 5px;
    transition: background 0.2s;
}
.explore-slider-dots .dot.active {
    background: var(--yellow);
}


.logobar {
  width: 100%;
  background: #fff;
  padding: 20px 0;
  border-top: 1.5px solid #f3eded;
  overflow: hidden;
}

.logos-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* DESKTOP privzeto: marquee */
.logos {
  display: flex;
  gap: 44px;
  align-items: center;
  animation: scroll-logos 30s linear infinite;
  will-change: transform;
}

.img-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logos img {
  height: 80px;
  width: 120px;
  object-fit: contain;
  filter: grayscale(1);
  -webkit-user-drag: none;
}

/* Dots (skriti na desktopu) */
.logos-dots {
  display: none;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.logos-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d6d6d6;
  transition: transform 200ms ease, background 200ms ease, width 200ms ease;
}
.logos-dots .dot.active {
  background: #122a3c;           /* tvoja primarna */
  transform: scale(1.15);
  width: 14px;                    /* “pili” za aktivno */
}

/* Marquee keyframes */
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}




.explore-locations {
    position: relative;
    text-align: center;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 25px;
}

.explore-locations .explore-content{
    max-width: 50%;
}

.explore-locations h2 {
}
/*.explore-desc {
    font-size: 25px;
    margin-bottom: 24px;
}*/
.explore-locations a {
    background-color: var(--green);
    color: #fff;
    border-radius: 100px;
    transition: background .18s;
    margin-bottom: 12px;
    height: 40px;
    padding: 0 25px;
    line-height: 38px;
    font-weight: 700;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    text-transform: uppercase;
}
.explore-locations a:hover {
    background: var(--yellow);
}


.howitworks-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 100px;
}

.howitworks-section .howitworks-content{

}

.howitworks-left {
}
.howitworks-left h2 {
    color: #ffffff;
    margin-bottom: 24px;
}
.hiw-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}
.hiw-list li {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.hiw-list li span {
    display: inline-block;
    font-size: 40px;
    color: #BFD121;
    font-weight: 700;
    width: 80px;
}

.howitworks-section .howitworks-content a{
    background: var(--green);
    color: #fff;
    border-radius: 22px;
    font-weight: 700;
    display: inline-block;
    transition: background .18s;
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    text-transform: uppercase;
}
.howitworks-section .howitworks-content a:hover {
    background: var(--yellow);
}
.howitworks-right {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    min-width: 320px;
    max-width: 480px;
    height: 260px;
    margin: 0 0 0 16px;
    position: relative;
}
.howitworks-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    box-shadow: 0 6px 38px rgba(25,32,44,0.13);
}

/* --- PREMIUM --- */
.premium-section {
    margin: 0;
    padding: 0;
    background: #fff;
}
.premium-bar {
    background: #e94667;
    color: #fff;
    text-align: center;
    font-size: 40px;
    margin: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0px;
}
.premium-logo {
    height: 84px;
    margin-left: 20px;/* width: 280px; */
}
.premium-inner {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    text-align: center;
    padding: 38px 18px 40px 18px;
}
.premium-inner h3 {
    color: #193142;
    font-size: 1.28rem;
    margin-bottom: 12px;
    font-weight: 700;
}
.premium-inner p {
    color: #2d4257;
    font-size: 1.04rem;
    margin-bottom: 34px;
}
.premium-features {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 34px;
    flex-wrap: wrap;
}
.premium-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    min-width: 180px;
}
.premium-list li {
    font-size: 1.05rem;
    font-weight: 500;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 16px;
    position: relative;
}
.premium-list .feature-green::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--yellow);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.premium-list .feature-pink::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #e986a0;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.premium-list .feature-yellow::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fbdc01;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.premium-list .feature-blue::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #22d0ba;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.premium-list .feature-red::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #ea6682;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}
.premium-table {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    justify-content: center;
}
.premium-plan {
    background: #183142;
    border-radius: 15px;
    padding: 10px 16px 12px 16px;
    color: #fff;
    min-width: 84px;
}
.plan-title {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
    text-align: center;
}
.premium-plan ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.premium-plan ul li {
    font-size: 1.13rem;
    margin: 6px 0;
    color: #22d0ba;
    font-weight: bold;
    height: 1.5em;
}
.premium-plan ul li:empty {
    color: #aaa;
    opacity: 0.08;
}

.trust-section {
    background: #183142;
    padding-top: 100px;
    padding-bottom: 100px;
    background: linear-gradient(180deg, #103a4e, #0f2b3b);
    background: linear-gradient(180deg, #103a4e, #122a3c);
}
.trust-inner {
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
}
.trust-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 13px;
    min-width: 256px;
    max-width: 523px;
    width: 100%;
}
.trust-photos img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    width: 250px;
    height: 250px;
    border: 4px solid var(--green);
}
.trust-text {
    color: #b2d2e3;
    font-size: 20px;
    flex: 1;
}
.trust-text h2 {
    color: #fff;
    font-size: 70px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
/*.trust-text p {
    margin-bottom: 16px;
}*/
.trust-text a {
    display: inline-block;
    background: #22d0ba;
    color: #fff;
    font-weight: 700;
    border-radius: 22px;
    padding: 0 30px;
    margin-top: 8px;
    height: 40px;
    line-height: 40px;
    margin-top: 20px;
    text-transform: uppercase;
}
.trust-text a:hover {
    background: var(--yellow);
}


/* --- TESTIMONIAL --- */
.testimonial-section {
    background-color: #F9FAFA;
    overflow: hidden;
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
}
.testimonial-inner {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    justify-content: center;
}
.testimonial-left {
    flex: 1;
}
.testimonial-title {
    margin-bottom: 22px;
}
.testimonial-avatars {
    display: flex;
    gap: 9px;
}
.testimonial-avatars img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.5;
}

.testimonial-avatars img:hover{
    opacity: 1;
}

.testimonial-avatars img.active{
    opacity: 1;
}

.testimonial-right {
    flex: 1;
    display: flex;
    margin-left: 36px;
    position: relative;
}
.testimonial-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    max-width: 500px;
    position: relative;
    border: 1px solid #F3EDED;
}


.testimonial-card .qoute{
    position: absolute;
    right: 0px;
    top: -50px;
}

.testimonial-card .testimonial-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
}

.testimonial-quote {
    font-size: 20px;
    font-style: italic;
    margin-bottom: 18px;
    padding-right: 50px;
    padding-top: 40px;
    padding-bottom: 15px;
}
.testimonial-user {
    font-weight: 700;
    display: flex;
    gap: 10px;
}

.testimonial-user img{
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.testimonial-user-desc-box{

}

.testimonial-user-desc {
    display: block;
    font-size: 14px;
    font-weight: 500;
}
.testimonial-slider {
    position: absolute;
    bottom: 40px;
    right: 20px;
}
.slider-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-block;
    background: #122a3c73;
    margin-right: 5px;
    cursor: pointer;
}
.slider-dot.active {
    background: var(--primary);
}
.testimonial-quote-icon {
    font-size: 3.6rem;
    color: #fbdc01;
    opacity: 0.10;
    position: absolute;
    right: 20px;
    top: -14px;
    pointer-events: none;
    z-index: 0;
}
.testimonial-bg-logo {
    position: absolute;
    right: 0;
    top: 0;
    letter-spacing: 0.08em;
    user-select: none;
    z-index: 0;
}
@media (max-width: 980px) {
    .testimonial-inner {
        flex-direction: column;
        gap: 16px;
        padding: 0 2vw;
    }
    .testimonial-right {
        margin-left: 0;
    }
    .testimonial-bg-logo {
        font-size: 3.2rem;
        top: 210px;
        right: 8px;
    }
}
@media (max-width: 600px) {
    .testimonial-card {
        padding: 16px 10px 15px 14px;
    }
    .testimonial-bg-logo {
        font-size: 2.1rem;
        top: 190px;
        right: -8vw;
    }
}

/* --- JOIN HERO --- */
.join-section {
    background: #183142;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 80px;
    padding-bottom: 80px;
}
.join-inner {
    margin: 0 auto;
    display: flex;
}
.join-left {
    flex: 1.6;
    min-width: 220px;
    display: flex;
    align-items: stretch;
}
.join-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 240px;
    border: none;
    border-radius: 0;
}
.join-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    color: #b2d2e3;
}
.join-right h2 {
    margin-bottom: 18px;
    color: #ffffff;
    font-size: 70px;
    text-transform: uppercase;
    /* width: 70%; */
}

.join-right a {
    background: #22d0ba;
    color: #fff;
    border-radius: 100px;
    display: inline-block;
    transition: background .17s;
    margin-top: 8px;
    height: 40px;
    padding: 0 30px;
    width: max-content;
    line-height: 40px;
    font-weight: 700;
    margin-top: 20px;
    text-transform: uppercase;
}
.join-right a:hover {
    background: var(--yellow);
}


/* --- PARTNERSHIPS --- */
.partnerships-section {
    padding-top: 100px;
    padding-bottom: 100px;
}
.partnerships-inner {
    display: flex;
    gap: 40px;
}

.partnerships-content{
    flex: 1;
}

.partnerships-title {
    margin-top: 80px;
}
.partnerships-desc {
    font-size: 20px;
}
.partnerships-cards {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    /* flex: 1; */
    flex-direction: row;
}
.partnership-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #112233;
    display: flex;
    flex: 1;
    width: 420px;
    padding-top: 230px;
    padding-bottom: 40px;
}
.partnership-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1;
    /* filter: brightness(0.82); */
    transition: opacity .17s;
}
.partnership-card .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #153142f0 30%, transparent 100%);
    z-index: 2;
    opacity: 1;
}
.partnership-card .card-content {
    position: relative;
    z-index: 3;
    color: #fff;
    width: 100%;
    padding: 30px;
    font-size: 20px;
}


.hero-card .card-content{
    display: none;
}

.card-content.is-active{
    display: block;
}

.card-content.is-active p{
    color: #ffffff;
}


.hero-card .card-content a{
    display: inline-block;
    color: #fff;
    font-weight: 700;
    background-color: var(--red);
    font-size: 16px;
    height: 40px;
    padding: 0 25px;
    border-radius: 22px;
    line-height: 40px;
    text-transform: uppercase;
    margin-top: 20px;
    transition: background .18s;
}

.hero-card .card-content a:hover{
    background: var(--green);
}


.partnership-card .card-content h3 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 6px;
}

.partnership-card .card-content a{
    color: #ffffff;
    border-radius: 100px;
    padding: 0 30px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    height: 40px;
    border: 1px solid var(--green);
    line-height: 40px;
    z-index: 2;
    margin-top: 20px;
    text-transform: uppercase;
}
.partnership-card .card-content a:hover {
    background: var(--green);
    cursor: pointer;
}

.faq-section {
    /*    position: relative;
    background: none;
    z-index: 1;*/
    padding: 100px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.faq-inner {
    max-width: 900px;
    margin: 0 auto;
}
.faq-inner h2 {
    color: #fff;
    text-align: center;
}
.faq-accordion {
    margin: 0 0 18px 0;
    border-radius: 16px;
    background: rgba(255,255,255,0.10);
    /* box-shadow: 0 4px 36px rgba(10,20,35,0.06); */
    padding: 14px 0;
    backdrop-filter: blur(0.5px);
}
.faq-item {
    background: #fff;
    border-radius: 12px;
    margin: 0 12px 14px 12px;
    overflow: hidden;
    transition: box-shadow .18s;
    border: 1px solid #F3EDED;
}
.faq-item:last-child {
    margin-bottom: 0;
}
.faq-question {
    width: 100%;
    padding: 18px 22px 18px 22px;
    border: none;
    background: none;
    color: #183142;
    font-size: 1.11rem;
    font-weight: 700;
    text-align: left;
    position: relative;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-question:after {
    content: "";
    color: var(--yellow);
    transition: transform .16s;
    background-image: url(../images/icons/arrow-right.svg);
    height: 20px;
    width: 20px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate(90deg);
}
.faq-item.open .faq-question:after {
    transform: rotate(0deg);
}


.faq-item.open .faq-question{
    color: var(--green);
}

.faq-answer { display: none; }

.faq-answer {
    max-height: 0;
    opacity: 0;
    padding: 0 22px;
    color: #1c364a;
    font-size: 1.03rem;
    line-height: 1.45;
    overflow: hidden;
    transition: max-height .500s cubic-bezier(.7,0,.3,1), opacity .14s;
}
.faq-item.open .faq-answer {
    opacity: 1;
    max-height: fit-content;
    padding: 20px;
    padding-top: 0;
}
.faq-more-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 20px;
    padding: 0 30px;
    font-weight: 700;
    margin: 0 auto;
    display: block;
    width: max-content;
    height: 40px;
    line-height: 40px;
    margin-top: 30px;
    text-transform: uppercase;

}
.faq-more-btn:hover {
    background: var(--yellow);
}

.news-section {
    background: #F9FAFA;
    padding: 100px 0px;
}
.news-inner {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
}
.news-inner h2 {
}
.news-cards {
    display: flex;
    gap: 28px;
    justify-content: center;
    margin-bottom: 28px;
}
.news-card {
    background: #fff;
    border-radius: 20px;
    text-align: left;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #F3EDED;
    flex: 0 0 33.3%;
    color: var(--primary);
}
.news-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    display: block;
}
.news-content {
    padding: 20px;
}
.news-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 9px;
}
.news-desc {
    font-size: 16px;
}
.news-more-btn {
    background: var(--green);
    color: #fff;
    border-radius: 20px;
    padding: 0 30px;
    margin-top: 8px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    text-transform: uppercase;
}
.news-more-btn:hover {
    background: var(--yellow);
}

footer{
    background-color: var(--primary);
    padding: 50px 20px;
    color: #ffffff;
}


.footer-inner{
    display: flex;
    gap: 25px;
}


.footer-left{
    flex: 1;
}

.footer-left .content{

}


.footer-left .content .footer-logo{
    margin-bottom: 30px;
    display: block;
}

.footer-left .content .footer-logo svg{
    fill: #ffffff;
}

.footer-left .content .footer-main{
    display: flex;
}

.footer-left .content .footer-main .footer-links{
    flex: auto;
}

.footer-left .content .footer-main .footer-links a{
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
}


.footer-left .content .footer-main .footer-links a:hover{
    color: var(--green);
}

.footer-left .footer-links.social-links label{
    /* font-weight: 700; */
    margin-bottom: 10px;
    display: block;
}

.footer-left .content .footer-main .footer-links.social-links a{
    display: inline-block;
    margin-right: 5px;
}

.footer-left .footer-links.social-links a img{
    width: 24px;
}

.footer-left .footer-copyright{
    margin-top: 35px;
}

.footer-right{
    flex: 0.8;
}

.footer-right .footer-promo{
    background-color: var(--green);
    width: 560px;
    border-radius: 20px;
    display: flex;
    padding: 40px;
    flex-direction: column;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-right .footer-promo .footer-promo-title{
    font-weight: 700;
    font-size: 30px;
}
.footer-right .footer-promo .footer-promo-text{
    font-size: 18px;
    margin-bottom: 20px;
}

.benefits-section{
    padding-top: 100px;
    padding-bottom: 100px;
    text-align: center;
}

.benefits-section .benefits-inners{

}

.benefits-section .benefits-inners h2{
    margin-bottom: 20px;
}

.benefits-section .benefits-inners .benefits-text{
    font-size: 20px;
    max-width: 70%;
    margin: 0 auto;
}


.benefits-section .benefits-inners .benefits-icons{
    display: flex;
    gap: 30px;
    width: 80%;
    margin: 0 auto;
    margin-top: 50px;
}


.benefits-section .benefits-inners .benefits-icons .benefits-card{
    flex: 1;
}

.benefits-section .benefits-inners .benefits-icons .benefits-card .img-box{
    width: max-content;
    padding: 20px;
    border-radius: 20px;
    margin: 0 auto;
    border: 1px solid #F3EDED;
    background: linear-gradient(180deg, #103a4e, #0f2b3b);
}


.benefits-section .benefits-inners .benefits-icons .benefits-card img{
    width: 60px;
}

.benefits-section .benefits-inners .benefits-icons .benefits-card p{
    font-weight: 700;
    margin-top: 20px;
    font-size: 18px;
}


.designed-section{
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #f9fafa;
}

.designed-section .designed-inner{
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

.designed-section .designed-img-box{
    width: 340px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    flex: 0 0 30%;
    min-height: 500px;
}

.designed-section .designed-content{
    flex: 0 0 50%;
    width: 50%;
}

.designed-section .designed-content h2{
    margin-bottom: 30px;
}

.designed-section .designed-text{
    display: flex;
}

.designed-section .designed-card{
    font-size: 18px;
    margin-bottom: 20px;
}

.designed-section .designed-card h3{
    font-size: 20px;
    margin-top: 20px;
}

.designed-section.tailored-section{
    background-color: #ffffff;
}


.designed-section.tailored-section .designed-content{

}

.subpage .faq-inner h2{
    color: #122A3C;
}

.subpage .faq-section{
    background: #f9fafa;
}

.subpage .hero-left{
    width: 70%;
    flex: unset;
}

.subpage .hero-left a {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    background-color: var(--red);
    font-size: 16px;
    height: 40px;
    padding: 0 25px;
    border-radius: 22px;
    line-height: 40px;
    text-transform: uppercase;
    margin-top: 20px;
}
.subpage .hero-left a:hover {
    background: var(--green);
}


.plan-section{
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}


.plan-section .plan-inner{
    text-align: left;
    display: flex;
    gap: 30px;
}

.plan-section .plan-card{
    flex: 1;
    text-align: center;
    background-color: var(--primary);
    /* padding: 40px; */
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(180deg, #103a4e, #0f2b3b);
}


.plan-section .plan-card h3{
    font-size: 20px;
    color: var(--green);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 20px;
    text-transform: uppercase;
    padding-top: 30px;
}


.plan-section .plan-card .text{
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 16px;
    color: #b2d2e3;
    padding: 20px 20px;
    padding-bottom: 0;
}


.plan-section .plan-card a{
    color: #ffffff;
    border-radius: 100px;
    padding: 0 30px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    height: 40px;
    border: 1px solid var(--green);
    line-height: 40px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.plan-section .plan-card a:hover{
    background-color: var(--green);
}


.designed-section .designed-card ul{
    margin-top: 20px;
    margin-left: 10px;
}

.designed-section .designed-card ul li{
    margin-bottom: 5px;
}

.designed-section .designed-card ul li:before{
    content: '';
    display: inline-block;
    height: 12px;
    width: 12px;
    background-color: var(--green);
    border-radius: 50%;
    background-size: cover;
    margin-right: 10px;
}

.otherpage h1{
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 60px;
    margin-top: 50px;
}


.otherpage .designed-section{
    background: none;
    padding-top: 50px;
}


/* Osnova */
.navbar {
    /*    position: fixed;*/
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
}

/* Hamburger */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}
.nav-toggle .bar {
    display: block;
    width: 26px;
    height: 2px;
    margin: 5px 0;
    background: currentColor;
    transition: transform 200ms ease, opacity 180ms ease;
    transform-origin: 10% 50%;
}
.nav-toggle.is-open .bar:nth-child(1){
    transform: rotate(45deg) translate(3px, 4px);
}
.nav-toggle.is-open .bar:nth-child(2){
    opacity: 0;
    transform: translateX(8px);
}
.nav-toggle.is-open .bar:nth-child(3){
    transform: rotate(-45deg) translate(3px, -4px);
}

/* Mobilni panel – prihaja z vrha */
.nav-panel {
    display: none;               /* jQuery slideDown/slideUp upravlja prikaz */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary);         /* MODRA */
    color: #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    z-index: 120;
    padding: 14px 18px 20px;
    color: #ffffff;
}
.nav-panel a {
    color: #fff;
    text-decoration: none;
}
.nav-panel .panel-close{
    background: transparent;
    border: 0;
    color: #fff;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    right: 8px;
    font-size: 50px;
    height: 40px;
    width: 40px;
    text-align: center;
    border-radius: 8px;
}

/* Seznam v panelu */
.nav-mobile ul,
.nav-actions-mobile .lang{
    display: flex;
    gap: 34px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.nav-mobile ul li {
    margin: 0px 0;
}
.nav-mobile a {
    font-weight: 600;
    font-size: 16px;
}

.nav-actions-mobile {
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 12px;
}
.nav-actions-mobile .lang li {
    display: inline-block;
    margin-right: 10px;
}


/* Zavesa */
.nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
    z-index: 110;
}
.nav-backdrop.is-open{
    opacity: 1;
    pointer-events: auto;
}




/* Osnovno */
.tl-section{
    padding-top: 80px;
    padding-bottom: 80px;

}


.tl-section .tl-inner{
    display: flex;
    gap: 50px;
}

.tl-section .tl-inner .left{
    flex: 1;
}

.tl-section .tl-inner .left h2{
    margin-top: 80px;
}

/*.tl-head h2{margin:0 0 10px;font-size:clamp(28px,4.2vw,46px);line-height:1.1;color:#0b2a3a}*/
.tl-sub{
    font-size: 20px;
}

.tl-sub a{
    background-color: var(--red);
    color: #fff;
    border-radius: 100px;
    transition: background .18s;
    margin-bottom: 12px;
    height: 40px;
    padding: 0 25px;
    line-height: 38px;
    font-weight: 700;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
    text-transform: uppercase;
    display: block;
    max-width: max-content;
}

.tl-sub a:hover{
    background-color: var(--primary);
}

/* Flex 50/50 */
.tl-row{
    display:flex;
    gap:18px;
    align-items:stretch;
    flex: 2;
}
.tl-row>.tl-card{
    flex:1 1 50%
}
@media (max-width:900px){
    .tl-row{
        flex-direction:column
    }
}

/* Kartice */
.tl-card{
    background:#0f2b3b;
    color:#d9f3ff;
    border-radius:28px;
    padding:20px 18px 10px;
    box-shadow:0 10px 30px rgba(10,30,45,.18);
    overflow:hidden
}
.tl-card--accent{
    background:linear-gradient(180deg,#103a4e,#0f2b3b)
}
.tl-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px
}
.tl-plan{
    margin:0;
    letter-spacing:.6px;
    color: var(--green);
    font-size: 20px;
    font-weight: 700;
}
.tl-pill{
    width:42px;
    height:42px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:700;
    border:2px solid #bfe8f7;
    color:#bfe8f7
}

/* Seznam */
.tl-list{
    list-style:none;
    margin:8px 0 0;
    padding:0
}
.tl-li{
    display:flex;
    gap:12px;
    padding:14px 8px;
    border-top:1px solid rgba(255,255,255,.06)
}
.tl-icon svg{
    fill: var(--green);
}
.tl-icon--semi svg{
    fill: #bfd121;
}
.tl-icon--off svg{
    fill:#9cbecf
}
.tl-text{
    display:flex;
    flex-direction:column;
    gap:2px
}
.tl-title{
    font-weight:700;
    color: #ffffff;
    font-size: 16px;
}
.tl-desc{
    font-size: 14px;
    color:#b2d2e3
}
.tl-badge{
    margin-left:auto;
    font-size:12px;
    padding: 10px 21px;
    border-radius: 20px;
    background:#0e3b4e;
    color:#e7fbff;
    border:1px solid rgba(255,255,255,.15);
    height: 17px;
}

.tl-note{
    margin-top:14px;
    color:#5b7f94;
    font-size:13px
}



main.info{
    margin: 0 auto;
    max-width: 100%;
    width: 1100px;
    padding-top: 50px;
    padding-bottom: 50px;
}


main.info h1{
    text-align: center;
    margin-bottom: 30px;
}

main.info .info-text{

}

.faq-subpage{
    background: #F9FAFA;
}

.faq-subpage .faq-inner h2{
    color: var(--primary);
}


.news-subpage{
    padding: 70px 0;
}

.news-subpage h1{
    text-align: center;
    margin-bottom: 60px;
}


.breadcrumb{
    display: flex;
}

.breadcrumb li{
    display: inline-block;
    font-size: 14px;
}

.breadcrumb li a {
    color: var(--primary);
}

.breadcrumb li a img{
    width: 17px;
    vertical-align: middle;
    margin-top: -3px;
}


.news-single-page{
    padding-top: 80px;
    padding-bottom: 50px;
}

.news-single-page .single-news-inner{
    width: 1200px;
    margin: 0 auto;
    max-width: 100%;
}


.news-single-page .single-news-inner .main-img{
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    margin-bottom: 40px;
}


.news-single-page h1{
    margin-top: 10px;
}

.news-single-page .date{
    background-color: var(--primary);
    width: fit-content;
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 10px 17px;
    display: flex;
    gap: 10px;
    border-radius: 20px;
    font-size: 14px;
}

.news-single-page .date img{
    width: 14px;
}


.location-subpage{
    padding-top: 60px;
}

.location-subpage h1{
    margin-top: 20px;
    margin-bottom: 20px;
}

.location-subpage .location-box{
    display: flex;
    gap: 30px;
}

.location-subpage .location-box .product-gallery{
    flex: 0 0 50%;
    margin-top: 30px;
    width: 50%;
}

/*.location-subpage .location-box .product-gallery img{
    max-width: 100%;
}*/

.location-subpage .location-box .location-content{
    flex: 1;
    flex: 0 0 50%;
    width: 50%;
}



.product-gallery img {
    height: 400px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.gallery-slider{
    display: flex;
    flex-wrap: wrap;
}

.gallery-slider a{
    flex: 0 0 46%;
    padding: 10px;
}


/*.location-item-info{
    display: flex;
    gap: 20px;
}*/

.location-item-info p{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.location-item-info svg{
    width: 20px;
    height: 20px;
}


.location-item-info a{
    color: var(--green);
    display: flex;
    align-items: center;
}

.location-item-info{
    margin-top: 20px;
    margin-bottom: 20px;
}

.location-item-info li{
    margin-bottom: 5px;
}

.location-item-info .img-box{
    width: 50px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #F3EDED;
    background: linear-gradient(180deg, #103a4e, #0f2b3b);
    margin-right: 5px;
}


.location-item-info .img-box img{
    width: 25px;
}

.location-item-hours p{
    padding: 10px;
    border-top: 1px solid rgb(18 42 60);
}

p.location-item-hours-title {
}

p.location-item-hours-title {
}

.location-item-hours p.location-item-hours-title{
    border: none;
    color: var(--primary);
    font-weight: 700;
    text-transform: uppercase;
}

.news_content ul{
    list-style: unset;
    padding: unset;
    margin: unset;
}

.location-item-hours{
    margin-bottom: 50px;
}


.gallery-wrap {
    /* max-width: 900px; */
    /* margin: 24px auto; */
}
/* ====== Layout ====== */
/*.psp-gallery {
    max-width: 980px;
    margin: 24px auto;
}*/

/* Glavni slider – fiksno razmerje + cover -> nič "skakanja" */
.psp-main {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.psp-main .psp-frame {
    position: relative;
    width: 100%;
    /* spremeni razmerje po želji: 56.25% = 16:9, 66.66% = 3:2, 75% = 4:3 */
    padding-top: 56.25%;
}
.psp-main .psp-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Thumbs */
.psp-thumbs {
    margin-top: 12px;
}
.psp-thumbs .swiper-slide {
    width: 140px;
} /* vidno Å¡tevilo thumbov */
.psp-thumbs .psp-thumb {
    position: relative;
    width: 100%;
    padding-top: 75%;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .15s, opacity .15s;
    opacity: .8;
}
.psp-thumbs .psp-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}
.psp-thumbs .swiper-slide-thumb-active .psp-thumb {
    opacity: 1;
    transform: scale(1.02);
}

/* Puščici (opcijsko) */
.psp-nav-btn {
    background: rgba(0,0,0,.5);
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
}
.psp-nav-btn::after {
    display: none;
} /* skrij default ikono Swiperja */


.psp-gallery{
    height: 400px;
}


.product-gallery img.premium-img{
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 3;
    top: 15px;
    left: 25px;
}


.about-us .designed-section .designed-inner{
    align-items: self-start;
}




.contact{
    background: #F9FAFA;
    width: 900px;
    margin: 0 auto;
    border-radius: 22px;
    padding: 40px;
    margin-bottom: 100px;
    max-width: 100%;
}

.contact h3{
    text-transform: uppercase;
    font-size: 20px;
    margin-bottom: 20px;
}

.contact label{
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.contact .contact-inner{
    display: flex;
    flex-direction: row;
    gap: 30px;
    align-items: center;
}

.contact .contact-inner .left{
    flex: 1;
}


.contact .contact-inner .left li{
    margin-bottom: 13px;
}

.contact .contact-inner .network{
    margin-top: 20px;
}

.contact .contact-inner .network .contact-img-box{
    width: 35px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 1px solid #F3EDED;
    background: linear-gradient(180deg, #103a4e, #0f2b3b);
    margin-right: 5px;
}

.contact .contact-inner .network .contact-img-box img{
   width: 16px;
}


.contact .contact-inner .network li{
    margin-bottom: 12px;
}

.contact .contact-inner .network li a{
    color: var(--primary);
    font-weight: 700;
    font-size: 18px;
}

.contact .contact-inner .right{
    flex: 1.5;
}

.contact .contact-inner .right iframe{
    width: 100%;
    border: none;
    height: 330px;
    border-radius: 22px;
}