﻿:root {
    --velo-link: #975ab7;
    /*
        boja 1 tamnija: #d8bfff 
        boja 2 svjetlija: #e6d7fe

*/
    --velo-pozadina: #f5f1ff;
    --section-padding-mob: 40px;
    --section-padding-desk: 60px;
    --font-sm-1: 0.25rem;
    --font-sm-2: 0.5rem;
    --font-sm-3: 0.75rem;
    --font-md-1: 1rem;
    --font-md-2: 1.25rem;
    --font-md-3: 1.5rem;
    --font-lg-1: 2rem;
    --font-lg-2: 3rem;
    --font-lg-3: 4rem;

}

.bg-ljubicasta {
    background-color: var(--velo-link);
}

.bg-svetla {
    background-color: var(--velo-pozadina) !important;
}

.form-control:focus {
    border: none;
    box-shadow: 0 1px 1px var(--velo-pozadina) inset, 0 0 8px var(--velo-link);
    outline: none;
}



.btn-ljubicasta {
    background-color: var(--velo-link);
    color: white;
}

.text-ljubicasta {
    color: var(--velo-link);
}

.border-ljubicasta {
    border-color: var(--velo-link);
}

.navbar-brand-img {
    max-height: 3.2rem;
}

.card-body {
    padding: 2rem 1rem;
}

.page-link {
    border: 1px solid #dda5c9;
    color: var(--ljubicasta);
}

.page-item.active .page-link {
    background-color: var(--velo-link);
    border-color: var(--velo-link);
    color: #fff;
    z-index: 3;
}

.page-link:focus,
.page-link:hover {
    background-color: var(--velo-link);
    color: #fff;
}

.page-link:hover {
    border-color: var(--velo-link);
    text-decoration: none;
    z-index: 2;
}



@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: 540px;
    }

}

@media (min-width: 768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px;
    }

    .navbar-brand-img {
        max-height: 2.2rem;
        width: auto;
    }


}

@media (min-width: 992px) {

    .card-body {
        padding: 2rem;
    }


    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }

    .navbar-brand-img {
        max-height: 2.2rem;
        width: auto;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem;
    }


}

@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }


    .navbar-brand-img {
        max-height: 3rem;
        width: auto;
    }


}

@media (min-width: 1400px) {

    .navbar-brand-img {
        max-height: 4rem;
        width: auto;
    }
}


/*
.bg-ljubicasta{
	background-color:var(--ljubicasta);
}
*/
.bg-ljubicasta .breadcrumb-item+.breadcrumb-item:before {
    color: white;
}

.bg-footer {
    background-color: var(--ljubicasta) !important;
}

.text-dark {
    color: var(--ljubicasta) !important;
}


.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    /* overflow-y: hidden; */
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: .875rem;
}

.iti {
    width: 100%;
}

.iti__selected-flag {
    height: 55px !important;
}

/*
.btn-ljubicasta{
	background-color:var(--ljubicasta);
	color:white;
}
*/

.btn-ljubicasta:hover {
    background-color: rgba(151, 90, 183, 0.9);
    color: white;
}

/*
.btn-ljubicasta:disabled{
	cursor:not-allowed;	
}
*/
.border-primary {
    border-color: var(--velo-link) !important;
}

.form-check-input:checked {
    background-color: var(--velo-link);
    border-color: var(--velo-link);
}

body {
    font-family: 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Josefin Sans', sans-serif;
}

h2 {
    line-height: normal;
}

.overlay-dark:before {
    background-color: var(--ljubicasta);
}