@font-face {
    font-family: 'Radio Grotesk';
    font-style: normal;
    font-weight: 400;
    src: local('Neo Sans Pro'), url('../../fonts/PPRadioGrotesk-Regular.woff') format('woff');
}@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProRegular.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProItalic.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 300;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProLight.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 300;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProLightIt.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 500;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProMedium.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 500;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProMedIt.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProBold.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 700;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProBoldIt.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 900;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProBlack.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: normal;
    font-weight: 900;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProUltra.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 900;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProBlackIt.woff') format('woff');
}
@font-face {
    font-family: 'Neo Sans Pro';
    font-style: italic;
    font-weight: 900;
    src: local('Neo Sans Pro'), url('../../fonts/NeoSansProUltIt.woff') format('woff');
}
@font-face {
    font-family: 'Waterfall';
    font-style: italic;
    font-weight: 900;
    src: local('Waterfall'), url('../../fonts/Waterfall-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Mistrully';
    font-style: italic;
    font-weight: 900;
    src: local('Mistrully'), url('../../fonts/Mistrully.woff') format('woff');
}

/* RESET */
::-moz-selection {
    background: var(--dark-blue-color);
    color: #fff;
}
::selection {
    background: var(--dark-blue-color);
    color: #fff;
}
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Radio Grotesk';
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:focus {
    outline: 0;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
/* width */
::-webkit-scrollbar {
    width: .5vw;
}
/* Track */
::-webkit-scrollbar-track {
    background: #fff;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--dark-blue-color);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #012579;
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    scrollbar-width: normal;
}
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--white-color);
}
body.no-scroll,
html.no-scroll{
    overflow: hidden;
}

#alertMsg{
    font-size: 14px;
}
img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
a {
    text-decoration: none;
    display: inline-block;
    color: inherit;
    cursor: pointer;
    font-family: 'Neo Sans Pro';
}
button {
    cursor: pointer;
    outline: none;
    border: none;
    font-family: inherit;
    font-family: 'Neo Sans Pro';
}
button[disabled] {
    cursor: default;
}
p{
    color: var(--txt-color);
    font-size: 2.4rem;
    font-family: 'Radio Grotesk';
}
a{
    color: var(--txt-color);
}
ul,
ol {
    list-style: none;
}
input,
textarea {
    font-family: inherit;
    resize: none;
}
/* HIDE ARROWS ON NUMBER INPUTS */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* UTILITIES */
:root {
    --white-color: #fff;
    --black-color: #000;
    --txt-color: #001441;
    --dark-blue-color: #001441;
}
.container {
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: 134rem;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.container-right {
    padding-left: calc((100vw - 128rem) / 2);
    position: relative;
}
.container-left {
    padding-right: calc((100vw - 128rem) / 2);
    position: relative;
}
@media only screen and (max-width: 1340px) {
    .container-right {
        padding-left: 3rem;
    }
    .container-left {
        padding-right: 3rem;
    }
    .index-about-container-text > div > div{
        padding-left: 3rem;
    }
}


nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 0rem;
    z-index: 9999;
}

nav::after{
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    opacity: 0;
    width: 100%;
    height: 100%;
    background: rgb(215,173,86);
    background: linear-gradient(180deg, rgba(215,173,86,1) 0%, rgba(183,134,33,1) 100%);
    transition: opacity 0.3s ease;
}
nav.active::after{
    opacity: 1;
}
nav.inner::after{
    opacity: 1;
}
nav.user .nav-links > ul{
    justify-content: flex-end;
    gap: 6rem;
}
.nav-dropdown{
    position: relative;
    cursor: default;
}
nav.inner .nav-logo{
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    height: 4rem;
    align-items: center;
    max-width: 14rem;
}
nav.inner .nav-logo img{
    height: max-content;
}
.nav-dropdown::after{
    position: absolute;
    content: "";
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 0.6rem;
    background-image: url('../../images/app/down-arrow.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.nav-dropdown-container{
    position: absolute;
    border-radius: 0.8rem;
    background-color: var(--white-color);
    flex-direction: column;
    display: none;
}
.nav-dropdown-container.active{
    display: flex;
}
.nav-dropdown-container ul{
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
}
.nav-dropdown-container ul > :last-child a, .nav-dropdown-container ul > :last-child p{
    margin-bottom: 0rem!important;
}
.nav-dropdown-container ul li p{
    font-size: 1.2rem;
    color: #89600A;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}
.nav-dropdown-container ul li a{
    font-size: 1.6rem;
    color: var(--txt-color);
    margin-bottom: 1.6rem;
}
.nav-dropdown-container .line{
    width: 100%;
    height: 1px;
    background-color: rgba(0,0,0,0.1);
}
.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}
.nav-links{
    max-width: 85rem;
    width: 100%;
}
.nav-links > ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.nav-links > ul > li > a, .nav-links > ul > li > p, .nav-links > ul > li form a{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--white-color);
    text-transform: uppercase;
    font-family: 'Neo Sans Pro';
    letter-spacing: 1px;
}
.index-hero-section{
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--dark-blue-color);
    background-image: url('../../images/app/hero-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.index-hero-container{
    display: flex;
    max-width: 98rem;
}
.index-hero-container-text{
    position: relative;
    z-index: 1;
}
.index-hero-container-text h1{
    font-family: 'Radio Grotesk';
    font-size: 4rem;
    line-height: 110%;
    color: var(--white-color);
    font-weight: 400;
}
.index-hero-container-text p{
    font-size: 6.4rem;
    line-height: 110%;
    color: #FCDB96;
    font-family: "Waterfall", serif;
    margin-bottom: 6rem;
}
.program-button{
    padding: 2rem;
    padding-left: 3.5rem;
    color: #89600A;
    font-size: 1.4rem;
    border-radius: 5rem;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    background: rgb(252,219,150);
    background: linear-gradient(180deg, rgba(252,219,150,1) 0%, rgba(215,173,86,1) 100%);
    box-shadow: inset 0px 4px 4px 0px rgba(255,255,255,0.5);
    letter-spacing: 1px;
}

.error-message{
    color: red!important;
    font-size: 1.6rem!important;
    margin-bottom: 1rem!important;
    margin-top: 1rem!important;
}
.program-button::before{
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #89600A;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
}
.index-hero-container-image img{
    display: block;
}
.besplatan-sadrzaj{
        background: rgb(252, 219, 150);
    background: linear-gradient(180deg, rgba(252, 219, 150, 1) 0%, rgba(215, 173, 86, 1) 100%);
    padding: 1rem 2rem;
    color: #89600A!important;
    border-radius: 2rem;
    font-weight: 500;
}
.index-hero-container-image{
    position: absolute;
    bottom: 0;
    left: 45%;
    z-index: 1;
}
.index-blur1{
    position: absolute;
    top: 0rem;
    left: 0rem;
}
.index-blur2{
    position: absolute;
    right: 0;
    top: 0;
}
.index-dobrodosli-section{
    padding: 18rem 0rem;
    background-color: #F3F4F6;
    position: relative;
    overflow: hidden;
}
.index-dobrodosli-container{
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 97.5rem;
    position: relative;
    z-index: 1;
}
.index-dobrodosli-container h2{
    font-family: 'Radio Grotesk'; 
    font-size: 4rem;
    color: var(--dark-blue-color);
    font-weight: 400;
}
.index-dobrodosli-container .line{
    margin: 2.5rem 0rem;
    width: 5rem;
    height: 1px;
    background-color: #D7AD56;
}
.index-dobrodosli-container p{
    font-size: 2.8rem;
    font-family: 'Radio Grotesk'; 
    color: var(--dark-blue-color);
    line-height: 133%;
    text-align: center;
}
.dobrodosli-list1{
    position: absolute;
    left: 0;
    bottom: -45rem;
}
.dobrodosli-list2{
    position: absolute;
    top: 0;
    right: 0;
    top: -42rem;
}
.dobrodosli-list1 img, .dobrodosli-list2 img{
    display: block;
}
.index-programi1-section{
    background-color: var(--white-color);
    padding: 10rem 0rem;
}
.index-programi1-container > h2{
    font-size: 4rem;
    line-height: 110%;
    text-align: center;
    margin-bottom: 6rem;
    font-family: 'Radio Grotesk';
    font-weight: 400;
    color: var(--txt-color);
}
.index-programi1-container-flex{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
.product-card{
    width: 100%;
    min-height: 56rem;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 65, 0.1);
    border-radius: 5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.05);
    background-color: var(--white-color);
}
.product-card-image{
    width: 100%;
    height: 24rem;
}
.product-card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-card-content{
    padding: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.product-card-text h3{
    font-size: 2.4rem;
    margin-bottom: 2.4rem;
    color: var(--txt-color);
    font-weight: 400;
}
.product-card-text > div br{
    display: none;
}
.product-card-text > div{
    display: -webkit-box;
    -webkit-line-clamp: 3;       /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zastita-page p{
    font-size: 1.8rem;
}
.zastita-page a{
    font-size: 1.8rem;
}
.zastita-podatala{
    font-size: 1.4rem;
    margin-top: 2rem;
    color: var(--dark-blue-color);
}
.product-card-text p{
    font-size: 1.6rem;
    margin-bottom: 3rem;
    color: var(--txt-color);
    line-height: 133.5%;
}
.product-card.news .product-card-text p{
    margin-bottom: 0rem;
}
.product-card-buttons{
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.product-card-buttons a{
    width: 100%;
    text-align: center;
}
.product-card-buttons a::before{
    left: 25%;
}
.product-card-buttons a:first-child{
    background: var(--white-color);
    border: 1px solid rgba(137, 96, 10,0.2);
}
.product-card-buttons a:first-child::before{
    display: none;
}
.index-programi1-section.gray{
    background-color: #F3F4F6;
}

.index-about-container{
    display: flex;
    align-items: center;
}
.index-about-container-text{
    background: rgb(0,92,63);
    background: linear-gradient(112deg, rgba(0,92,63,1) 0%, rgba(0,165,113,1) 100%);
    padding: 8rem 0rem;
    border-radius: 0rem 5rem 5rem 0rem;
    width: 100%;
}
.index-about-container-text > div{
    max-width: 102rem;
    margin-left: auto;
}
.index-about-container-text > div > div{
    max-width: 58rem;
}
.index-about-container-image{
    margin-left: -30rem;
}
.index-about-container-text p{
    font-size: 3.2rem;
    color: var(--white-color);
    line-height: 120%;
    margin-bottom: 3rem;
}
.index-about-container-text span{
    display: block;
    font-size: 4rem;
    font-family: "Mistrully", serif;
    color: #FCDB96;
    margin-bottom: 4rem;
}
.index-about-container-image img{
    display: block;
    border-radius: 5rem;
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.25);
}
.index-blog-section{
    padding: 10rem 0rem;
    padding-top: 0rem;
    background-color: #F3F4F6;
}
.index-blog-container-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    margin-bottom: 6rem;
}
.index-blog-container-title h2{
    font-size: 4rem;
    line-height: 110%;
    color: var(--txt-color);
}
.index-blog-container-title a{
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: #89600A;
    border: 1px solid rgba(137, 96, 10, 0.2);
    padding: 2rem;
    background-color: var(--white-color);
    border-radius: 5rem;
    text-transform: uppercase;
}
.index-blog-container-flex{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 2rem;
}
.product-card-text span{
    display: block;
    font-size: 1.4rem;
    color: #89600A;
    font-family: 'Radio Grotesk'; 
    margin-bottom: 1.6rem;
}
.product-card.news .product-card-text h3{
    margin-bottom: 1.6rem;
}
.newsletter-section{
    background-color: #F3F4F6;
}
.newsletter-container{
    display: flex;
    align-items: center;
    gap: 6rem;
    margin-bottom: -20rem;
    position: relative;
    border-radius: 5rem;
    background-color: var(--white-color);
    padding: 3.2rem;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
}
.newsletter-container-image img{
    border-radius: 1.8rem;
}
.newsletter-container-text{
    width: 100%;
}
.newsletter-container-text h2{
    font-size: 4rem;
    line-height: 110%;
    color: var(--txt-color);
    margin-bottom: 3.2rem;
    font-weight: 400;
}
.newsletter-container-text p{
    font-size: 1.6rem;
    color: var(--txt-color);
    opacity: 0.7;
    margin-bottom: 3.2rem;
    line-height: 133.5%;
}
.newsletter-container-text form div{
    margin-bottom: 1.6rem;
}
.newsletter-container-text form div label{
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: var(--txt-color);
    display: block;
    font-family: 'Neo Sans Pro';
    margin-bottom: 0.4rem;
}
.odaberi-program p{
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
    background-color: var(--white-color);
    cursor: pointer;
    margin-bottom: 0rem;
    position: relative;
}
.odaberi-program p::after{
    position: absolute;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 1.2rem;
    height: 0.6rem;
    background-image: url('images/blue-dropdown-arrow.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.newsletter-container-text form div input{
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
}
.newsletter-container-text form div input::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.newsletter-container-text span{
    display: block;
    color: var(--txt-color);
    opacity: 0.7;
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
}
footer.inner{
    padding-top: 3.2rem;
}
footer{
    background-color: var(--dark-blue-color);
    padding-top: 23.2rem;
    padding-bottom: 3.2rem;
}
footer img{
    display: block;
}
.footer-container-flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    margin-bottom: 3.2rem;
}
.footer-social{
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
#back-to-top{
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    color: var(--white-color);
    font-family: 'Radio Grotesk'; 
    background-color: transparent;
}
.footer-copyright{
    border-top: 1px solid rgba(255,255,255, 0.2);
    padding-top: 2.4rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
}
.footer-copyright p{
    font-size: 1.4rem;
    color: rgba(255,255,255,0.5);
}
.footer-copyright a{
    font-size: 1.4rem;
    color: var(--white-color);
}
.inner-hero-section{
    height: 42rem;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 6rem;
}
.inner-hero-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.inner-hero-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: top;
}
ul.number{
    list-style: decimal!important;
}
.inner-hero-text{
    position: relative;
    z-index: 1;
    max-width: 105rem;
    margin: 0 auto;
}
.inner-hero-text h1{
    font-size: 4rem;
    color: var(--txt-color);
    font-weight: 400;
}
.inner-hero-text.white h1{
    color: var(--white-color);
}
.blog-all-section{
    padding: 10rem 0rem;
    background-color: #F3F4F6;
}
.blog-all-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}
.single-blog-section{
    margin-top: 6rem;
    padding: 10rem 0rem;
    background-color: #F3F4F6;
}
.single-blog-container{
    max-width: 70rem;
    margin: 0 auto;
}
.back-top-all{
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: #89600A;
    font-weight: 500;
    font-family: 'Neo Sans Pro';
    margin-bottom: 3.2rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 1.4rem;
}
.single-blog-image{
    width: 100%;
}
.single-blog-image img{
    border-radius: 1.8rem;
    width: 100%;
}
.single-blog-image{
    margin-bottom: 3.2rem;
}
.single-blog-container h1{
    font-size: 4rem;
    font-weight: 400;
    color: var(--txt-color);
    margin-bottom: 1.6rem;
}
.single-blog-date p{
    font-size: 1.4rem;
    line-height: 2rem;
    margin-bottom: 3.2rem;
    color: #89600A;
}
.single-blog-content h6{
    font-size: 1.2rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
    font-weight: 700;
}
.single-blog-content h5{
    font-size: 1.6rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
    font-weight: 700;
}
.single-blog-content h4{
    font-size: 2rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
    font-weight: 700;
}

.single-blog-content h3{
    font-size: 2.4rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
    font-weight: 700;
}

.single-blog-content h2{
    font-size: 2.8rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
    font-weight: 700;
}

.single-blog-content p{
    font-size: 1.6rem;
    line-height: 133.5%;
    margin-bottom: 3.2rem;
    color: rgba(0, 20, 65, 0.7);
}
.single-blog-content ul{
    list-style: disc;
    padding-left: 1.6rem;
    margin-bottom: 3.2rem;
}
.single-blog-content ul li{
    font-size: 1.6rem;
    line-height: 133.5%;
    margin-bottom: 1rem;
    color: rgba(0, 20, 65, 0.7);
}
.single-blog-content ul > :last-child{
    margin-bottom: 0rem;
}
.podijelite-blog{
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.podijelite-blog p{
    margin-bottom: 0rem;
}
.podijelite-blog .line{
    width: 4.3rem;
    height: 1px;
    background-color: #D7AD56;
}
.podijelite-blog-social{
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.ostali-blogovi-section{
    padding-bottom: 10rem;
    background-color: #F3F4F6;
}
.ostali-blogovi-container h2{
    font-size: 4rem;
    line-height: 110%;
    color: var(--txt-color);
    margin-bottom: 6rem;
    font-weight: 400;
    text-align: center;
}
.index-about-section.about{
    padding: 10rem 0rem;
}
.index-about-section{
    padding-top: 10rem;
}
.index-about-container-text h2{
    font-size: 2.4rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 3.2rem;
    font-weight: 400;
}
.index-about-container-text.about p{
    font-size: 2.4rem;
    line-height: 3.2rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 3rem;
}
.index-about-container-text.about span{
    margin-bottom: 0rem;
}
.about-logo-section{
    background-color: #F3F4F6;
    padding-bottom: 10rem;
    position: relative;
}
.about-logo-container{
    max-width: 70rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.about-logo-container-card{
    display: flex;
    align-items: center;
    padding: 0rem 3.2rem;
    gap: 5rem;
}
.about-logo-container .line{
    width: 100%;
    height: 1px;
    background-color: #CCCCCC;
    margin: 6rem 0rem;
}
.about-logo-container-card-text h2{
    font-size: 2.4rem;
    line-height: 110%;
    margin-bottom: 1.6rem;
    font-weight: 400;
    color: var(--dark-blue-color);
}
.about-logo-container-card-text p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
}
.about-logo-leaf2{
    position: absolute;
    bottom: -10rem;
    left: 0;
}
.about-logo-leaf1{
    position: absolute;
    top: -20rem;
    right: 0;
}
.sertifikati-section{
    padding-bottom: 10rem;
    background-color: #F3F4F6;
}
.sertifikati-slider{
    height: fit-content;
}
.sertifikati-slider .swiper-slide div{
    width: 100%;
}
.sertifikati-slider .swiper-slide div img{
    width: 100%;
    display: block;
}
.sertifikati-slider .swiper-wrapper{
    align-items: center;
}
.sertifikati-container h2{
    font-size: 4rem;
    color: var(--txt-color);
    font-weight: 400;
    line-height: 110%;
    margin-bottom: 5rem;
    text-align: center;
}
.cjenovnik-section{
    padding: 10rem 0rem;
    margin-top: 6rem;
    background-color: #F3F4F6;
}
.cjenovnik-container{
    max-width: 70rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cjenovnik-container h1{
    font-size: 4rem;
    line-height: 110%;
    color: var(--txt-color);
    font-weight: 400;
    margin-bottom: 6rem;
}
.cjenovnik-container-card{
    margin-bottom: 3.2rem;
    width: 100%;
}
.cjenovnik-container-card h3{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: var(--dark-blue-color);
    font-weight: 400;
    margin-bottom: 1.6rem;
    text-transform: uppercase;
}
.cjenovnik-container-card-table{
    border-radius: 0.4rem;
    overflow: hidden;
    border: 1px solid rgba(0, 20, 65, 0.1);
}
.cjenovnik-container-card-table > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    padding: 0.8rem 1.2rem;
    background-color: var(--white-color);
}
.cjenovnik-container-card-table > div:nth-child(even){
    background-color: transparent;
}
.cjenovnik-container-card-table > div p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7)
}
.contact-page-section{
    padding: 10rem 0rem;
    margin-top: 6rem;
    background-color: #F3F4F6;  
}
.contact-page-container{
    margin: 0 auto;
    max-width: 70rem;
    width: 100%;
}

.contact-page-container form div {
    margin-bottom: 1.6rem;
}
.contact-page-container form div label {
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: var(--txt-color);
    display: block;
    font-family: 'Neo Sans Pro';
    margin-bottom: 0.4rem;
}
.contact-page-container form div input {
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
}
.contact-page-container form div input::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.contact-page-container form div textarea {
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
    height: 12rem;
}
.contact-page-container form div textarea::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.contact-page-container span {
    display: block;
    color: var(--txt-color);
    opacity: 0.7;
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
}
.contact-page-container h2{
    font-size: 4rem;
    color: var(--txt-color);
    margin-bottom: 3.2rem;
    line-height: 110%;
    font-weight: 400;
}
.order-page-section{
    padding: 10rem 0rem;
    margin-top: 6rem;
    background-color: #F3F4F6;  
}
.order-page-container{
    margin: 0 auto;
    max-width: 70rem;
    width: 100%;
}

.order-page-container form div {
    margin-bottom: 1.6rem;
}
.order-page-container form div label {
    font-size: 1.4rem;
    line-height: 1.6rem;
    color: var(--txt-color);
    display: block;
    font-family: 'Neo Sans Pro';
    margin-bottom: 0.4rem;
}
.order-page-container form div input {
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
}
.order-page-container form div input::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.order-page-container form div textarea {
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: var(--txt-color);
    height: 12rem;
}
.order-page-container form div textarea::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.order-page-container form div select {
    width: 100%;
    padding: 1.8rem 1.6rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    color: rgba(0, 20, 65, 0.5);
}
.order-page-container form div select::placeholder{
    color: var(--dark-blue-color);
    opacity: 0.5;
}
.order-page-container span {
    display: block;
    color: var(--txt-color);
    opacity: 0.7;
    margin-bottom: 3.2rem;
    font-size: 1.4rem;
}
.form-flex{
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: space-between;
}
.form-flex > div{
    width: 100%;
    margin-bottom: 0rem!important;
}
.order-page-container button{
    margin-top: 1.6rem;
}
.order-page-container h2{
    font-size: 4rem;
    color: var(--txt-color);
    margin-bottom: 3.2rem;
    line-height: 110%;
    font-weight: 400;
}
.order-page-container p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 3.2rem;
}
.inner-hero-text.white p{
    color: var(--white-color);
}
.program-description-section{
    padding: 10rem 0rem;
    background-color: #F3F4F6;  
}
.program-description-container{
    max-width: 70rem;
    width: 100%;
    margin: 0 auto;
}
.program-desciption-card h2{
    font-size: 2rem;
    line-height: 133.5%;
    color: #89600A;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 2.4rem;
}
.program-desciption-card p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 1.6rem;
}
.program-desciption-card ul{
    list-style: disc;
    padding-left: 1.6rem;
    margin-bottom: 1.6rem;
}
.program-desciption-card ul li{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
}
.program-desciption-card > span{
    display: block;
    font-size: 4rem;
    font-family: "Mistrully", serif;
    color: #89600A;
}
.program-desciption-card > :last-child{
    margin-bottom: 0rem;
}
.program-description-container .line{
    width: 100%;
    height: 1px;
    background-color: rgba(0, 20, 65, 0.2);
    margin: 3.2rem 0rem;
}
.program-price{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 3.2rem;
}
.program-price p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 1.6rem;
}
.odricanje-odgovornosti{
    padding: 1.6rem;
    background-color: var(--white-color);
    border-radius: 0.4rem;
}
.odricanje-odgovornosti p{
    font-size: 1.6rem;
    line-height: 133.5%;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 1.4rem;
}
.odricanje-odgovornosti > :last-child{
    margin-bottom: 0rem;
}
.program-desciption-card.accordion{
    padding: 2.4rem;
    background-color: var(--white-color);
}
.program-description-accordion-button{
    position: relative;
    background-color: transparent;
    height: 3rem;
    transition: margin-bottom 0.3s ease;
}
.program-description-accordion-button.active{
    margin-bottom: 3rem;
}
.program-description-accordion-button span{
    font-size: 1.4rem;
    color: #89600A;
    letter-spacing: 1.5px;
    font-weight: 500;
    display: block;
    font-family: 'Neo Sans Pro';
    transition: opacity 0.3s ease;
    position: absolute;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0;
}
.program-description-accordion-button span.active{
    opacity: 1;
}
.program-description-accordion{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}

.odaberi-program{
    position: relative;
    z-index: 1;
}
.odaberi-program-dropdown{
    position: absolute;
    top: 100%;
    padding: 1.6rem 1rem;
    background-color: var(--white-color);
    border-radius: 1.8rem;
    width: 100%;
    overflow: hidden;
    display: none;
}
.odaberi-program-dropdown.active{
    display: block;
}
.odaberi-program-dropdown .section h3{
    font-size: 1.4rem;
    color: #89600A;
    margin-bottom: 1.6rem;
    font-weight: 400;
}
.odaberi-program-dropdown input{
    width: fit-content!important;
}
.odaberi-program-dropdown label{
    display: flex!important;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem!important;
}
.odaberi-program-dropdown .line{
    width: 120%;
    transform: translateX(-10%);
    height: 1px;
    background-color: rgba(0,0,0,0.1);
}

.log-in-section{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3F4F6;
}
.progres-line-container{
    margin-bottom: 2.4rem;
}
.progres-line-container p{
    font-size: 1.4rem;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 0.6rem;
    min-height: unset;
}
.progres-line{
    width: 100%;
    border-radius: 10rem;
    background-color: #F3F4F6;
    height: 0.6rem;
    overflow: hidden;
}
.progres-line div{
    height: 100%;
    background-color: #00A571;
}

.product-card.program{
    min-height: 62rem;
}
.user-program-section{
    padding: 3.2rem 0rem;
    margin-top: 6rem;
    min-height: calc(100vh - 25.1rem);
    background-color: #F3F4F6;
}
.nav-logo img{
    display: block;
}
.user-program-sidebar{
    max-width: 27rem;
    width: 100%;
    border-radius: 1.8rem;
    background-color: var(--white-color);
    border: 1px solid #D5D7DB;
    height: fit-content;
}
.user-program-sidebar-title{
    padding: 3.2rem;
}
.user-program-sidebar-title h2{
    font-size: 2.4rem;
    color: var(--txt-color);
    margin-bottom: 1.6rem;
    font-weight: 400;
}
.user-program-sidebar .line{
    width: 100%;
    height: 1px;
    background-color: #D5D7DB;
}
.user-program-weeks{
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
}
.user-program-weeks > :last-child{
    margin-bottom: 0rem;
}
.user-program-weeks button{
    width: 100%;
    text-align: left;
    padding: 0.8rem 1.6rem;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    background-color: #F3F4F6;
    color: #001441;
    transition: color 0.3s ease, background-color 0.3s ease;
    margin-bottom: 0.4rem;
}
#sparkles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* make sure it covers whole viewport */
  height: 100vh;
  z-index: 333;
  pointer-events: none; /* allow clicks to pass through */
}
.user-program-weeks button.not-active{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(0, 20, 65, 0.3);
    pointer-events: none;
}   
.user-program-weeks button.active{
    background-color: #D7AD56;
    color: #001441;
}
.user-program-container{
    display: flex;
    justify-content: space-between;
    gap: 3.2rem;
}
.user-program-content{
    width: 100%;
    border-radius: 1.8rem;
    background-color: var(--white-color);
    border: 1px solid #D5D7DB;
    padding-bottom: 3.2rem;
}
.user-program-content-title{
    padding: 3.2rem;
}
.user-program-content-title h2{
    font-size: 2.4rem;
    color: #89600A;
    font-weight: 400;
    margin-bottom: 1rem;
}
.user-program-content-title p{
    font-size: 1.6rem;
    font-weight: 400;
    color: #89600A;
}
.user-program-accordion{
    padding: 2.4rem 3.2rem;
    border-top: 1px solid #D5D7DB;
    border-bottom: 1px solid #D5D7DB;
}
.user-program-content .user-program-accordion:last-child{
    border-top: none;
}
.user-program-accordion-button{
    display: flex;
    align-items: center;
    width: 100%;
    background-color: transparent;
    justify-content: space-between;
    gap: 3rem;
    transition: margin-bottom 0.3s ease;
}
.user-program-accordion-button.active{
    margin-bottom: 2.4rem;
}
.user-program-accordion-button div:last-child{
    transition: transform 0.3s ease;
}
.user-program-accordion-button.active div:last-child{
    transform: rotate(180deg);
}
.user-program-accordion-button > div:first-child{
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.user-program-accordion-button > div:first-child p{
    font-size: 2rem;
    color: var(--dark-blue-color);
    text-transform: uppercase;
}
.user-program-accordion-content{
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
}
.user-program-accordion-content > img{
    width: 100%;
    display: block;
    margin-bottom: 2.4rem;
}
.user-program-accordion-content > p{
    font-size: 1.6rem;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 2.4rem;
}
.user-program-accordion-content > p span{
    color: var(--txt-color);
}
.user-program-accordion-content > p ul li{
    font-size: 1.6rem;
    color: rgba(0, 20, 65, 0.7);
}
.user-program-accordion-content > h3{
    margin-bottom: 2.4rem;
    font-size: 1.6rem;
    color: var(--dark-blue-color);
    text-decoration: underline;
    font-weight: 400;
}
.user-program-accordion-content > h4{
    font-size: 1.6rem;
    color: var(--txt-color);
    font-weight: 400;
}
.user-program-accordion-content > span{
    display: block;
    font-size: 4rem;
    font-family: "Mistrully", serif;
    color: #D7AD56;
}
.user-program-accordion-content > :last-child{
    margin-bottom: 0rem!important;
}
.user-program-accordion-content iframe{
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.8rem;
    margin-bottom: 2.4rem;
    border: none;
}
.napomena{
    width: 100%;
    padding: 0.8rem;
    background-color: #F3F4F6;
    margin-bottom: 2.4rem;
}
.napomena p{
    font-size: 1.4rem;
    color: var(--txt-color);
}
.zavrseno-button{
    font-size: 1.4rem;
    background-color: var(--white-color);
    letter-spacing: 1.5px;
    font-family: 'Neo Sans Pro';
    padding: 2rem;
    border-radius: 100rem;
    font-weight: 500;
    border: 1px solid rgba(137, 96, 10, 0.2);
    text-transform: uppercase;
    color: #89600A;
}
.user-program-accordion-content audio{
    width: 100%;
    margin-bottom: 2.4rem;
}
.user-program-accordion-content form.pitanje {
    margin-bottom: 1.6rem;
}
.user-program-accordion-content form.pitanje > :last-child{
    margin-bottom: 0rem;
}

.user-program-accordion-content form.pitanje p{
    font-size: 1.6rem;
    color: var(--txt-color);
    margin-bottom: 1.6rem;
}
.user-program-accordion-content form textarea{
    margin-bottom: 2.4rem;
    padding: 1.6rem;
    font-size: 1.4rem;
    border-radius: 1.8rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    color: var(--txt-color);
    width: 100%;
    height: 12rem;
}
.question-form textarea::placeholder{
    opacity: 0.5;
    color: var(--txt-color);
}
.question-form textarea{
    margin-bottom: 2.4rem;
    padding: 1.6rem;
    font-size: 1.4rem;
    border-radius: 1.8rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    color: var(--txt-color);
    width: 100%;
    height: 26rem;
}
.question-form textarea::placeholder{
    opacity: 0.5;
    color: var(--txt-color);
}
.zavrseno-button-container{
    padding: 2.4rem 3.2rem;
    padding-bottom: 0rem;
}
.your-opinion-container{
    max-width: 97.5rem;
    margin-left: auto;
    margin-top: 3rem;
}
.your-opinion-container p{
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
}
.user-program-accordion-content > a{
    font-size: 1.6rem;
    text-decoration: underline;
    font-family: 'Radio Grotesk';
}
.about-logo-container-card-image img{
    max-width: 10rem;
}
.upitnik-section{
    padding: 3rem;
    padding-top: 10rem;
    background-color: #F3F4F6;
}
.upitnik-container{
    max-width: 130rem;
    background-color: #fff;
    border-radius: 3rem;
    margin: 0 auto;
}
.upitnik-container h2{
    font-size: 2.4rem;
    color: #89600A;
    font-weight: 400;
    margin-bottom: 3rem;
}
.upitnik-container h3{
    font-size: 2rem;
    color: #001441;
    margin-bottom: 3rem;
    font-weight: 400;
}
.upitnik-container p{
    font-size: 1.6rem;
    margin-bottom: 2.5rem;
}
.upitnik-container textarea{
    margin-bottom: 2.4rem;
    padding: 1.6rem;
    font-size: 1.4rem;
    border-radius: 1.8rem;
    border: 1px solid rgba(0, 20, 65, 0.2);
    color: var(--txt-color);
    width: 100%;
    height: 12rem;
}
.upitnik-container textarea.short{
    height: 5.2rem;
}
.upitnik-container .container > :last-child{
    margin-bottom: 0rem;
}
.upitnik-container .container{
    padding-bottom: 3rem;
    padding-top: 3rem;
}
.upitnik-container .line{
    width: 100%;
    height: 0.1rem;
    background-color: #D5D7DB;
}
.log-in-section{
    display: flex;
    align-items: center;
    justify-content: center;
}
.log-in-container{
    width: 100%;
    max-width: 60rem;
    background-color: var(--white-color);
    border-radius: 5rem;
    box-shadow: 0px 4px 40px 0px rgba(0,0,0,0.15);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.login-top{
    padding: 6rem;
}
.log-in-container h1{
    font-size: 3.2rem;
    line-height: 110%;
    color: #001441;
    font-weight: 400;
    margin-bottom: 3.2rem;
}
.log-in-container form label{
    font-size: 1.4rem;
    line-height: 1.6rem;
    display: block;
    font-family: 'Neo Sans Pro';
    color: #001441;
    margin-bottom: 0.3rem;
}
.log-in-container form input{
    width: 100%;
    padding: 1.8rem 1.6rem;
    background-color: transparent;
    font-size: 1.4rem;
    color: rgb(0, 20, 65, 0.5);
    border-radius: 1.6rem;
    font-family: 'Neo Sans Pro';
    border: 1px solid rgba(0, 20, 65, 0.2);
    margin-bottom: 1.6rem;
}
.log-in-container form input::placeholder{
    opacity: 1;
    color: rgba(0, 20, 65, 0.5);
}
.log-in-container form button{
    margin-top: 3rem;
    padding: 2rem;
    padding-left: 3.5rem;
    color: #89600A;
    font-size: 1.4rem;
    border-radius: 5rem;
    font-weight: 500;
    text-transform: uppercase;
    width: 100%;
    position: relative;
    background: rgb(252, 219, 150);
    background: linear-gradient(180deg, rgba(252, 219, 150, 1) 0%, rgba(215, 173, 86, 1) 100%);
    box-shadow: inset 0px 4px 4px 0px rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}
.log-in-container form button::before{
    position: absolute;
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #89600A;
    left: 37%;
    top: 50%;
    transform: translateY(-50%);
}
.login-bottom{
    height: 10rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #F3F4F6;
    border-radius: 0rem 0rem 4.6rem 4.6rem;
    margin: 0.4rem;
}
.login-bottom p{
    font-size: 1.4rem;
    color: rgba(0, 20, 65, 0.7);
    margin-bottom: 1.2rem;
}
.login-bottom a{
    color: #89600A;
    font-family: 'Neo Sans Pro';
    font-size: 1.4rem;
    font-weight: 500;
}
@media only screen and (min-width: 1024px) {
    .program-button, .index-blog-container-title a, .besplatan-sadrzaj, .zavrseno-button{
        transition: transform 0.3s ease!important;
    }
    .program-button:hover, .index-blog-container-title a:hover, .besplatan-sadrzaj:hover, .zavrseno-button:hover{
        transform: scale(1.05);
    }
    .nav-links > ul > li > a{
        transition: color 0.3s ease;
    }
     .nav-links > ul > li > a:hover{
        color: #bbaa15;
     }
     nav.active .nav-links > ul > li > a:hover{
         color: var(--dark-blue-color);
     }
     nav.inner .nav-links > ul > li > a:hover{
         color: var(--dark-blue-color);
     }
}

@media only screen and (max-width: 1200px) {
    .index-about-container{
        flex-direction: column-reverse;
    }
    .index-about-container-text{
        background: transparent;
        padding: 0rem;
    }
    .index-about-container{
        background: rgb(0, 92, 63);
        background: linear-gradient(112deg, rgba(0, 92, 63, 1) 0%, rgba(0, 165, 113, 1) 100%);
        align-items: flex-start;
        padding-left: 3rem;
        padding-top: 5rem;
        padding-bottom: 5rem;
        border-radius: 0rem 5rem 5rem 0rem;
        padding-right: 3rem;
    }
    .index-about-container-image{
        margin-left: unset;
        margin-bottom: 5rem;
    }
    .index-about-container-text > div > div{
        max-width: 100%;
        padding-left: 0rem;
    }
    .index-about-container-text > div{
        max-width: 100%;
    }
    
}

@media only screen and (max-width: 1024px) {
    .index-hero-container-image img{
        display: none;
    }
    .index-programi1-container-flex, .index-blog-container-flex{
        flex-direction: column;
    }
    .newsletter-container{
        flex-direction: column;
    }
}
@media only screen and (max-width: 900px) {
    .blog-all-container {
        grid-template-columns: repeat(2, 1fr);
    }
}


.hamburger{
    display: none;
}
.close-nav-popout{
    display: none;
}
@media only screen and (max-width: 800px) {
    .nav-links{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--dark-blue-color);
        transform: translateX(100%);
        transition: transform 0.5s ease;
        display: flex;
        align-items: center;
    }
    .close-nav-popout{
        display: block;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background-color: var(--white-color);
        color: var(--txt-color);
        position: absolute;
        top: 2rem;
        right: 3rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .close-nav-popout::before{
        position: absolute;
        content: "";
        width: 2rem;
        height: 0.1rem;
        transform: rotate(45deg);
        background-color: var(--txt-color);
    }
     .close-nav-popout::after{
        position: absolute;
        content: "";
        width: 2rem;
        height: 0.1rem;
        transform: rotate(-45deg);
        background-color: var(--txt-color);
    }
    .nav-dropdown-container li a{
        color: var(--white-color)!important;
        font-size: 1.4rem!important;
    }
    .nav-dropdown-container{
        position: relative;
        display: block;
        background: transparent;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease;
    }
    .nav-dropdown-container ul{
        align-items: center;
    }
    .nav-dropdown-container .line{
        background-color: #fff;
    }
    .nav-dropdown-outer{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
     .nav-links > ul{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
     }
    .nav-links.active{
        transform: translateX(0);
    }
    .nav-logo img{
        max-width: 13rem;
    }
    .hamburger{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 2.1rem;
        width: 3rem;
        background-color: transparent;
    }
    .hamburger span{
        width: 100%;
        height: 0.2rem;
        border-radius: 5px;
        background-color: var(--white-color);
    }
}
@media only screen and (max-width: 700px) {
    .newsletter-container-image img, .index-about-container-image img{
        width: 100%;
    }

}
@media only screen and (max-width: 480px) {
    .container{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .container-left{
        padding-right: 2rem;
    }
    .container-right{
        padding-left: 2rem;
    }
    .index-hero-container-text h1{
        font-size: 3rem;
    }
    .index-hero-container-text p{
        font-size: 4rem;
        margin-bottom: 3rem;
    }
    .program-button{
        font-size: 1.2rem;
        padding: 1.5rem;
        padding-left: 3.5rem;
    }   
    .index-dobrodosli-container h2{
        font-size: 3rem;
    }
    .index-dobrodosli-container p{
        font-size: 1.6rem;
    }
    .dobrodosli-list1{
        bottom: -68rem;
    }
    .dobrodosli-list2{
        top: -68rem;
    }
    .index-hero-section{
        height: 80vh;
    }
    .index-programi1-section{
        padding: 5rem 0rem;
    }
    .index-programi1-container > h2{
        font-size: 3rem;
        max-width: 30rem;
        margin: 0 auto;
        margin-bottom: 3rem;
    }
    .product-card-content{
        padding: 2rem;
    }
    .product-card{
        min-height: unset;
        border-radius: 3rem;
    }
    .index-about-container{
        border-radius: 0rem 3rem 3rem 0rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .index-about-container-image img{
        border-radius: 3rem;
    }
    .index-about-container-text p{
        font-size: 2rem;
    }
    .index-about-container-image{
        margin-bottom: 3rem;
    }
    .index-about-container-text span{
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .index-blog-section{
        padding: 5rem 0rem;
    }
    .index-blog-container-title h2{
        font-size: 3rem;
    }
    .index-blog-container-title a{
        display: none;
    }
    .index-blog-container-title{
        justify-content: center;
        margin-bottom: 3rem;
    }
    .newsletter-container-image img{
        border-radius: 3rem;
    }
    .newsletter-container{
        border-radius: 3rem;
        padding: 2rem;
        gap: 3rem;
    }
    .newsletter-container-text h2{
        font-size: 3rem;
    }
    .newsletter-container-text span{
        font-size: 1.2rem;
    }
    .footer-container-flex{
        flex-direction: column;
        gap: 3rem;
    }
    .footer-copyright{
        flex-direction: column;
        gap: 3rem;
    }
    .single-blog-container h1{
        font-size: 3rem;
    }
    .single-blog-content h2{
        font-size: 2.4rem;
    }
    .single-blog-content h3{
        font-size: 2.2rem;
    }
    .single-blog-content h4{
        font-size: 2rem;
    }
    .single-blog-content h5{
        font-size: 1.8rem;
    }
    .single-blog-content h6{
        font-size: 1.6rem;
    }
    .single-blog-section{
        padding: 5rem 0rem;
    }
    .single-blog-image img{
        border-radius: 3rem;
    }
    .ostali-blogovi-container h2{
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .ostali-blogovi-section{
        padding-bottom: 5rem;
    }
    .blog-all-container {
        grid-template-columns: repeat(1, 1fr);
    }
    .blog-all-section{
        padding: 5rem 0rem;
    }
    .inner-hero-section {
        height: 24rem;
    }
    .inner-hero-text h1{
        font-size: 3rem;
    }
    .cjenovnik-section{
        padding: 5rem 0rem;
    }
    .cjenovnik-container h1{
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .cjenovnik-container > :last-child{
        margin-bottom: 0rem;
    }
    .program-description-section{
        padding: 5rem 0rem;
    }
    .contact-page-section{
        padding: 5rem 0rem;
    }
    .contact-page-container h2{
        font-size: 3rem;
    }
    .order-page-section{
        padding: 5rem 0rem;
    }
    .order-page-container h2{
        font-size: 3rem;
    }
    .form-flex{
        flex-direction: column;
    }
    .index-about-section.about{
        padding: 5rem 0rem;
    }
    .about-logo-container-card{
        flex-direction: column;
    }
    .about-logo-container .line{
        margin: 3rem 0rem;
    }
    .about-logo-container-card{
        gap: 3rem;
    }
    .about-logo-container-card-text p{
        text-align: center;
    }
    .about-logo-section{
        padding-bottom: 5rem;
    }
    .sertifikati-container h2{
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    .sertifikati-section{
        padding-bottom: 5rem;
    }
    .login-top {
        padding: 3rem 2rem;
    }
    .log-in-container h1{
        font-size: 2rem;
        text-align: center;
    }
    .log-in-container form button::before{
        left: 33%;
    }
    .user-program-container{
        flex-direction: column;
    }
    .user-program-sidebar{
        max-width: 100%;
    }
    .user-program-accordion-button > div:first-child p{
        text-align: left;
    }
    .mark-as-finished-btn{
        margin-left: 0rem!important;
        margin-top: 2rem;
    }
    .index-about-section{
        padding-top: 5rem;
    }
    .index-blog-section{
        padding-top: 0rem;
    }
}



/* 
font-family: "Waterfall", serif
font-family: 'Neo Sans Pro';
font-family: 'Radio Grotesk'; 
*/