@charset "utf-8";

body { background-color: #FFCDD8; 
	
	margin: 0; padding: 0; 
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}
.bold {font-weight: bold; color: #FFB7CE; }
ul { font-weight: bold; font-size: 20px; 
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FFB7CE;
	height: 71px; 
}
ul li {
  float: right;
}
ul li a {
  display: block;
  color: #DB698A;
  text-align: center;
  padding: 24px 20px;
  text-decoration: none; 
}
ul li a:hover {color: #E89DB3;
  background-color: #FFCDD8;
	text-shadow: 1px 1px 2px #FFFFCC; 
}
html {
    scroll-behavior: smooth;
}
.logo {float: left;  padding: 1%; margin-left: 5px; width: 3%;}
.lotus-bel {width: 130%;}


h2 {font-size: 35px; margin-bottom: 1px; text-align: center; color: #7D1E39;  } h1 {font-size: 50px; text-shadow: 2px 2px 4px white; } 
.besedilo { float: left; width: 50%; font-size: 20px;  }
.besedilo1 { float: left ; width: 60%; font-size: 20px; margin-left: 40%; margin-bottom: 5%; }

.lokacija {width: 100%; height: 200px; float: center; }
.lokacija1 {width: 30%; height: 85%; float: right; padding-right: 2%;  }
iframe {width: 100%; height: 100%; }
p {text-align: justify; }

.kontakt {text-align: left; }  
.footer {background-color: #FFB7CE; margin: 0; margin-top: 5%;  } 
.header {height: 600px;  padding-top: 10%; margin-top: 10%;  }
.headera {height: 140px;  padding-top: 10%; margin-top: 10%; text-align: center; width: 97%;  }
.ikona {width: 5%; padding-right: 3%; padding-bottom: 0; float: left; padding-left: 2%;} 
.ikona1 {width: 8%; padding-right: 3%; padding-bottom: 0; float: left; padding-left: 2%;  }
.podatki {float: left; width: 29%;  margin: 1%; text-align: left; color: #7D1E39; font-size: 20px; border-left: 2px #DB698A solid; padding-right: 2%; }
.ena {margin-left: 1.5%; padding-top: 5px; } .enamail {padding-top: 2%; }




.container1 { background-image: url("slike/lotus-bg.png"); background-size:80%; background-repeat: no-repeat; background-position: center; background-attachment: fixed; 
	margin: 0; 
  display: grid;
  grid-template-areas:
    "header"
    "vsebina2"
	  "vsebina1"
	  "vsebina3"
    "footer";
}

.container1 div {
  
}
.container1 div.header {
  grid-area: header;
  text-align: center;
}
.container1 div.vsebina1 {
  grid-area: vsebina1}
.container1 div.vsebina2 {
  grid-area: vsebina2}
.container1 div.vsebina3 {
  grid-area: vsebina3}
.container1 div.footer {
  grid-area: footer;
    
}
h3 {font-style: italic; margin-top: 0; } 
.full-line {
  width: 100%;
  height: 2.5px; 
  background: linear-gradient(to right, transparent, #DB698A , transparent);
  border: none; 
  margin: 20px 0;
 
}
.full-line1 {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, #DB698A , transparent);
  margin: 20px 0;
 
}
.naslovna{margin-bottom: 0; color: #db698a; font-style: italic; } .podn {color: #db698a; text-align: center; font-style: italic; font-size: 20px;  }
.stor {text-align: center; text-shadow: 2px 2px 2px #DB698A; padding-top: 10%; padding-bottom:2%;  } 
.cen {text-align: center; text-shadow: 2px 2px 2px #DB698A;  padding-bottom:1%; background-image: radial-gradient(#DB698A, #F1B7C8); padding-top:1%; margin-bottom:2%; } 
h4 {font-size: 30px; text-align: center; text-decoration: underline; text-decoration-color: #FF75BA;  margin-top: 5%; font-weight: 100;   }
.vsebina3 {height: 500px; }
.slikastoritve {  width: 400px;
    height: 400px;
    margin: 1%;
    position: relative;
    overflow: hidden;
    box-shadow: 5px 10px 10px #7D1E39;
    transition: 0.5s ease;
    
}

.slikce {margin-bottom:3%; 
    display: flex;
    justify-content: center;
    height: auto;
}

.sl {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 5px 10px 10px #7D1E39;
    transition: 0.5s ease;
}

.naslov {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    color: #8C2140;
    font-size: 32px;
    font-style: italic;
    font-weight: bold;
    
    text-align: center;
    
    transition: 0.5s ease;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    opacity: 0;
    transition: 0.5s ease;
    
    background-color: rgba(255, 149, 202, 0.85);
}

.text {
    color: #8C2140;
    font-size: 20px;
    
    position: absolute;
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%);
    
    width: 80%;
    text-align: center;
    
    font-style: italic;
}


.slikastoritve:hover .naslov {
    opacity: 0;
	 
}

.slikastoritve:hover .overlay {
    opacity: 1;
}

.slikastoritve:hover .sl {
    transform: scale(1.05);
}
.besedilonasl {text-align: center; padding-top: 5%; padding-bottom: 1%;  background-color: #FCC2E4; background-image: radial-gradient(#FF75BA, #F8E2EF); align-content:center; }
.naslb {font-size: 20px; text-align: center; width:60%; padding-left: 20%; color: #7D1E39;}
.galerija {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.galerija-slika {
    width: 400px;
    height: 300px;
    overflow: hidden;
}

.galerija-slika img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

#lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

.zapri {
    position: absolute;
    top: 20px;
    right: 35px;
    color: white;
    font-size: 45px;
	cursor: pointer;}
.a {padding-top: 1%; color: #5E0833; text-align: center; font-size: 25px;}
.b {color: #5E0833; text-align: center; font-size: 20px; }

.footer-bottom {clear: both;
    margin-top: 20px;
    text-align: left;
    font-size: 0.85rem;
    color: #DB698A;
  }
@media screen and (max-width: 1000px) {
	html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
        background-color: #FFCDD8;
    }
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
    }

    ul {
        width: 100%;
        height: 65px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #FFB7CE;
        overflow: hidden;
        box-sizing: border-box;
    }

    ul li {
        float: none;
        margin: 0;
        padding: 0;
    }

    ul li a {
        display: block;
        padding: 12px 6px;
        color: #DB698A;
        font-size: 12px;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
    }

    ul li a:hover {
        color: #E89DB3;
        background-color: #FFCDD8;
        text-shadow: 1px 1px 2px #FFFFCC;
    }

    .logo {
        float: none;
        width: 40px;
        padding: 0;
        margin: 0 4px 0 8px;
        flex-shrink: 0;
    }

    .lotus-bel {
        width: 100%;
        display: block;
    }

 .container1 {
        width: 100%;
        margin: 0;
        padding: 0;
        display: grid;
        background-size: 150%;
        background-position: center;
        background-attachment: scroll;
        box-sizing: border-box;
    }

.header {
        width: 100%;
        height: auto;
        min-height: 400px;
        margin: 0;
        padding: 150px 20px 60px 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .naslovna {
        margin: 0;
        font-size: 42px;
        color: #DB698A;
        font-style: italic;
        line-height: 1.2;
    }

    h1 {
        font-size: 42px;
        margin: 0;
        text-shadow: 2px 2px 4px white;
    }

    h2 {
        font-size: 29px;
        margin-bottom: 10px;
    }

    .podn {
        font-size: 17px;
        line-height: 1.4;
        padding: 0 10px;
    }

    .full-line {
        width: 90%;
        height: 2px;
        margin: 18px auto;
    }

    .full-line1 {
        width: 90%;
        height: 1px;
        margin: 18px auto;
    }
 .besedilonasl {
        width: 100%;
        padding: 35px 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .besedilonasl h2 {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .naslb {
        width: 100%;
        padding-left: 0;
        margin: 15px 0;
        color: #7D1E39;
        font-size: 17px;
        line-height: 1.6;
        text-align: center;
        box-sizing: border-box;
    }

    p {
        text-align: center;
    }

.lokacija {
        width: 100%;
        height: 260px;
        margin-top: 30px;
        float: none;
    }

    .lokacija iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

 .stor {
        padding-top: 80px;
        padding-bottom: 25px;
        margin: 0;
        font-size: 30px;
        text-align: center;
    }

    .slikce {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    .slikastoritve {
        width: 90%;
        max-width: 430px;
        height: 430px;
        margin: 0;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: 5px 10px 10px #7D1E39;
    }

    .sl {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        box-shadow: none;
        transition: none;
    }

  
    .slikastoritve:hover .sl {
        transform: none;
    }

    .naslov {
        width: 85%;
        font-size: 25px;
        line-height: 1.3;
        text-align: center;
    }

    .overlay {
        width: 100%;
        height: 100%;
        opacity: 0;
        background-color: rgba(255, 149, 202, 0.93);
        transition: 0.3s ease;
    }

    .text {
        width: 84%;
        max-height: 88%;
        overflow-y: auto;
        color: #8C2140;
        font-size: 15px;
        line-height: 1.35;
        text-align: center;
        font-style: italic;
        box-sizing: border-box;
    }
.slikastoritve:hover .naslov {
    opacity: 1;
}

.slikastoritve:hover .overlay {
    opacity: 0;
}

.slikastoritve:hover .sl {
    transform: none;
}

.slikastoritve.aktivna .naslov {
    opacity: 0;
}

.slikastoritve.aktivna .overlay {
    opacity: 1;
}

.slikastoritve.aktivna .sl {
    transform: none;
}

.slikastoritve {
    cursor: pointer;
}
    .text p {
        margin: 8px 0;
        text-align: center;
    }

    .text strong {
        font-size: 18px;
    }

.vsebina3 {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0 0 30px 0;
        box-sizing: border-box;
    }

    .cen {
        width: 100%;
        margin: 0 0 25px 0;
        padding: 25px 10px;
        box-sizing: border-box;
        font-size: 29px;
        text-align: center;
    }

    .galerija {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .galerija-slika {
        width: 100%;
        max-width: 430px;
        height: auto;
        overflow: hidden;
    }

    .galerija-slika img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        cursor: pointer;
    }

    .b {
        color: #5E0833;
        text-align: center;
        font-size: 16px;
        padding: 0 15px;
        margin-top: 15px;
    }

 #lightbox {
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    #lightbox img {
        max-width: 95%;
        max-height: 85%;
        object-fit: contain;
    }

    .zapri {
        position: absolute;
        top: 10px;
        right: 20px;
        color: white;
        font-size: 40px;
        cursor: pointer;
    }
  .footer {
        width: 100%;
        margin: 0;
        padding: 25px 15px;
        background-color: #FFB7CE;
        box-sizing: border-box;
    }

    .podatki {
        float: none;
        width: 100%;
        margin: 0 0 25px 0;
        padding: 0 0 20px 0;
        border-left: none;
        border-bottom: 1px solid #DB698A;
        text-align: center;
        box-sizing: border-box;
    }

    .podatki:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .kontakt {
        width: 100%;
        text-align: center;
    }

    .ikona,
    .ikona1 {
        float: none;
        display: block;
        width: 35px;
        margin: 10px auto 5px auto;
        padding: 0;
    }

    .ena,
    .enamail {
        padding: 0;
        margin: 5px 0;
        text-align: center;
        font-size: 16px;
        color: #7D1E39;
    }


  
    .bold {
        font-size: 17px;
    }

}