@import url('https://fonts.googleapis.com/css2?family=Merriweather&family=Noto+Serif&family=Nunito:wght@300&display=swap');

:root {
    --fontSize: 16px;
    --fontFamily: 'Nunito', sans-serif;



    --rose-bud: #fab99b;
    --pinknude: #b86a77;
    --almond: #eed2c8;
    --au-chico: #8c625d;
--seashell: #f1f1f1;
    --black: #000;
    --mediumnude: #eabfb9;
    --svetloSiva: #f4f4f4;
    --text: #7a7a7a;
    --nude:#f6cfca;
    --bg: #f5f5f5;
    --lighttext:#c2bebe;
    --transition: .3s ease;
    --boxShadow: 0 2px 1px var(--text);
    --nav: #3d3939;
}

/*
background-image: url(https://niptgentest.rs/wp-content/uploads/2024/12/babysitter-background-white-1.png), linear-gradient(180deg, #d67e7e 0%, #e9c8c8 100%) !important;
--seashell: #f1f1f1;

 --almond: #eed2c8;
--spicy-mix: #8b5344;
--rose-bud: #fab99b;
--pharlap: #ac8b83;
--my-pink: #d79a87;
--santa-fe: #b27665;
--copper-rose: #926d66;
--leather: #9e685a;
--au-chico: #8c625d;
--muddy-waters: #bc846c;
*/
/***************
grid sistem
***************/
.row {
    width: 100%;
}
.row::after {
    display: block;
    content: ""; 
    clear: both;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-pet {width: 20%;}
[class*="col-"] {
    float: left;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: var(--fontSize);
    font-family: var(--fontFamily);
    color: var(--nav);
    transition: var(--transition);
    font-family: neue-kabel, sans-serif;
    font-style: normal;
    font-weight: 100;
    background-color: rgb(245 245 245);
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: var(--nav);
}

a {
    text-decoration: none;
}
a:hover {
    transition: var(--transition);
}
a:link, a:visited, a:active {
    text-decoration: none;
}
button {
    padding: 10px 50px;
    font-size: 1.2rem;
    border-radius: 20px;
    margin: 10px;
    cursor: pointer;
    transition: var(--transition);
}

.container {
    max-width: 1000px;
    margin: auto;
}
.container h2 {
    font-size: 2.5rem;
    font-weight: bold;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

/* NAV */

nav {
    top: 0;
    left: 0;
    display: flex; /* Aligns logo and menu items horizontally */
    justify-content: space-between; /* Separates logo and menu */
    align-items: center; /* Centers items vertically */
    background: var(--nav);
    padding: 10px 20px; /* Adjust spacing for aesthetics */
    position: fixed;
    width: 100%;
    z-index: 1000; /* Ensures the navbar stays above other elements */
}

.logo img {
    height: 50px; /* Logo size */
    width: auto;
    margin-right: 20px; /* Adds space between logo and menu */
}
nav ul {
    list-style: none;
    display: flex; /* Aligns list items horizontally */
    margin: 0;
    padding: 0;
}
nav ul li {
    margin-left: 20px; /* Reduced spacing for better compactness */
}
nav ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: var(--almond);
    background: var(--nav);
    padding: 5px 10px; /* Adds clickable padding for better usability */
    transition: color 0.3s; /* Smooth hover effect */
}
nav ul li a:hover {
    color: var(--pinknude);
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* DROPDOWN */

.dropbtn {
    /*display: inline-block;*/
    text-align: left;
}
li.dropdown {
    display: inline-block;
}

li a:hover {
    color: var(--pinknude);
}

li:hover .dropbtn{
    transition: var(--transition);
}

.dropdowncontent {
    display: none;
    position: absolute;
    margin-left: -25px;
    text-align: center;
    width: 168px;
    padding: 20px 14px 12px 0;
}

.dropdowncontent a{
    display: block;
    padding: 11px;
}

.dropdowncontent:hover{
    transition: var(--transition);
    /*color:var(--svetloSiva);*/
    /* background: linear-gradient(rgb(129, 124, 124),rgba(129, 125, 125, 0.4)); */
   /* background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2));*/
   
}
.dropdown:hover .dropdowncontent {
    display: block;
}
.dropdownEdu {
    position: relative;
}

.dropdowncontentEdu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%; /* So it opens to the right of its parent */
    z-index: 1;
    width: 130px;
}

.dropdownEdu:hover .dropdowncontentEdu {
    display: block;
}

/* HEADER */
header .text{
    background-image:url(img/handsContact.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
header .text h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    margin-top: 50px;
            font-family: neue-kabel, sans-serif;
        font-style: normal;
        font-weight: 100;
}
header .text h1::after{
    display: block;
    content: "";
    width: 50%;
    height: 1px;
    background: var(--almond);
    margin: 20px auto;
}
header .text p {
    color: var(--svetloSiva);
    font-weight: bolder;
    font-size: 1.3rem;
    margin-bottom: 30px
}
header .text .strokeme {
    text-shadow: 2px 1px 3px #000000;
}

header .text .btnUsluge, header .text .btnKontakt {
        border: 1px solid var(--au-chico);
    color: var(--nav);
}
header .text .btnUsluge a, header .text .btnKontakt a {
    color: var(--nav);
}
header .text .btnUsluge:hover, header .text .btnKontakt:hover {
    background: almond;
    border: 1px solid var(--au-chico);
}
header .text .btnUsluge:hover a, header .text .btnKontakt:hover a {
    color: var(--au-chico);
}

/* UVOD */
.platon {
    font-style: italic;
    text-align: right;
    padding-left: 30%;
    font-weight: 100;
    font-size: 1.8rem;

}
.uvod {
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--almond);
    color: var(--text);
}
.uvod article:nth-child(1) {
    padding: 50px;
    text-align: center;
}

.uvod h2 {
    font-size: 2rem;
    font-weight: bold;
}
/*****************
modeli
*****************/ 
.modeli {
    margin: auto;
    width: 50%;
}
.modeli article {
    width: 50%;
    float: left;
    padding: 22px;
    text-align: center;
}
/*animacija*/
.modeli img {
    width: 40%;
}
.modeli article .image_presentation {
    transition: opacity 3s ease-in-out;
}
.modeli article .image_presentation:hover {
    content: url('img/presentation1.gif');
}
.modeli article .image_blocks {
    transition: opacity 3s ease-in-out;
}
.modeli article .image_blocks:hover {
    content: url('img/blocks1.gif');
}
.modeli article .image_mentorship {
    transition: opacity 3s ease-in-out;
}
.modeli article .image_mentorship:hover {
    content: url('img/mentorship1.gif');
}
.modeli article .image_books {
    transition: opacity 3s ease-in-out;
}
.modeli article .image_books:hover {
    content: url('img/books1.gif');
}
.modeli h3 {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 0px;
    color: var(--nav);
}
.modeli p {
    font-size: 1.3rem;
}
.modeli article:nth-child(1),
.modeli article:nth-child(3) {
    border-right: 1px solid var(--text);
}
.modeli article:nth-child(1),
.modeli article:nth-child(2) {
    border-bottom: 1px solid var(--text);
}

/*****************
blog section on home page
*****************/ 
.homeblog {
    padding-top: 20px;
    margin: 50px auto;
    text-align: center;
    background: var(--nav);

}
.homeblog img {
    width: 80%;
}

.homeblog .col-4{
    padding: 0px 40px;
    width: 33%;
}
.homeblog .text {
    padding: 15px;
}
.homeblog h3 {
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--seashell);
    margin-bottom: 30px;
}
.homeblog p {
    font-size: 1rem;
    padding: 10px 0;
    color: var(--seashell);

}
.homeblog h3::after {
    display: block;
    content: "";
    width: 60%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}


.homeblog .text .btnUsluge, .blogButton .btnUsluge {
    background: var(--transparent);
    border: 1px solid var(--au-chico);
}
 .homeblog .text .btnUsluge a, .blogButton .btnUsluge a {
    color: var(--seashell);
}
 .homeblog .text .btnUsluge:hover, .blogButton .btnUsluge:hover {
    background: var(--almond);
    color: var(--nav);
}
 .homeblog .text .btnUsluge a:hover, .blogButton .btnUsluge a:hover {
    color: var(--nav);
}

.blogButton {
    text-align: center;
    background: var(--nav);
    padding-bottom: 20px;
}
/*****************
testimonials
*****************/ 
.testimonialh1 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 70px;
}
.testimonialh1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--nav);
    margin: 10px auto;
}
.testimonial-carousel {
  position: relative;
  width: 90%;
  margin: auto;
  overflow: hidden;
  margin-bottom: 70px;
    background-color: var(--almond);
    border-radius: 25px;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-slide {
  min-width: 100%;
  padding: 20px 50px;;
  box-sizing: border-box;
  text-align: center;
  margin: auto;
}

.testimonial-slide p {
  font-style: italic;
  font-size: 18px;
  color: #555;
}

.testimonial-carousel button {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 10px;
  z-index: 10;
  transform: translateY(-50%);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.testimonial-carousel button:hover {
  background-color: rgba(0, 0, 0, 0.7);
}



/*****************
footer
*****************/ 
footer {
    background: var(--au-chico);
    text-align: center;
    padding: 50px 0;
}
footer p {
    color: black;
}
footer ul li {
    display: inline-block;
    margin: 10px;
}
footer a {
    color: var(--almond);
    font-size: 1.5rem;
}
footer a:hover {
    color: var(--black);
}
.logoFooter img {
    height: 100px; /* Logo size */
    width: auto;
}
/*******************************
O NAMA
*******************************/
/***************
about
***************/

#more {display: none;}

.hiddenText {
    display: none;
}
.about{
    background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(img/team_1.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.about h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    margin-top: 200px;
}
.about h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.about p {
    padding-top: 100px;
}
/*************************** 
TEAM 
***************************/

.team {
    max-width: 1400px;
    margin: auto;
}
.team h3 {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.3 rem;
    color: var(--nav);
}
.team .col-4 {
    padding: 30px;
}
.team a:link, .team a:visited {
    color:var(--text);
    text-decoration: none;
    cursor:pointer;
  }
  
.team a:link:active, .team a:visited:active {
    color:var(--text)
  }
/* .team .col-4 {
    box-shadow: 0 0 25px gray;
} */
.team img {
    width: 100%;
    display: block;
}
.team img:hover {
    opacity: .8;
    transition: var(--transition);
}
.team img,
.team .description {
    box-shadow: 0 0 25px var(--au-chico);
}
.team .description .a {
    margin-left: 20px;
}

.team h2 {
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
}
.team .description {
    background: var(--seashell);
    padding: 20px;
}
.team .description h4,
.team .description h3,
.team .description p {
    padding-bottom: 10px;
}
.team button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--au-chico);
    padding: 10px 50px;
    border-radius: 20px;
}
.team button:hover{
    background: var(--almond);
    color: var(--text);
}
.team .description h4 {
    font-size: 1.5rem;
    text-align: center;
}
.team .description h4::after {
    display: block;
    content: "";
    width: 90%;
    height: 1px;
    background: var(--au-chico);
    margin: 0px auto;
}
.team .description h3 {
    color: var(--au-chico);
    font-weight: bold;
    text-align: center;
}
.team .description p {
    color: var(--zelena);
}
.team i {
    color: gray;
    margin: 10px;
    transition: var(--transition);
}
.team i:hover {
    color: var(--zelena);
}
.team .italic {
    font-style: italic;
}

.poverenje {
    max-width: 1400px;
    margin: auto;
}
.poverenje .col-12 {
    padding: 15px;
}
.poverenje h2 {
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
}
/*************************** 
SARADNICI
***************************/
.saradnici {
    max-width: 1400px;
    margin: auto;
}
.saradnici h3 {
    padding: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 1.3 rem;
    color: var(--nav);
}
.saradnici .col-4 {
    padding: 30px;
}
.saradnici a:link, .saradnici a:visited {
    color:var(--text);
    text-decoration: none;
    cursor:pointer;
  }
  
.saradnici a:link:active, .saradnici a:visited:active {
    color:var(--text)
  }
.saradnici img {
    width: 50%;
    display: block;
    border-radius: 100px;
    float: right;
}
.saradnici .description .a {
    margin-left: 20px;
}
.saradnici .description .a {
    margin-left: 20px;
}
.saradnici h2 {
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
}
.saradnici .description {
    background: var(--seashell);
    padding: 20px;
}

.saradnici button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--au-chico);
    padding: 10px 50px;
    border-radius: 20px;
}
.saradnici button:hover{
    background: var(--almond);
    color: var(--text);
}
.saradnici .description h4 {
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
}
.saradnici .description h4::after {
    display: block;
    content: "";
    width: 90%;
    height: 1px;
    background: var(--au-chico);
}
.saradnici .description h3 {
    color: var(--au-chico);
    font-weight: bold;
    text-align: center;
}
.saradnici .description p {
    color: var(--zelena);
}
.saradnici .bold {
    font-weight: bold;
}
/*************************** 
DECIJI PSIHOLOG
***************************/

.dp {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/decijaPsihologija_cover.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.dp h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    padding-top: 200px;
}
.dp h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.deciji .bold {
    font-weight: bold;
    font-size: 1.1rem;
}
.deciji .bold::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
.deciji .boldbold {
    font-weight: bold;
    color: var(--pinknude);
}
.deciji .italic {
    font-style: italic;
}
.deciji ul.a {
    list-style-type: circle;
  }
.deciji ol.a {
    list-style-type:decimal;
  }

.deciji a {
    text-decoration: underline;
    color: var(--pinknude);
}
.deciji {
    margin-top: 20px;
}
.deciji .description1 img {
    width: 100%;
}

.deciji .col-8 {
    padding-left: 100px;
}

.deciji .col-4 h4 {
    font-size: 1.5rem;
    font-weight: bold;
}

.deciji .col-4 h3 {
    font-size: 1.3rem;
    font-style: italic;
}
.deciji .col-4 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--nude);
    margin: 10px auto;
}
.deciji .col-4 p {
    padding: 10px 0;
}
.deciji .col-4 .bold {
    font-weight: bold;
    font-size: 1.1rem;
}
.deciji .col-4 .bold::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--nude);
    margin: 10px auto;
}
.deciji .col-12 .zakazi {
    font-size: 2rem;
}
.deciji .soc ul {
    margin-top: 80px;
    margin-left: 70px;
}
.deciji .col-6 img {
    width: 100%;
}
.deciji .faq {
    font-weight: bold;
}
/*************************** 


/*************************** 
 ODRASLI 
***************************/
.po {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/odrasliHeader.jpg);
    background-position: 0px -140px;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.po h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    padding-top: 200px;
}
.po h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}

.odrasli .bold {
    font-weight: bold;
    font-size: 1.1rem;
}

.odrasli .bold::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}

.odrasli a {
    text-decoration: underline;
}
.odrasli .italic {
    font-style: italic;
}
.odrasli ul.a {
    list-style-type: circle;
  }
.odrasli ol.a {
    list-style-type:decimal;
  }

.odrasli a {
    text-decoration: underline;
}
.odrasli {
    margin-top: 20px;
}
.odrasli .description1 img {
    width: 100%;
}
.odrasli .col-8 {
    padding-left: 100px;
}
.odrasli .col-4 h4 {
    font-size: 1.5rem;
    font-weight: bold;
}
.odrasli .col-4 h3 {
    font-size: 1.3rem;
    font-style: italic;
}
.odrasli .col-4 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
.odrasli .col-4 p {
    padding: 10px 0;
}
.odrasli .col-4 h3 {
    font-weight: bold;
    font-size: 1.1rem;
}
.odrasli .col-4 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--nude);
    margin: 10px auto;
}
.odrasli .soc ul {
    margin-top: 80px;
    margin-left: 70px;
}
.odrasli .col-6 img {
    width: 100%;
}
.odrasli .col-12 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
/*************************** 
LJUDSKI RESURSI
***************************/

.ljr {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/hr_header.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.ljr h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    padding-top: 200px;
}
.ljr h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}

.ljudski .bold {
    font-weight: bold;
    font-size: 1.1rem;
}

.ljudski a {
    text-decoration: underline;
    color: var(--pinknude);
}
.ljudski .col-12 h3 {
    font-weight: bold;
}
.ljudski .col-12 h4 {
    font-size: 1.3rem;
    font-style: italic;
}
.ljudski .col-12 h5 {
    font-size: 1.4rem;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}
.ljudski .col-12 ul.hr {
    list-style-type: circle;
  }
.ljudski .italic{
    font-style: italic;
}
.ljudski .col-12 ol.hr1 {
    list-style-type:decimal;
}


.ljudski {
    margin-top: 20px;
}
.ljudski .description1 img {
    width: 100%;
}
.ljudski .col-8 {
    padding-left: 100px;
}
.ljudski .col-4 h4 {
    font-size: 1.5rem;
    font-weight: bold;
}
.ljudski .col-4 h3 {
    font-size: 1.3rem;
    font-style: italic;
}
.ljudski .col-4 h3::after, .ljudski .col-8 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
.ljudski .col-4 p {
    padding: 10px 0;
}
.ljudski .col-4 h3 {
    font-weight: bold;
    font-size: 1.1rem;
}
.ljudski .col-4 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--nude);
    margin: 10px auto;
}

.ljudski .soc ul {
    margin-top: 80px;
    margin-left: 70px;
}
.ljudski .col-6 img {
    width: 100%;
}
.ljudski .col-12 h3::after {
    display: block;
    content: "";
    width: 100%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
/*************************** 
EDUKACIJE I RADIONICE
***************************/

.eir {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/edukacije.jpg);
    background-position: 0px -345px;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.eir h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    padding-top: 200px;
}
.eir h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.radionice h3 {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
}
.radionice h3::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--pinknude);
    margin: auto;
}
.radionice .bold {
    font-weight: bold;
}
.radionice .boldbold {
    color: var(--pinknude);
    font-weight: bold;
}
.radionice .col-6:nth-child(3) {
    width: 99%;
}
.radionice button .posaljiPoruku{
    text-align: center;
}

.ljr h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
/* WEBINARI */

.webinari {
    margin: 50px auto;
    text-align: center;
}
.webinari img {
    width: 40%;
}
.webinari h3{
    margin-top: 20px;
}
.webinar-posts a{
    text-decoration: none;
    color: var(--nav);
}
.asertivni-trening{
    margin: 20px auto;
}
.asertivni-trening .bold {
    color: var(--pinknude);
    font-weight: bold;
    text-decoration: underline;
}
.asertivni-trening .italic {
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
.asertivni-trening a {
    color: var(--pinknude);
}
.asertivni-trening .asertivnibutton {
    text-align: center;
}
.asertivni-trening h3 {
    text-align: center;
}
/*************************** 
 BLOG
***************************/
.blogMain {
    background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(img/blog_new.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.blogMain h1{
    color: var(--svetloSiva);
    text-shadow: -4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    margin-top: 200px;
}
.blogMain h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}

.blogPosts {
    margin-top: 50px;
    text-align: center;
}
.blogPosts img {
    width: 100%;
}
.blogPosts .col-4 {
    padding: 30px;
    margin-bottom: 30px;
}
.blogPosts h3 {
    font-weight: bold;
}
.blogPosts h3::after {
    display: block;
    content: "";
    width: 60%;
    height: 1px;
    background: var(--pinknude);
    margin: 10px auto;
}
.filter-buttons button{
    background: var(--transparent);
    padding: 10px 20px;
    border: 1px solid var(--text);
    color: var(--text);
}
.filter-buttons button:hover{
    background: var(--transparent);
    padding: 10px 20px;
    border: 1px solid var(--text);
    color: var(--nav);
}
}
.blogPosts h4 {
    font-weight: bold;
}
.blogpost button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
.blogPosts .btnBlog, .blogpost .btnBlog {
    background: var(--almond);
    border: 1px solid var(--text);
    color: var(--nav);
    text-align: center;
}

.blogPosts .btnBlog a, .blogpost .btnBlog a{
    text-decoration: none;
    color: var(--nav); 
    text-align: center;
}
.blogPosts .btnBlog:hover, .blogpost .btnBlog:hover{
    background: var(--seashell);
    border: 1px solid var(--text);
    color: var(--nav); 
}
.blogPosts .btnBlog a:hover, .blogpost .btnBlog a:hover{
    color: var(--nav); 
}


/*************************** 
POP-UP BUTTON
***************************/
  .button {

    text-decoration: underline;
    cursor: pointer;
  }
  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: hidden;
    opacity: 0;
  }
  .overlay:target {
    visibility: visible;
    opacity: 1;
  }
  
  .popup {
    margin: auto;
    text-align: left;
    background: #fff;
    border-radius: 10px;
    width: 85%;
    position: relative;
    margin-top: 100px;
    padding: 20px;
}
.popup .content ul {
    list-style-type:circle;
}
  .popup h2 {
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
    padding-top: 20px;
    text-align: center;
  }
  .popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }
  .popup .close:hover {
    color: var(--almond);
  }
  .popup .content {
    height: 400px;
    overflow: scroll;
  }
  
  @media screen and (max-width: 700px){
    .box{
      width: 70%;
    }
    .popup{
      width: 70%;
    }
  }


/* USLUGE */

.usluge {
    /* background: var(--almond); */
    background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(img/usluge.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.usluge h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    text-align: center;
    font-size: 4rem;
    margin-top: 200px;
}
.usluge h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.usluge p {
    padding-top: 20px;
}

.sekcijaUsluge {
    max-width: 1000px;
    margin: auto;
}
.uslugemodeli {
    padding: 30px;
}
.uslugemodeli article {
    width: 50%;
    float: left;
    padding: 22px;
    text-align: center;
}

.uslugemodeli img {
    width: 50%;
}


/*animacija*/
.uslugemodeli img {
    width: 40%;
}
.uslugemodeli article .image_presentation {
    transition: opacity 3s ease-in-out;
}
.uslugemodeli article .image_presentation:hover {
    content: url('img/presentation1.gif');
}
.uslugemodeli article .image_blocks {
    transition: opacity 3s ease-in-out;
}
.uslugemodeli article .image_blocks:hover {
    content: url('img/blocks1.gif');
}
.uslugemodeli article .image_mentorship {
    transition: opacity 3s ease-in-out;
}
.uslugemodeli article .image_mentorship:hover {
    content: url('img/mentorship1.gif');
}
.uslugemodeli article .image_books {
    transition: opacity 3s ease-in-out;
}
.uslugemodeli article .image_books:hover {
    content: url('img/books1.gif');
}


.uslugemodeli h3 {
    font-size: 1.8rem;
    font-weight: bold;
    padding: 0px;
    color: var(--nav);
}
.uslugemodeli p {
    font-size: 1.1rem;
}
.uslugemodeli article:nth-child(1),
.uslugemodeli article:nth-child(3) {
    border-right: 1px solid var(--nav);
}
.uslugemodeli article:nth-child(1),
.uslugemodeli article:nth-child(2) {
    border-bottom: 1px solid var(--nav);
}

/***************
contact
***************/
.contactus .row {
    /* background: var(--almond); */
    background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url(img/contact_page.jpg);
    background-position: bottom;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.contactus .row h1 {
    color: var(--almond);
    text-align: center;
    font-size: 4rem;
    color: var(--almond);
    padding-top: 200px;
}
.contactus h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--lighttext);
    margin: 10px auto;
}
.contactus P {
    font-size: 1.5rem;
}
.contact .col-6 {
    color: var(--nav);
    float: inline-end;
}
.contact .col-1 {
    padding-top: 43px;
}
.contact .col-11 {
    padding-top: 23px;
}
.contact i {
    font-size: 2rem;
    color: var(--rose-bud);
    margin-left: -2px;
}
.contact h2{
    padding: 30px;
    text-align: center;
}
.contact h5 {
    font-size: 1.5rem;
}
.contact .kontakt2 img {
    width: 60%;
    margin-left: 150px;
    padding-top: 20px;
}
.forma .col-12 {
    text-align: center;
    font-family: 'Nunito', sans-serif;
}

#formatext, #formaemail {
    width: 98%;
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid black;
    outline: none;
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.2rem;
}
#formaarea {
    width: 100%;
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid black;
    outline: none;
    padding: 10px;
    font-family: 'Nunito', sans-serif;  
    font-size: 1.2rem;

}
.form input ::placeholder {
    color: red;
    font-family: var(--fontFamily);
}
.contact :focus {
    background: var(--svetloSiva);
    color: var(--black);
    font-family: var(--fontFamily);

}
.contact .col-12 .kontaktDugme {
    border: 1px solid var(--text);
    color: var(--text);
    margin-bottom: 30px;
}
.contact .kontaktDugme:hover {
    color: var(--nav);
}

/***************
BLOG POSTS
***************/
.blogArticle h1 {
    text-align: center;
    font-size: 2rem;
    color: var(--almond);
}
.blogpost {
    margin-top: 20px;
    margin-bottom: 20px;
}

.blogpost h3 {
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;

}
.blogpost h3::after {
    display: block;
    content: "";
    width: 50%;
    height: 2px;
    background: var(--pinknude);
    margin: 10px auto;
}
.blogpost ul.a {
    list-style-type: circle;
  }
.blogpost ol.a {
    list-style-type:decimal;
  }

.blogpost a {
    text-decoration: underline;
}
.blogpost .bold {
    font-weight: bold;
}
.blogpost .col-4 {
    padding: 10px;
}
.blogpost .incolor {
    text-decoration: underline;
    color: var(--pinknude);
}
.blogpost .italic {
    font-style: italic;
}


/*********BLOG POSTOVI**********/

.decijiPrviSusret {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_kids1.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.psiholoskaProcenaDeteta {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_kids2.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.petRazloga {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_kids3.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.transakciona {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_trans.jpg);
    background-position: bottom;
    background-size: 60% 100%;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.asertivnaKomunikacija {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_asertivnost.jpg);
    background-position: right;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;
}
.blog6 {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_6.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;    
}
.psiholoskiInstrumenti {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_7.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;   
}
.muskarci_psihoterapija{
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_8_muskarci.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;       
}
.pravaZaposlenih{
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_9_prava_zaposlenih.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;       
}
.zadovoljstvoZaposlenih{
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/blog_10_zadovoljstvo_zaposlenih.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;  
}
.webinar-asertivni-trening {
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/webinar_asertivni_trening.jpg);
    background-position: center;
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
    letter-spacing: 1px;
    color: var(--almond);
    height: 500px;  
}
.pravaZaposlenih_section .boldbold {
    font-weight: bold;
    color: var(--pinknude);
}
.zadovoljstvoZaposlenih_section .boldbold {
    font-weight: bold;
    color: var(--pinknude);
}
.decijiPrviSusret h1, .psiholoskaProcenaDeteta h1, .transakciona h1, .petRazloga h1, .asertivnaKomunikacija h1, .blog6 h1, .psiholoskiInstrumenti h1, .muskarci_psihoterapija h1, .pravaZaposlenih h1, .zadovoljstvoZaposlenih h1, {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    font-size: 2rem;
    color: var(--almond);
    padding-top: 150px;
}
.webinar-asertivni-trening h1 {
    color: var(--svetloSiva);
    text-shadow: -4px 0px 3px #000000;
    font-size: 2rem;
    color: var(--almond);
    padding-top: 150px;
}
.decijiPrviSusret h1::after, .psiholoskaProcenaDeteta h1::after, .petRazloga h1::after, .transakciona h1::after, .asertivnaKomunikacija h1::after, .blog6 h1::after, 
.psiholoskiInstrumenti h1::after, .muskarci_psihoterapija h1::after, .pravaZaposlenih h1::after, .zadovoljstvoZaposlenih h1::after, .webinar-asertivni-trening h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.blogAuthor {
    width: 100%;
    text-align: right;
    display: inline-block;
    padding-right: 40px;
}
.blogAuthor .tamno {
    color: var(--nav);
    font-weight: bold;
}
.blogAuthor .svetlo{
    color: var(--seashell);
    font-weight: bold;
}

.blogAuthor img{
    height: 100px;
    padding-right: 30px;
}
.asert .blogpost {
    text-align: center;
}
.blogpost .asert {
    font-style: italic;
    font-weight: bold;
    color: var(--pinknude);
    font-size: 1.2rem;
    text-align: center;
}
.blogpost .asertBold {
    font-weight: bold;
}
.blog6Italic {
    font-style: italic;
    font-weight: bold;
}
.psihInstrumenti h2, .trans h2, .muskarci h2, .pravaZaposlenih_section h2, .zadovoljstvoZaposlenih_section h2{
    text-align: center;
    color: black;
}
.psihInstrumenti a, .trans a, .muskarci a, .pravaZaposlenih_section a, .zadovoljstvoZaposlenih_section a{
    color: black;
    text-shadow: -4px 0px 3px var(--nude);
}



/*DECIJI BESPLATNA ONLINE KONSULTACIJA SEKCIJA NA DECIJIPSIHOLOG STRANI ***************************/
.besplatnaKonsultacijaUvod{
    background-image: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),url(img/JEL_1277.jpg);
    background-position: center;
    background-size: cover;
    height: 400px;
}
.besplatnaKonsultacijaUvod h1 {
    color: var(--svetloSiva);
    text-shadow:-4px 0px 3px #6a3a2c;
    font-size: 2rem;
    color: var(--almond);
    padding-top: 200px;
    text-align: center;
}
.besplatnaKonsultacijaUvod h1::after {
    display: block;
    content: "";
    width: 40%;
    height: 2px;
    background: var(--almond);
    margin: 10px auto;
}
.besplatnaKonsultacija {
    margin-top: 50px;
}
.besplatnaKonsultacija h2 {
    font-size: 2rem;
    text-align: center;
    margin-top: 20px;
}
/*********
SOCIJALNE MREZE NA USLUGE STRANAMA
*********/
.deciji .soc ul, .odrasli .soc ul, .ljudski .soc ul {
    list-style-type:none;
}
.deciji .soc ul li, .odrasli .soc ul li, .ljudski .soc ul li {
    margin: 10px;
}
.deciji .soc a, .odrasli .soc a, .ljudski .soc a {
    font-size: 1.5rem;
    color: var(--text);
}
.deciji .soc a:hover, .odrasli .soc a:hover, .ljudski .soc a:hover {
    color: var(--pinknude);
}
.deciji .soc a i, .odrasli .soc a i, .ljudski .soc a i {
    font-weight: 900;
}



/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/
/*********************************RESPONSIVE************************************************************************RESPONSIVE***************************************/

/*za mobilne telefone - da navigacija bude na centru ekrana*/

/*@media screen and (max-width: 500px) {
nav ul {
        display: inline-block;
}
.topnav li a {
    display: inline;
    text-align: center;
    text-decoration: none;
}
*/
/*********** HEADER ***********/

/*
header .text h1::after{
    display: block;
    content: "";
    width: 50%;
    height: 1px;
    background: var(--almond);
    margin: 20px auto;
}


}
*/

@media screen and (max-width: 1024px) {
    /* Show the hamburger menu icon on smaller screens */
    .topnav .icon {
        display: block; /* Show hamburger icon on mobile */
        font-size: 30px;
        color: var(--almond);
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }

    /* Adjust the nav layout for smaller screens */
    nav ul {
        flex-direction: column;
        width: 100%;
        display: none; /* Initially hide the menu */
        background-color: var(--nav);
        padding: 10px 0;
    }

    .topnav.responsive ul {
        display: flex; /* Show the menu when toggled */
    }

    nav {
        flex-wrap: wrap;
    }
    
    nav ul li {
        margin: 10px 0;
    }
    
    /* Dropdown adjustments for mobile */
   .dropdown:hover .dropdowncontent,
    .dropdownEdu:hover .dropdowncontentEdu {
        display: none;
    }

    .dropdowncontent,
    .dropdowncontentEdu {
        display: none;
    }

    .dropdown.open .dropdowncontent,
    .dropdownEdu.open .dropdowncontentEdu {
        display: block;
    }



/*********** UVOD ***********/
    .uvod {
        width: 100%;
    }
    .uvod article:nth-child(1) {
        padding: 25px;
    }
    .uvod h2 {
        font-size: 1.8rem;
        font-weight: bold;
        text-align: left;
    }

.uvod .platon{
    font-size: 1.3rem;
    padding-left: 0px;
}
/*********** MODELI ***********/
.modeli {
    width: 99%;
    margin: auto;
}
.modeli img {
    width: 50%;
}   
.modeli h3 {
    font-size: 1.2rem;
}
.modeli article:nth-child(1),
.modeli article:nth-child(3) {
    border-right: 1px solid var(--text);
}
.modeli article:nth-child(1),
.modeli article:nth-child(2) {
    border-bottom: 1px solid var(--text);
}
/*********** HOME PAGE BLOG ***********/
    .homeblog {
        margin-top: 10px;
    }
    .homeblog article{
        margin: auto;
        width: 80%;
    }
    .homeblog article:last-child{
        display: none;
    }
    .homeblog .col-4{
        padding: 10px 20px;
        width: 100%;
    }
    .homeblog h3 {
        font-size: 1.4rem;
        margin: auto;
    }
    .homeblog .text .btnUsluge {
        background: transparent;
        border: 1px solid var(--text);
        width: 90%;
    }
    .homeblog .text .btnUsluge a {
        font-size: 1.2rem;
    }
    .homeblog .text {
        padding: 0px;
    }
    .homeblog p {
        display: none;
    }
    .blogButton .btnUsluge {
        background: transparent;
        border: 1px solid var(--text);
    }
/*********** FOOTER ***********/
    footer {
        padding: 0px;
    }
/************************* NASI SARADNICI *************************/

.saradnici .col-4 {
    width: 90%;
}
.saradnici img {
    width: 90%;
}
/************************* O NAMA STRANA *************************/

.hiddenText {
    display: none;
}
.about h1 {
    font-size: 3rem;
}
.about h1::after {
    width: 90%;
    height: 1px;
    margin: 0px auto;
}
.team h2 {
    font-size: 1rem;
}
.about p {
    padding-top: 90px;
    font-size: 14px;
}
.team .col-4 {
    width: 90%;
    margin: 0px 18px;
    padding: 10px;
}
.team .description {
    padding: 10px;
}
.team .description p{
    padding: 0px;
}
.team .col-4 .description .responsiveHidden {
    display: none;
}
.team .description h3 {
    color: var(--au-chico);
}
.team .description h4 {
    font-size: 1.1rem;
}
.team .description h4::after {
    display: block;
    content: "";
    width: 90%;
    height: 1px;
    background: var(--au-chico);
    margin: 0px auto;
}

.team button {
    font-size: 15px;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--au-chico);
    padding: 8px 28px;
    border-radius: 40px;
}
.team button:hover {
    background: var(--almond);
    color: var(--text);
}
/************************** PSIHOLOGIJA ODRASLIH *************************/
.po {
    background-position: center;
}
.po h1, .ljr h1, .dp h1 {
    font-size: 2rem;
}
.po h1::after, .ljr h1::after, .dp h1::after {
    width: 90%;
    height: 2px;
}
.odrasli .col-4, .ljudski .col-4, .deciji .col-4 {
    width: 90%;
    text-align: center;
    margin: 0px 18px;
}
.odrasli .col-4 h4, .ljudski .col-4 h4, .deciji .col-4 h4 {
    font-weight: unset;
}
.odrasli .col-4 h3::after, .ljudski .col-4 h3::after, .deciji .col-4 h3::after {
    margin: 0px auto;
}
.odrasli .col-12{
    width: 90%;
    text-align: center;
    margin: 0px 18px;
    padding-left: 0px;
}

.odrasli .description1 .button {
    display: block;
}
.popup {
    width: 90%;
}

.popup .close {
    display: unset;

}
.soc .col-6 {
    width: 90%;
    margin: 0px 18px;
}
.odrasli .soc ul, .deciji .soc ul, .ljudski .soc ul {
    margin-top: 0px;
    margin-left: 0px;
    text-align: center;
}
.deciji .soc a, .odrasli .soc a, .ljudski .soc a {
    font-size: 1.1rem;
}
/************************** POSLOVNA PSIHOLOGIJA *************************/
/*ima jos iznad u psihologija odraslih*/

.ljudski  {
    width: 90%;
    text-align: left;
    margin: 20px 35px;
    padding-left: 0px;
}
/************************** DECIJA PSIHOLOGIJA *************************/

.deciji .col-4 .bold::after {
    margin: 0px auto;
}
 .deciji .col-12{
    width: 90%;
    text-align: left;
    margin: 0px 25px;
    padding-left: 0px;
}
.deciji .bold {
    text-align: left;
}
.deciji .col-12 h3 {
    margin-top: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}
/*************************** 
DECIJI BESPLATNA ONLINE KONSULTACIJA
***************************/
.besplatnaKonsultacija {
    margin: 25px;
}


/*********** USLUGE ***********/
.usluge .row h1 {
    font-size: 3rem;
}
.usluge h1::after {
    width: 90%;
    height: 1px;
    margin: 0px auto;
}
.usluge p {
    padding-top: 90px;
    font-size: 14px;
}
.poverenje h2 {
    font-size: 1.2rem;
}
.uslugemodeli {
    width: 99%;
    margin: auto;
}
.uslugemodeli img {
    width: 50%;
}
.uslugemodeli h3 {
    font-size: 1rem;
}
.uslugemodeli article:nth-child(1),
.uslugemodeli article:nth-child(3) {
    border-right: 1px solid var(--text);
}
.uslugemodeli article:nth-child(1),
.uslugemodeli article:nth-child(2) {
    border-bottom: 1px solid var(--text);
}


/*********** BLOG STRANA ***********/
.filter-buttons button{
    background: var(--transparent);
    padding: 0px 10px;
    border: 1px solid var(--text);
    color: var(--text);
}
.filter-buttons button:hover{
    padding: 0px 10px;
    background: var(--transparent);
    border: 1px solid var(--text);
    color: var(--nav);
}
.blogPosts {
    margin-top: 0px;
}
.blogPosts .row {
    width: 90%;
}
.blogPosts .col-4 {
    width: 100%;
    text-align: center;
    margin: 0px 17px;
    padding: 10px;
}
/**********************RADIONICE************************/
.eir {
    background-position: 0px;
}
.radionice {
    width: 90%;
}
.radionice .col-6 {
    width: 90%;
}
/*********** BLOG POSTS STRANE ***********/
.blogpost, .asertivni-trening {
    width: 90%;
}
.blogArticle h1 {
    text-align: center;
    font-size: 1.5rem !important;
}
/*********** KONTAKT STRANA ***********/
.contactus .row h1 {
    font-size: 2rem;
    padding-top: 100px;
}
.contactus .row h1::after {
        width: 90%;
        height: 1px;
        margin: 0px auto;
    }
.contactus .row p {
        padding-top: 20px;
        color: var(--svetloSiva);
    }
.contact .col-6 h2{
    text-align: center;
}
.contact .col-6 {
    color: var(--nav);
    float: none;
    margin: auto;
    padding-top: 20px;
}
.contact h5 {
    font-size: 1rem;
    font-weight: bold;
}
.col-6 .kontaktInfo {
    width: 90%;
    text-align: left;
    margin: 0px 0px;
    float: none;
}
.kontakt2 .logoKontaktimg img {
    width: 90%;
    margin: 0px;
}
.kontaktInfo .col-1 {
    padding-top: 20px;
}
.kontaktInfo form{
    text-align: center;
}
.contact .col-11 {
    padding: 0px 20px;
}
.kontakt2{
    text-align: center !important;
    padding:0%;
    width: 90%;
}
.kontakt2 .logoKontaktimg img{
    width: 90%;
}
#formaarea {
    width: 70%;
    text-align: center;
}
#formatext, #formaemail {
    text-align: center;
}


    } /*kraj*/