/*!
Theme Name: Pet Friendly Beograd
Theme URI: https://petfriendlybeograd.com
Author: Pet Friendly Beograd team
Author URI: https://petfriendlybeograd.com
Description: Pet Friendly Beograd Wordpress template.
Version: 1.0
*/
:root {
	--neutral-1: #FFFFFF;
	--neutral-2: #f7f7ff;
	--neutral-3: #ececff;
	--neutral-4: #C6C6E0;
	--neutral-6: #7B7BA0;
	--neutral-7: #565687;
    --neutral-8: #353564;
	--primary-1: #7979ff;
	--secondary-100: #F9F5EB;
	--secondary-300: #ffc74e;
	--secondary-400: #D0F3A2;
	--space--sm: 24px;
	--display-10: 42px;
	--display-9: 36px;
	--display-8: 28px;
	--display-7: 28px;
	--display-6: 24px;
	--display-5: 22px;
	--display-4: 20px;
	--display-3: 18px;
	--display-2: 14px;
	--display-1: 12px;
	--shadow-regular: #4d91e11a;
}

body {
    font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: var(--neutral-6);
}

/* Backgrounds */
.bg-neutral-1 {
	background: var(--neutral-1);
}

.bg-neutral-2 {
	background: var(--neutral-2);
}

.bg-neutral-3 {
	background: var(--neutral-3);
}

.bg-secondary-100 {
	background: var(--secondary-100);
}

.bg-secondary-300 {
	background: var(--secondary-300);
}

.bg-secondary-400 {
	background: var(--secondary-400);
}

.bg-primary-1 {
	background: var(--primary-1);
}

/* Colors */
.neutral-1 {
	color: var(--neutral-1)
}
.neutral-2 {
	color: var(--neutral-2)
}
.neutral-3 {
	color: var(--neutral-3)
}
.neutral-4 {
	color: var(--neutral-4)
}
.neutral-5 {
	color: var(--neutral-5)
}
.neutral-6 {
	color: var(--neutral-6)
}
.neutral-7 {
	color: var(--neutral-7)
}
.neutral-8 {
	color: var(--neutral-8)
}
.primary-1 {
	color: var(--primary-1)
}

/* Font sizes */
.naslov-10 {
	font-size: var(--display-10);
	line-height: 1.115em;
}

.naslov-9 {
	font-size: var(--display-9);
	line-height: 1.115em;
}

.naslov-8 {
	font-size: var(--display-8);
	line-height: 1.115em;
}

.naslov-7 {
	font-size: var(--display-7);
	line-height: 1.115em;
}

.naslov-6 {
	font-size: var(--display-6);
	line-height: 1.125em;
}

.naslov-5 {
	font-size: var(--display-5);
	line-height: 1.125em;
}

.naslov-4 {
	font-size: var(--display-4);
	line-height: 1.125em;
}

.naslov-3 {
	font-size: var(--display-3);
	line-height: 1.125em;
}

.naslov-2 {
	font-size: var(--display-2);
	line-height: 1.125em;
}

.naslov-1 {
	font-size: var(--display-1);
	line-height: 1.125em;
}

/* Font weights */
.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 9500;
}

/* Text classes */
.excerpt p {
	line-height: 1.75;
	font-weight: 400;
}

.napomena p {
	line-height: 1.75;
	font-weight: 400;
}

/* Borders */
.radius-regular {
	border-radius: 24px!important;
}

.border-regular {
	border-color: var(--neutral-3)!important;
}

.border-neutral-8 {
	border-color: var(--neutral-8)!important;
}

/* Buttons */
.primary-button {
	padding: 14px var(--space--sm);
    border: 1px solid var(--primary--1);
    border-radius: 300px;
    background-color: var(--primary-1);
    color: var(--neutral-1);
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    text-decoration: none;
    transition: transform .3s;
    display: flex
}
.secondary-button {
	padding: 14px var(--space--sm);
    border: 1px solid var(--neutral-8);
    border-radius: 300px;
    background: none;
    color: var(--neutral-8);
    text-align: center;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    text-decoration: none;
    transition: transform .3s;
    display: flex
}

/* Shadows */
.senka-regular {
	box-shadow: 0 4px 8px 0 var(--shadow-regular);
}

.senka-small {
	box-shadow: 0 1px 2px 0 var(--shadow-regular);
}

.senka-medium {
	box-shadow: 0 8px 15px 0 var(--shadow-regular);
}

.senka-large {
	box-shadow: 0 8px 24px 0 var(--shadow-regular);
}

/* Navigation */

.navbar-toggler {
	position: relative;
	border: none;
	background: none;
	width: 3rem;
	height: 3rem;
	color: var(--neutral-8);
}
.navbar-toggler.collapsed {
	background: none!important;;
	color: var(--black)!important;
}

.navbar-toggler-icon {
	display: none; /* hide the default SVG icon */
}

.navbar-toggler::after {
	content: "\F479"; /* Unicode for bi-list */
	font-family: "bootstrap-icons";
	font-size: 2rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.navbar-toggler:focus {
	background: var(--blue);
	border: 1px main var(--border);
	box-shadow: none;
	color: #fff;
}

.navbar-toggler:focus .navbar-toggler::after {
	background: var(--blue);
	color: #fff;
	box-shadow: none;
}

			.dropdown-item:focus, .dropdown-item:hover, .dropdown-item.active, .dropdown-item:active {
				background: #fff!important;
			}
			.icon-lokacije-nav {
				width: 28px;
				height: 28px;
			}.icon-lokacije-nav i {
				font-size: 14px;
			}
			.dropdown-item span, .dropdown-item:hover span {
				    transition: all 0.3s ease-in-out;

			}
			.dropdown-item:hover span, .dropdown-item:hover span i {
				color: var(--blue)!important;
				border-color: var(--blue)!important
			}
		/* Add spacing between nav items only on large screens and above */
@media (min-width: 992px) { 
    .navbar-nav .nav-item {
        margin-right: 30px; /* Adjust spacing between items */
        position: relative; /* Needed for border positioning */
    }

    /* Add right border to all nav items except the last one */
    .navbar-nav .nav-item:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -15px; /* Adjust to align with spacing */
        top: 50%;
        height: 40%; /* Adjust for vertical centering */
        width: 1px;
        background-color: rgba(0,0,0,0.05);
        transform: translateY(-50%);
    }
}

/* Navbar link styles */
.navbar-nav .nav-link {
    color: var(--blue) !important;
    text-decoration: none;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
    color: var(--black) !important;
}

/* Ensure the link color stays consistent across different states */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active {
    color: var(--blue) !important;
}

   
/* Homepage Styles */
.icon-lokacije {
	width: 72px;
	height: 72px;
}

.card-kategorija h3, .card-kategorija .card-body, .card-kategorija .icon-lokacije, .list-group-item-action {
	transition: all 0.3s ease-in-out;
}
.card-kategorija:hover h3 {
	color: var(--neutral-3);
}
.card-kategorija:hover .card-body {
	background: var(--neutral-8)!important
}
.card-kategorija:hover .icon-lokacije {
	background: #fff;
}

/* Listing Styles */
.icon-informacije {
	width: 24px;
	height: 24px;
}
.icon-informacije i {
	font-size: 16px;
}

.list-group-item-action:focus, .list-group-item-action:hover {
	background: var(--neutral-3);
}

.radno_vreme ul li.danas {
  background: var(--neutral-2);
}

.radno_vreme ul li:not(.danas) {
  background-color: var(--neutral-1);
}


/* Responsive */
@media (min-width: 576px) { 
	:root {
		--display-10: 52px;
		--display-9: 38px;
		--display-8: 32px;
		--display-7: 28px;
		--display-6: 24px;
		--display-5: 22px;
		--display-4: 20px;
		--display-3: 18px;
		--display-2: 14px;
		--display-1: 12px;
	}
}


@media (min-width: 768px) { 
	:root {
		--display-10: 64px;
		--display-9: 48px;
		--display-8: 40px;
		--display-7: 30px;
		--display-6: 28px;
		--display-5: 22px;
		--display-4: 20px;
		--display-3: 18px;
		--display-2: 14px;
		--display-1: 12px;
	}
}


@media (min-width: 992px) { 
	:root {
		--display-10: 80px;
		--display-9: 58px;
		--display-8: 48px;
		--display-7: 38px;
		--display-6: 30px;
	}
}


@media (min-width: 1200px) {  
}


@media (min-width: 1400px) {  
	
 }




@media (max-width: 767px) {  
	.primary-button, .secondary-button {
		font-size: 18px;
	}
 }