/* Roots */
:root {
    --primary-color: rgb(0, 153, 255); /* Plava */
    --secondary-color: rgb(100, 100, 100); /* Tamno siva */
    --accent-color: rgb(255, 87, 34); 
    --background-color: #eee; /* Svijetla pozadina */
    --hero-background-color: #000; /* Crna pozadina hero sekcije */
    --text-color: #74767b; /* Tamna boja teksta */
    --light-text-color: #ffffffba; /* Svjetla boja teksta */
    --white-color: #ffffff;
    --black-color: #000000;
    --grey-border-color: #74767b;
    --link-color: rgb(0, 102, 204); /* Tamnoplava boja linka */
    --hover-color: rgb(51, 181, 255); /* Svijetloplava hover boja */
    --font-family-base: 'Inter', sans-serif; /* Font family Inter */
    --font-family-second: 'Epilogue', sans-serif; /* Font family Epilogue */
    --button-shadow: rgba(255, 255, 255, 0.25) 0.5px 0.5px 0px 0px inset, 
                      rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, 
                      rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, 
                      rgba(0, 0, 0, 0.063) 0px 10px 10px -3.75px; /* Button shadow */


    /* Font Sizes */
    --h1-font-size: 72px;
    --h2-font-size: 52px;
    --h3-font-size: 32px;
    --h4-font-size: 18px;
    --p-font-size: 16px;
    --small-font-size: 14px;

    /* Spacing */
    --default-padding: 20px;
    --default-margin: 20px;
    --default-line-height: 1.3;
    --container-width: 1250px;
    --header-padding: 12px 20px;
}

/* General reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; /* Universal fallback for older browsers */
}

/* Headings */
h1 {
    font-size: var(--h1-font-size);
    font-family: 'Inter';
    font-weight: 600;
    line-height: 1.1em;
    color: #ffffff;
    letter-spacing: -0.03em;
    margin-top: 1.8rem;
    margin-bottom: .5rem;
}

h2 {
    font-size: var(--h2-font-size);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    margin-bottom: .5rem;
}

h4 {
    font-size: var(--h4-font-size);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    color: #ffffffba;
    line-height: var(--default-line-height);
    margin-bottom: .5rem;
    margin-top: 5px;
}

p {
    font-family: 'Inter', sans-serif;
    font-size: var(--p-font-size);
    color: var(--text-color);
    line-height: normal;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    h1 {
        font-size: 50px;
        line-height: 1.2em;
        letter-spacing: -1.3px;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 2.5rem;
        line-height: 1;
        letter-spacing: -1.3px;
    }
    
    h2 {
        font-size: 2rem;
    }

    p {
        font-size: 1.25rem;
        line-height: 1.375;
        margin-bottom: 15px;
    }
}

img {
    width: 100%;
}

/* Header Styling */
.header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* background-color: rgba(255, 255, 255, 0); */
    -webkit-backdrop-filter: blur(10px);
    /* backdrop-filter: blur(10px); */
    !i;!;
}

.header-sticky {
    width: 100%;
    max-width: var(--container-width);
    padding: var(--header-padding);
    /* background-color: rgba(255, 255, 255, 0); */
    z-index: 1000;
    margin: auto;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.header-sticky-content {
    max-width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-sticky-content-logo {
    font-weight: 800;
    font-size: 19px;
    color: #ffffff;
    display: flex;
    align-items: center;
    letter-spacing: -0.02em;
}
img.header-image {
    width: 30px;
    filter: brightness(10);
}
.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    font-weight: 600;
    font-size: 14px;
    color: #fbfbfb;
    text-decoration: none;
    /* text-transform: uppercase; */
    letter-spacing: -0.02em;
}

.nav-links a:hover {
    text-decoration: underline;
}


/* Dropdown Language*/

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

    .dropdown button {
      background-color: #373737ab;
      color: #d3d3d3;
      border: 2px solid #3f3f3f;
      border-radius: 50%;
      cursor: pointer;
      font-size: 11px;
      width: 30px;
      height: 30px;
      transition: all 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 800;
      font-family: 'Inter';
      text-transform: uppercase;
      letter-spacing: -0.02em;
    }

    .dropdown button:hover {
      background-color: transparent;
      color:  var(--white-color);
    }
.dropdown-content a:hover {
    text-decoration: none;
}
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #06060675;
      min-width: 100px;
      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
      z-index: 1;
      border-radius: 8px;
      overflow: hidden;
	  border:1px solid var(--grey-border-color);
    }

    .dropdown-content a {
      color: var(--white-color);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      transition: background-color 0.3s ease;
	  font-size:12px;
    }

    .dropdown-content a:hover {
      background-color: #35353575;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    .divider {
      height: 1px;
      background-color: var(--grey-border-color);
      margin: 0;
    }
@media (max-width: 768px) {
  .dropdown-content {
    right: 0; /* Aligns the dropdown to the right edge of the button */
    left: auto; /* Resets left positioning */
    max-width: 100vw; 
  }
}


/* Hero Section */
.hero-section {
    background: url(https://lizaeight.com/wp-content/uploads/2024/09/Screenshot_147-e1727382844770.png);
    background-color: #0a0a0a;
    background-size: auto;
    background-position: top;
    background-repeat: no-repeat;
}
	
.hero-section-elements  {
    padding: 20px;
    max-width: 42rem;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
}

.notice {

padding: 6px 20px;

border-radius: 9999px;

box-shadow: rgba(255, 255, 255, 0.25) 0.5px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.063) 0px 10px 10px -3.75px;

font-family: var(--font-family-base);

color: #000000;

font-weight: 700;

letter-spacing: -0.02em;

font-size: 14px;

background: #2f2f2f5e;
}
span.notice-text {
    background: linear-gradient(to left, #ffffff, #939393);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.buttons  {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-top: 15px;
    position: relative;
}

.primary-button  {	
    display: flex;
    padding: .5rem 1.5rem;
    background-color: var(--primary-color);
    color: var(--white-color);
    font-family: var(--font-family-base);
    font-weight: 800;
    font-size: var(--small-font-size);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    align-items: center;
    width: fit-content;
    gap: .25rem;
    letter-spacing: -0.02em;
    box-shadow: var(--button-shadow);
}

a.primary-button {
    color: white;
}
img.fp-builder {
    border-radius: 20px;
    border: 1px solid #e9e9e9;
}
.video-button  {
	display: flex;
	padding: .5rem 1.5rem;
	background-color: #2f2f2fde;
	color: #e9e9e9;
	font-family: var(--font-family-base);
	font-weight: 600;
	font-size: var(--small-font-size);
	text-decoration: none;
	border-radius: 10px;
	transition: background-color 0.3s ease;
	align-items: center;
	width: fit-content;
	gap: .25rem;
	letter-spacing: -0.02em;
	box-shadow: var(--button-shadow);
}
.video-button-icon {
    width: 20px;
    height: 20px;
    color: #e9e9e9;
    padding-right: 5px;
}
/*Video Popup CSS*/

/* Popup container - hidden by default using opacity and visibility */
.popup-container {
  visibility: hidden; /* Initially hidden */
  opacity: 0; /* Initially fully transparent */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* Flexbox to center content */
  justify-content: center; /* Horizontal centering */
  align-items: center; /* Vertical centering */
  background-color: rgb(255 255 255 / 26%); /* Dark background */
  z-index: 1000;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  backdrop-filter: blur(5px); /* For modern browsers */
  -webkit-backdrop-filter: blur(5px); /* For Safari and iOS */
}

/* Show the popup when active */
.popup-container.active {
  visibility: visible; /* Make the popup visible */
  opacity: 1; /* Fully visible */
  transition: opacity 0.3s ease, visibility 0s; /* Smooth fade-in */
}

/* Popup content */
.popup-content {
position: relative;
    width: 95%;
    max-width: 800px;
    padding: 0;
    background-color: white;
    box-shadow: 0 10px 130px rgb(255 255 255);
    overflow: hidden;
    transform: scale(0.7);
    transition: transform 0.3s ease;
    z-index: 1000;
    border-radius:15px;
}

/* Active class to trigger scale and opacity animation */
.popup-container.active .popup-content {
  transform: scale(1); /* Zoom to full size */
}

/* Close button */
.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
    background-color: #ffffff54;
    border-radius: 50%;
    padding: 1px 6px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    z-index: 10;
}


.close-popup:hover {
  background-color: #ffffff54;
  transform: scale(1.1);
}

.popup-content iframe {
  width: 100%;
  height: 450px;
  border-radius: 0 0 15px 15px;
  border: none;
}

/* Make popup responsive */
@media (max-width: 768px) {
  .popup-content iframe {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .popup-content iframe {
    height: 200px;
  }
}


/*Hero Section Image CSS*/
.hero-section-image-container  {
    width: 100%;
    max-width: 1250px;
    display: flex;
    margin: auto;
    z-index: 0;
    overflow: hidden;
    perspective: 1000px;
    padding-right: 20px;
    padding-left: 20px;
    position: relative;
}

.hero-image  {width: 100%;margin: auto;display: flex;border-radius: 19px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;margin-bottom: -20px;overflow: hidden;transition: transform 0.6s ease;transform-style: preserve-3d;position: relative;}
@media (max-width: 768px) {
    img.hero-image {
        width: 100%;
        border-radius: 3px;
        margin-bottom: -15px;
    }
.hero-section-image-container  {
    /* padding-right: 0px; */
    /* padding-left: 20px; */
}
}
img.hero-image:hover {
 transform: rotateY(-10deg) rotateX(20deg) scale(0.95);
}
.hero-image:hover {
    cursor: url(https://img.icons8.com/ios-filled/50/000000/cursor.png) 16 16, auto;
}


/*Slider START*/

.brands {
    width: 100%;
    margin: auto;
    mask-image: linear-gradient(to right, rgb(255 255 255 / 0%) 0%, rgb(255 255 255) 25%, rgb(255 255 255) 75%, rgba(0, 0, 0, 0) 100%);
    margin-top: ;
    position: relative;
    z-index: 100;
    background: white;
    background-color: white;
	    padding-bottom: 60px;
}
span.trusted-text {
    text-align: center;
    margin: auto;
    display: flex;
    justify-content: center;
    padding-top: 30px;
    color: #0000006b;
}



/*Benefit Section*/
.benefit-section {padding: 20px;margin: auto;padding-top: 3rem;padding-bottom: 5rem;background: white;}
.benefit-section-elements {
padding: 20px;
    max-width: 44rem;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
	}
	span.bold-italic {
    color: rgb(0 153 255);
    font-weight: 900;
    font-style: italic;
}

/*CARD CSS*/

.card-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 25px;
    width:100;
    max-width:1140px;
    margin:auto;
}

.card {
    display: block;
    border-radius: 12px;
    text-decoration: none;
    width: 100%;
    position: relative;
}

img.card-logo {
    filter: grayscale(1);
}
img.card-logo:hover {
    filter: none;
}
.top-bar {
    background-color: #292929;
    color: #a6a6a6;
    text-align: center;
    padding: 10px 0;
    position: relative;
    box-shadow: var(--button-shadow);
    font-size: 14px;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Dodaj tranziciju */
    transform: translateY(0); /* Početno stanje - vidljivo */
    opacity: 1;
}

.top-bar.hide {
    transform: translateY(-100%); /* Klizanje prema gore */
    opacity: 0; /* Postepeno nestajanje */
}

.card-image-wrapper {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
	box-shadow: rgb(0 147 255 / 20%) 0px 10px 40px 0px;
}

.card-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: inherit;
}

.content-arrow-wrapper {
    display: flex;
    justify-content: space-between; /* Ensures text on the left and arrow on the right */
    align-items: center;
}

.card-content {
    flex: 1; /* Take up available space */
}

.card-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: black;
    margin-bottom: 10px;
    line-height: 22px;
    letter-spacing: -0.02em;
}

.card-content p {
    font-size: 0.95em;
    color: rgb(116, 118, 123);
}

.arrow-wrapper {
    background-color: white;
    border-radius: 10px;
    padding: 8px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
    transition: transform 0.3s ease;
margin-bottom:auto;
margin-left: 10px;
}

.arrow-container {
    transition: transform 0.3s ease; /* Smooth rotation transition */
transform: rotate(-45deg);
}

.arrow {
    width: 24px;
    height: 24px;
    fill: black;
}

/* Hover effects for arrow rotation */
.card:hover .arrow-container {
    transform: rotate(1deg); /* Rotate the arrow 90 degrees on hover */
}

/* RESPONSIVE STYLES */

/* For tablets and larger phones */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack the cards vertically */
        gap: 30px; /* Increase space between stacked cards */
    }
    
    .card {
        width: 100%; /* Make sure cards take up full width on small screens */
    }
    
    .card-content h3 {
        font-size: 22px; /* Scale down font size for smaller devices */
    }
    
    .arrow-wrapper {
        padding: 10px;
    }
	.card-container {
    flex-direction: column;
}
}

/* For mobile phones */
@media (max-width: 480px) {
    .card-content h3 {
        font-size: 22px; /* Further reduce font size for mobile */
    }
    
    .card-content p {
        font-size: 16px; /* Reduce font size for mobile content */
    }
    
    .arrow {
        width: 25px; /* Scale down arrow size */
        height: 25px;
    }
    
    .arrow-wrapper {
        padding: 5px; /* Reduce padding around the arrow */
    }
}



/*Features Section*/
.super-features-section {
padding: 20px;
    max-width: 1250px;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 5rem;
	}
.super-features-section-elements {padding: 20px;/* max-width: 44rem; */margin: auto;padding-top: 3rem;padding-bottom: 5rem;text-align: left;}

/*ICON CSS*/
.icon-container {
        align-items: flex-start;
        display: flex;
        flex: none;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 24px;
        height: min-content;
        justify-content: flex-start;
        overflow: visible;
        padding: 0;
        position: relative;
        padding-top: 30px;
}
.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out;
width: 60px;
filter: brightness(1.4);
}

@media (max-width: 768px) {
    /* Za veće ekrane, postavite jedan po jedan ili prilagodite kako želite */
    .icon-container {
        grid-template-columns: repeat(4, 1fr); /* Na primer, 3 kolone na tabletima ili većim ekranima */
		display:grid;
		justify-items: center;
    }
	.icon-item {
    text-align: center;
	width:40px;
}
}


.icon {
    width: 25px;
    height: 25px;
    fill: #6f6fff; /* Default color for SVG */
    transition: transform 0.3s ease-in-out;
}

.icon-text {
    font-family: 'Inter', sans-serif;
    color: #000000;
    text-align: center;
    transition: color 0.3s ease-in-out;
    font-size: 14px;
cursor:pointer;
}

.icon-item:hover {
    transform: scale(1.1);
font-weight:600;
cursor:pointer;
}

.icon-item:hover .icon {
    transform: scale(1.2); /* Slightly bigger scale for the icon */
}

.icon-item:hover .icon-text {
    color: black;
}



  .fanelpro-container {
            max-width: 950px;
            margin: 0 auto;
            padding: 20px;
        }
        h1.fanelpro-header, h2.fanelpro-subheader {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            color: #000;
        }
        h1.fanelpro-header {
            font-size: 2.5em;
            margin-bottom: 50px;
            text-align: center;
            font-family: "Inter";
        }
        h2.fanelpro-subheader {
            font-size: 1.1em;
            margin: 20px 0;
            text-align: left;
			display: flex;
    align-content: center;
    gap: 6px;
          
        }
        p.fanelpro-text {
            font-size: 1em;
            margin-bottom: 20px;
            color: #2b2b2b;
            text-align: left;
            line-height: 1.5;
        }
        strong.fanelpro-strong {
            font-weight: 600;
        }
        .fanelpro-section {
            border-bottom: 1px solid #ddd;
            padding-bottom: 20px;
            margin-bottom: 100px;
            text-align: left;
        }
        .fanelpro-section:last-child {
            border-bottom: none;
        }
        .fanelpro-btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            font-size: 1.2em;
            margin-top: 20px;
        }
        .fanelpro-btn:hover {
            background-color: #0056b3;
        }
		@media (max-width: 600px) {
    h1.fanelpro-header {
        font-size: 2em !important;
    }
}

ul, ol {
    list-style: none;
    padding-left: 0; /* Remove default padding */
}

/*CTA */
.cta-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: bold;
}

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    font-size: 1rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #f0f0f0;
}

.cta-arrow {
    margin-left: 10px;
}

section.cta-section {
    margin-top: 100px;
    margin-bottom: 100px;
}

.fp-features-layout {
    max-width: 44rem;
    margin: auto;
    padding-top: 3rem;
    padding-bottom: 5rem;
    text-align: center;
}
img.icons-trusted {
    width: 100%;
    max-width: 900px;
    margin: auto;
    display: flex;
    padding-top: 50px;
    opacity: 0.4;
	filter: grayscale(1);
}
	img.logo-intro {
    width: 60px;
}
	img.logo-cta {
    width: 60px;
	padding-bottom: 20px;
}
a.video-button {
    color: white;
}
.video-wrapper {
    position: relative;
    max-width: 100%;
    margin: 40px 0;
    border-radius: 20px;
    overflow: hidden; /* Ensures rounded corners apply to the video */
}

.video-wrapper video {
    width: 100%;
    border-radius: 20px;
}



/*CUSTOM SLIDER*/
:root {
    --no-of-email-slides: 8;
    --email-img-width: 188px;
    --email-slide-width: calc(var(--email-img-width) + 40px);
    --email-iteration-time: calc(10s * var(--no-of-email-slides))
}

@keyframes custom-email-slider {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(calc(var(--email-slide-width) * var(--no-of-email-slides) * -1))
    }
}

.custom-email-slider {
    background: #f1ebff;
    background: linear-gradient(-45deg, #000000, #272727, #272727, #3f3f3f);
    background-size: 400% 300%;
    animation: gradient var(--email-iteration-time) linear infinite;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 35px;
    max-height: 200px;
}

@keyframes gradient {
    0%,100% {
        background-position: 0 50%
    }

    25% {
        background-position: 100% 50%
    }

    50% {
        background-position: 0 100%
    }

    75% {
        background-position: 50% 0
    }
}

.custom-email-slider .custom-email-slider-wrapper {
    padding-top: 40px!important;
    padding-bottom: 0!important;
    display: flex;
    align-items: center;
    width: calc(2 * var(--no-of-email-slides) * var(--email-slide-width));
    margin: 0 auto;
    overflow: overlay!important;
}

.custom-email-slider .custom-email-slide {
    flex-shrink: 0!important;
    animation: custom-email-slider var(--email-iteration-time) linear infinite;
    width: var(--email-slide-width)!important;
    overflow: visible!important;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 0
}

.custom-email-slider .custom-email-slide img {
    width: var(--email-img-width)!important;
    box-shadow: 14px 17px 40px 0 rgba(17,50,38,.14);
    border-radius: 2px 2px 0 0;
    border: 5px solid #8080804a;
}

@media (max-width: 767px) {
    .custom-email-slider .custom-email-slide {
        padding-right:11px;
        padding-left: 11px
    }
}

@media (max-width: 435px) {
    .custom-email-slider {
        border-radius:12px
    }

    .custom-email-slider .custom-email-slider-wrapper {
        padding-top: 21px!important;
        padding-bottom: 21px!important
    }
}

span.drag {
    color: #999999;
}

span.drop {
    color: grey;
}

.tooltip {
    position: relative;
    display: inline-block;
    margin-left: 5px;
    cursor: help;
}

.tooltip-text {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    position: relative;
    text-align: center;
    width: 20px;
    color: #232323;
}

.tooltip-bg1 {
    background-color: #ededed;
    border-radius: 10px;
    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
}

.tooltip-bg2 {
    background-color: #ededed;
    border-radius: 8px;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 2px;
    left: 2px;
}

.popup-text {
    visibility: hidden;
    width: 200px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the tooltip */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 14px;
    line-height: 1.5;
}

.popup-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .popup-text {
    visibility: visible;
    opacity: 1;
}
img.logo-zeus {
    border-radius: 20px;
width:100%;
}

li.fanelpro-list-item {
    font-weight: 700;
    line-height: 2;
}

li.fanelpro-text {
    line-height: 2;
}

mark {
    background-color: #87878740;
    color: #0a0a0a;
    border-radius: 0.25rem /* 4px */;
    padding-left: 0.125rem;
    padding-right: 0.125rem /* 2px */;
}
strong.fanelpro-strong2 {
    color: black;
}
p.fanelpro-text-strong {
    color: black;
    font-weight: 800;
}
h2.fanelpro-subheader-tooltip {
    font-size: 1.1em;
    margin: 20px 0;
    text-align: left;
}

strong.fanelpro-strong-zeus {
background: linear-gradient(90deg, #1e3a8a, #3b82f6, #60a5fa, #93c5fd, #bfdbfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
}

/* Subheading icon*/
.fanelpro-subheader i.fas.fa-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffcd3640;
    border-radius: 50%;
    padding: 6px;
    margin-right: 4px;
}

/*FOOTER*/
/* Basic Styling for the Footer */
.custom-footer {
    text-align: center;
    padding: 20px;
    background-color: #fff; /* Set your background color */
    font-family: 'Arial', sans-serif;
    color: #555;
    border-top: 1px solid #ddd;
}

/* Logo Styling */
.custom-footer .logo h2 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
}

/* Navigation Links Styling */
.custom-footer .footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
}

.custom-footer .footer-links a {
    text-decoration: none;
    color: #888;
    font-size: 14px;
    transition: color 0.3s ease;
}

.custom-footer .footer-links a:hover {
    color: #000;
}

/* Quote Styling */
.custom-footer .footer-quote p {
    font-style: italic;
    color: #bbb;
    font-size: 12px;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .custom-footer .footer-links {
        flex-direction: row;
    }
}

@media (max-width: 480px) {
    .custom-footer .footer-links a {
        font-size: 12px;
    }

    .custom-footer .logo h2 {
        font-size: 20px;
    }

    .custom-footer .footer-quote p {
        font-size: 12px;
    }
}

.payment-logos {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.custom-footer .footer-legal p {
    font-style: italic;
    color: #bbb;
    font-size: 12px;
}

/* Benefits Start*/

.fp-listing-modern {
    font-family: 'Inter', sans-serif;
    max-width: 800px;
    margin: 30px auto;
    padding: 30px;
    background: #fbfbfb;
    border-radius: 12px;
    box-shadow: rgb(131 131 131 / 8%) 0px 0px 0px 1px;
}

.fp-category-modern {
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
}

.fp-listing-modern p {
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 18px;
    color: #333;
}

.fp-item-modern {
    font-weight: 500;
    color: rgb(0, 153, 255);
    position: relative;
}

.fp-detail-modern {
    display: block;
    font-size: 14px;
    color: #858585;
    margin-top: 5px;
    padding-left: 10px;
    border-left: 3px solid #95a7b34d;
}

.fp-listing-modern h3 {
    margin-top: 90px;
}

/* Responsive Styles */

/* Tablets and small desktops (max-width: 768px) */
@media (max-width: 768px) {
    .fp-listing-modern {
        padding: 20px;
    }

    .fp-category-modern {
        font-size: 20px;
    }

    .fp-listing-modern p {
        font-size: 16px;
    }
}

/* Small screens (max-width: 480px) */
@media (max-width: 480px) {
    .fp-listing-modern {
        padding: 15px;
    }

    .fp-category-modern {
        font-size: 18px;
    }

    .fp-listing-modern p {
        font-size: 14px;
    }

    .fp-detail-modern {
        font-size: 14px;
    }
}
	

/*Question CSS*/
    .faq-container {
            width: 100%;
            max-width: 600px;
            padding-bottom: 100px;
            padding-top: 50px;
        }

        .faq-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .faq-header h1 {
            font-size: 24px;
            font-weight: 500;
            margin: 0;
            color: grey;
        }

        .faq-item {
            background: linear-gradient(0deg, rgb(73 70 70 / 12%) 0%, rgb(193 193 193 / 10%) 100%);
            border-radius: 16px;
            margin-bottom: 20px;
            overflow: hidden;
            box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset;
        }

        .faq-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            color: #2b2b2b;
			text-align:left;
			gap: 30px;
        }
.faq-item.active .faq-content p {
    text-align: left;
    font-size: 14px;
    color: #6f6f6f;
    line-height: 1.6;
}
        .faq-title i {
            transition: transform 0.3s ease;
        }

        .faq-content {
            padding: 15px;
            display: none;
            font-size: 16px;
            border-top: 1px solid #dfdfdf;
        }

        .faq-content a {
            color: #1E90FF;
            text-decoration: none;
        }

        .faq-content a:hover {
            text-decoration: underline;
        }

        .faq-item.active .faq-content {
            display: block;
			color: grey;
    font-size: 15px;
        }

        .faq-item.active .faq-title i {
            transform: rotate(45deg);
        }

/*Image Hider*/

/* By default, show the desktop image and hide the mobile image */
.desktop-image {
    display: block !important;
}

.mobile-image {
    display: none !important;
}

/* For screens smaller than 768px, show the mobile image and hide the desktop image */
@media only screen and (max-width: 767px) {
    .desktop-image {
        display: none !important;
    }
    .mobile-image {
        display: block !important;
		padding-left: 25px;
        padding-right: 25px;
    }
}
.custom--dropdown > .custom--dropdown__selected .thumb {
  color: rgba(208, 208, 208, 0.8) !important;
  font-size: 12px !important;
  text-align: center; /* Osigurava centriran tekst */
  line-height: 0px !important; /* Pomaže kod vertikalnog centriranja */
box-sizing: border-box;
margin:0;
padding:0;
}
	

/* BADGE ACTION FOOTER*/

.action_footer {
    position: fixed!important;
    bottom: 5px!important;
    width: 100%!important;
    right: 80px!important;
    z-index: 999999!important
}

.action_footer .cd-top {
    width: auto !important;
    min-width: 160px !important;
    position: absolute !important;
    top: -40px !important;
    right: -50px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 5px !important;
    font-size: 12px !important;
    color: #000000 !important;
    text-align: center !important;
    text-decoration: none;
    box-shadow: rgba(0, 0, 0, 0.26) 0px 0.637473px 1.14745px -1.125px, rgba(0, 0, 0, 0.24) 0px 1.93094px 3.4757px -2.25px, rgba(0, 0, 0, 0.192) 0px 5.10423px 9.18761px -3.375px, rgba(0, 0, 0, 0.03) 0px 16px 28.8px -4.5px;
    letter-spacing: 0;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    img.action-footer-img {
        width: 25px;
        height: auto;
        margin-right: 2px;
        font-family: "Inter";
    }