:root{
    --vijolicna : #44318D;
    --tmno_vijolicna : #2A1B3D;
    --roza: #fcdcfc;
    --roza_bela: hsl(300, 100%, 99%);
    --naslov: #9e6696;
}

body{
    font-size:1.08rem;
}

p{
    text-align: justify;

}

.navbar-nav .dropdown-menu {
    display: none; /* Skrij podmeni */
    opacity: 0; /* Skrij z opasity */
    visibility: hidden; /* Onemogoči interakcijo */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Prehodni učinki */
}

/* Prikaži podmeni, ko se premakneš nad glavno postavko */
.navbar-nav .dropdown:hover .dropdown-menu {
    display: block; /* Prikaži podmeni */
    opacity: 1; /* Prikaz z opasity */
    visibility: visible; /* Omogoči interakcijo */
}

h2{
    color: var(--naslov);
}

.container-header{
    height: 70px;
    background-color: var(--vijolicna) !important;
    background-image: none;
    opacity: 0.9;
    border-bottom: solid 0.5px var(--roza);
}
.itemid-103 .page-header, 
.itemid-101 .page-header, 
.itemid-105 .page-header, 
.itemid-102 .page-header,
.itemid-106 .page-header,
.itemid-107 .page-header,
.itemid-111 .page-header,
.itemid-110 .page-header{
    display: none;
}
.text-muted{
    display: none !important;
}

.btn-secondary{
    display: none;
}

/*Header*/
.sticky{
    position: fixed;
    width: 100%;
    height: 70px !important;
    z-index: 999;
}


/*Logo*/
.brand-wrapper{
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -41px;
}

.brand-logo img{
    float: left;
    height: 70px;
    width: 70px;
    transition: 2s;
    margin-left: 10%;
}


/*Menu*/
.navbar{
    margin: auto;
}

.brand-logo img:hover{
    transform:scale(1.6);
}


.metismenu-item a { 
    color: white;
    background-color: var(--vijolicna); 
}

.metismenu.mod-menu .metismenu-item{
    background-color: var(--vijolicna); 
}

.mod-menu .metismenu.mod-menu .mm-collapse {
    display: none;
    transition: 200ms ease;
    position: relative;
  }

  .mod-menu .metismenu-item:hover .mm-collapse {
    display: block;
    
  }

/*Glavni div*/
.container-component{
    margin-top: 115px;
    margin-bottom: 30px;
}

.itemid-105 .container-component, 
.itemid-102 .container-component,
.itemid-106 .container-component,
.itemid-107 .container-component,
.itemid-110 .container-component
{
    padding: 15px;
    border: solid 0.5px var(--roza);
    border-radius: 10px;
    background-color: var(--roza_bela);
    box-shadow: 7px 6px 5px #c1c4c9;
    border-radius: 10px;
}

.blog-item {
    box-shadow: 7px 6px 5px #c1c4c9;
    border-radius: 10px;
}

.blog-items .blog-item {
    margin: 0 0 1.5em !important;
}

/*Main page*/

.main-top {
    border: 0px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.main-top{
    margin-top: 50px;
}

.itemid-101 .main-top:nth-child(1){
    margin-top: -2%;
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 81%, rgba(0, 0, 0, 0) 91%);
}
.itemid-101 .main-top:nth-child(1) .card-body{
    mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}

.itemid-101 .main-top:nth-child(1) .card-body div{
    max-height: 500px;
}

.itemid-101 .main-top:nth-child(2){
    grid-column: 1 / -1;
    width: 99.55vw;
    margin-left: calc(-50vw + 50%);
    background-color: var(--roza);
    min-height: 85px;
    padding-top: 15px;
}

.itemid-101 .main-top:nth-child(2) p{
    margin-bottom: 0px;
}

.itemid-101 .main-top:nth-child(2) .card-body{
    margin: auto;
}

/*Main storitve*/
#mod-custom114 {
    margin:3%;
    margin-bottom: 4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#mod-custom114 .storitve_main{
    background-color: var(--roza_bela);
    min-height: 300px;
    padding: 20px;
    flex: 25%;
    max-width: 21%;
    text-align: center;
    border: solid 0.5px var(--roza);
    display: flex;
    flex-direction: column; /* Postavi otroške elemente v stolpec */
    justify-content: space-between; /* Razmakni elemente znotraj div-a */
    box-shadow: 7px 6px 5px #c1c4c9;
}

#mod-custom114 .storitve_main p{
    text-align: center;
}

.storitve_main img{
    margin-bottom: 5%;
    
}

.storitve_main button{
    padding: 5px 5px;
    background-color: var(--vijolicna);
    border: none;
    align-self: center;
    border-radius: 5px;
}

.storitve_main button a{
    padding: 6px 22px;
}

.storitve_main button:hover{
    background-color: white;
    border: solid 0.5px var(--vijolicna);
}

.storitve_main button:hover a{
    color: var(--vijolicna);
}



.storitve_main button a{
    text-decoration: none; 
    color: white;
}

.storitve_main{
    transition: 2s;
}

.kvantni_box{
    padding: 15px;
    border: solid 0.5px var(--roza);
    border-radius: 10px;
    background-color: var(--roza_bela);
    margin-bottom: 2.5rem;
    box-shadow: 7px 6px 5px #c1c4c9;
}

.mod-custom120 p{
    text-align: inherit !important;
}

#mod-custom114:hover .storitve_main {
    transform: scale(0.9);
    opacity: 0.5;
}

.storitve_main:hover{
    transform:scale(1.1);
    opacity: 1;
}

#mod-custom114 .storitve_main:hover{
    transform:scale(1.1);
    opacity: 1;
}
/*Action Button*/
.itemid-111 button,
.itemid-107 button,
.itemid-105 button,
.itemid-106 button{

    background-color: var(--vijolicna);
    border: none;
    align-self: center;
    border-radius: 5px;
}
.itemid-111 button a,
.itemid-107 button a,
.itemid-105 button a,
.itemid-106 button a{
    padding: 6px 22px;
    text-decoration: none !important; 
    color: white;
}
.itemid-111 button:hover a,
.itemid-107 button:hover a,
.itemid-105 button:hover a,
.itemid-106 button:hover a{
    color: var(--vijolicna);
}
.itemid-111 button:hover,
.itemid-107 button:hover,
.itemid-105 button:hover,
.itemid-106 button:hover{
    background-color: white;
    border: solid 0.5px var(--vijolicna);
}

/*prihajajoči dogodki*/

.dogodki_naslov{
    color: var(--naslov);
}

.itemid-101 .main-top:nth-child(4) {
    grid-column: 1 / -1;
    width: 99.55vw;
    margin-left: calc(-50vw + 50%);

    min-height: 85px;
}

.itemid-101 .main-top:nth-child(4) .card-body{
    margin: auto;
    width: 35%;
    background-color: var(--roza);
    box-shadow: 7px 6px 5px #c1c4c9;
    border-radius: 10px;
    border:solid  0.5px var(--naslov);
    padding: 15px;
} 

.post-it {
    width:250px;
 height:240px;
 position:relative;
 background:#ffa;
 overflow:hidden;
 margin:30px auto;
 padding:20px;
 border-radius:0 0 0 30px/45px;
 box-shadow:
   inset 0 -40px 40px rgba(0,0,0,0.2),
   inset 0 25px 10px rgba(0,0,0,0.2),
   0 5px 6px 5px rgba(0,0,0,0.2);
 line-height:1.7em;
 font-size:19px;


 color:#130d6b;
}

/*Karmična*/

.itemid-106 .container-component img{
    display: inline-block;
    float: right;
    margin: 46px;
}
/*Mnenja*/

.itemid-103 .item-content{
    padding: 20px;
    border: solid 0.5px var(--roza);
    border-radius: 10px;
    
    background-color: var(--roza_bela);
}


.com-content-blog__links{
    display: none;
}


/*O meni*/

.itemid-102 .container-component img {
    display: inline-block;
    float: left;
    margin: 46px;
}



@media only screen and (max-width: 1150px) {
    .itemid-102 .com-content-article__body p:nth-child(4) {
        width: 100%;
    }


}

@media only screen and (max-width: 785px){
    .itemid-102 .com-content-article__body p:nth-child(3) {
        width: 100%;
    }

}


/*Objave*/
.itemid-120 .page-header h2 a,
.itemid-109 .page-header h2 a{
    text-decoration: none;
    pointer-events: none;
    color: var(--naslov);
}

.itemid-120, .itemid-109 h2 {
    text-align: left;
}
.itemid-120 .container-component .blog-item,
.itemid-109 .container-component .blog-item{
    padding: 15px;
    border: solid 0.5px var(--roza);
    border-radius: 10px;
    background-color: var(--roza_bela);
}
.itemid-120,
.itemid-109{
    text-align: justify;
}

/*Cenik*/

.itemid-110 .grid-child {
    width: 48%;
}

.itemid-110 .com-content-article__body{
    text-align: center;
}

th{
    font-weight: normal;
}

.table_cenik{
    width: 100%;

}





/*Footer*/
.footer{
    background-color: var(--tmno_vijolicna);
    background-image:none;
}

.footer .grid-child{
    padding: 1.5rem .5em;
}

.noga_desno{
    float:right;
    width: 30%;
}

.noga_levo{
    width: 40%;
    float: left;
}

#mod-custom111 p{
    margin-bottom: 0.2rem;
}











/*Mobile*/

@media only screen and (max-width: 990px) {
    .container-nav{
        display: block;
    }

    .navbar{
        float: left;
        margin-left: 3%;
    }

    .navbar{
        margin: auto;
    }

    .brand-logo img{
        margin-top: 4%;
        margin-left: 38% !important;
        position: absolute;
        height: 90px;
        width: 90px;
    }
    

    #mod-custom114 {
        flex-direction: column; /* Stack the boxes vertically */
        align-items: center; /* Center the boxes horizontally */
        margin: 0 !important;
    }

    #mod-custom114 .storitve_main {
        flex: 100%; /* Take up full width */
        max-width: 85%; /* Adjust the width slightly if needed */
        margin: 5% 0; /* Add margin to create space between boxes */
    }

    #mod-custom114:hover .storitve_main {
        transform: scale(1);
        opacity: 1;
    }
    
    .storitve_main:hover{
        transform:scale(1);
        opacity: 1;
    }
    
    #mod-custom114 .storitve_main:hover{
        transform:scale(1);
        opacity: 1;
    }

    .storitve_main img{
        max-width: 100%; /* Ensure the image doesn’t overflow */
        height: auto; /* Maintain aspect ratio */
        align-self: center;
    }

    .navbar-collapse{
        position: relative;
    }

    .itemid-110 .grid-child {
        width: 60%;
    }
    .itemid-102 .container-component img,
    .itemid-106 .container-component img {
        display: inline-block;
        float: left !important;
        margin: 12px;
        width: 32%;
    }

    .itemid-101 .main-top:nth-child(1) .card-body{
        padding: 0 !important;
    }

    .itemid-101 .main-top:nth-child(2) .card-body {
        margin: auto;
        padding: 15px !important;
    }
    .itemid-101 .main-top:nth-child(4) .card-body {
        margin: auto;
        width: 90%;
    }

    .noga_desno,
    .noga_levo {
        width: 100%;
        float: none;
       
    }

    .noga_levo{
        margin-bottom: 20px;
    }

    .noga_desno p {
        text-align: left !important;
    }

 

    .itemid-101 .main-top:nth-child(3) .card-body {
        padding: 0 !important;
    }
    


}

@media only screen and (max-width: 675px){
    .itemid-110 .grid-child {
        width: 65%;
    }
}

@media only screen and (max-width: 635px){
    .itemid-110 .grid-child {
        width: 80%;
    }
}

@media only screen and (max-width: 520px){
    .itemid-110 .grid-child {
        width: 90%;
    }
}

@media only screen and (max-width: 675px){
    .itemid-106 .container-component img {
        display: inline-block;
        float: left !important;
        margin: 12px;
        width: 32%;
    }
}