@import url('https://fonts.googleapis.com/css2?family=Moulpali&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&display=swap');

*{
margin:0;
padding:0;
box-sizing: border-box;
}
html {
    height: 100%
}

body{
font-family: 'Moulpali', serif;
background-color:white;
}

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 99;



}

header{
background:linear-gradient(90deg,rgba(253,185,187,.5), rgba(255,255,255,.5),rgba(253,185,187,.5));
background-size:cover;
background-repeat:no-repeat;
}

.top{
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
height:100%;
padding:10px;
}

.left{
display:flex;

}
.mail{
margin-right:20px;

}
.mail .fa{
font-size:20px;
}
.mail span{
margin-left:5px;

}
.phone .fa{
font-size:20px;
}
.phone span{
margin-left:5px
}

span{
font-size:16px;
letter-spacing:1px;

}

span a{
text-decoration:none;
color:inherit;
}

span a:hover{
color:white;
text-shadow: 1px 1px 20px rgba(0,0,0,1);
}




.right{
display:flex;
}

.right a{
color: rgb(47,36,32);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
    transition: 0.2s;
}

.right a:hover{
color: #fff;
transition: 0.2s;
text-shadow: 1px 1px 20px rgba(0,0,0,1);
text-decoration: none;
}

.instagram{
margin-right:10px;
text-decoration:none;
}


/* MEDIA QUERY FOR FIRST TOP BAR*/
@media screen and (min-width:320px) and (max-width:640px) {

span{
font-size:11px;
}
.mail span{
margin-left:1px;

}

.phone span{
margin-left:1px
}

.fa-2x{
font-size:13px;
}


}
/* MEDIA QUERY FOR FIRST TOP BAR*/

/* NAVBAR */

nav{
background: linear-gradient(to top, rgba(232,180,159,0.5) 5%,rgba(0,0,0,0.8) 10%);

}

.nav-item a{
font-size:15px;
letter-spacing:1px;
font-weight:lighter;
transform: scale(.9, 1.5);
color:white;

}

nav ul a:hover{
  color: #F8A6AE !important;
}
nav li{
    text-align: center;
    text-transform: uppercase;
}
nav li > a:after{
    content: '';
    display: block;
    height: 1.5px;
    background: #F8A6AE;
    transform: scaleX(0);
    transition: transform .3s;
}
nav li > a:hover:after{
    transform: scaleX(1);
    transition: transform .3s;
}
.active{
    color: #F8A6AE !important;
}


@media screen and (min-width:320px) and (max-width:640px){
.navbar-nav{
padding-bottom:35px;
}
.navbar-brand{
height:80px;
width:80px;
margin-left:10px;
}
.navbar-toggler{
margin-right:10px;
}
}

@media screen and (min-width:768px) and (max-width:768px){
.navbar-nav{
padding-bottom:35px;
}
}



/*NAVBAR*/


.carousel-item:before{
content: '';
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1) 30%,rgba(0,0,0,0.6) 100%);
    z-index:1;
}

.carousel-inner .carousel-item > img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    animation: zoomin 10s linear infinite;

    }


@keyframes zoomin {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.05);
    }
    100%{
        transform: scale(1);
    }
}

.carousel-indicators{
    button{
        border-radius: 50%;
        width: 10px !important;
        height: 10px !important;

    }
    button.active {
        background-color: $color-1 !important;

    }

}


.carousel-caption{
    top: 50%;
    transform: translateY(-50%);
    bottom: inherit;
}


/* SERVICES -STORITVE */

/*TITLE/AND HR LINE*/
.title1{
text-align:center;
margin-top:40px;
margin-bottom:20px;
text-transform:uppercase;

}

.separator{
  display:flex;
  align-items: center;
}

.separator .line{
  height: 1px;
  flex: 1;
  background-color: #000;
}

.separator img{
  padding: 0 1rem 0 1rem;
  width:150px;
}



#serv{
margin-top:20px;
background:linear-gradient(90deg,rgba(253,185,187,.3), rgba(255,255,255,.5),rgba(253,185,187,.3));
background-size:cover;
background-repeat:no-repeat;
overflow:hidden;

}


/*CARDS*/


.card{

background:none;
border:none;
margin-top:10px;
}



.card-body{
font-family: 'Old Standard TT', serif;
text-align:center;
color:black;
}

.card-title{
text-transform:uppercase;
font-weight:bold;
margin-bottom:20px;
}

.card-text{
text-align:center;
font-size:18px;
}


.card-img {
overflow:hidden;
border:4px solid white;
width:60%;
margin-left: auto;
margin-right: auto;
}

.card-img-top{
object-fit:cover;
object-position: center;
}






/*DARILNI BON*/


#darilni{
margin-bottom:20px;
}

#bon{
display:flex;
justify-content:center;
align-items:center;
height:500px;
overflow:hidden;
}
/* MEDIA QUERY FOR Storitve*/
@media screen and (min-width:320px) and (max-width:640px) {
.card{

width:100%;

}
.card-body{
text-align:center;
}
.card-title {
font-size:16px;
}

.card-img {
overflow:hidden;
border:4px solid white;
width:60%;
margin-left: auto;
margin-right: auto;
}
.card-text{
font-size:16px;
width:100%;

}
}
/* MEDIA QUERY FOR Storitve*/

/* MEDIA QUERY FOR darilni bon*/
@media screen and (min-width:320px) and (max-width:640px) {

#photo1{
height:200px;
width:auto;
overflow:hidden;
}

.photo img{
height:100%
width:100%
object-fit:contain;
}

.text{
font-size:14px;
}
}

@media screen and  (min-width:768px) and (max-width: 768px) {
#bon{
display:flex;
align-items:center;
justify-content:center;
height:500px;
overflow:hidden;
}

#photo1{
display:flex;
justify-content:center;
height:100%;
width:100%;
align-items:center;
}



.text{
font-size:18px;
}

}

/* MEDIA QUERY FOR darilni bon*/


.photo{
height:350px;
width: 100%;
}
.photo img{
width: 100%;
  height: 100%;
  object-fit: cover;
}

.title2{
text-align:center;
font-family: 'Allura';
}

#text1{
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;

}

.text{
padding:20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color:rgb(255,255,224);

}


/* Kozmetika */

.dermapic{
height:100%;

}

.dermapic img{
width: 100%;
  height: 100%;
  object-fit: cover;
}

.dermatext{
padding:20px;
}

/* MEDIA QUERY FOR KOZMETIKA smaller Text -mobile*/
@media screen and (min-width:320px) and (max-width:640px) {
.dermatext{
font-size:14px;
}
}

@media screen and  (min-width:768px) and (max-width: 768px) {
.dermatext{
font-size:18px;
}
}
/* MEDIA QUERY FOR KOZMETIKA smaller Text -mobile*/

.icon1{
display:flex;
align-items:center;
margin-bottom:40px;

}
.icon1 span{
margin-left:10px;
}

.icon2{
display:flex;
align-items:center;
}

.icon2 span{
margin-left:10px;
}

/*footer*/
footer{

background:linear-gradient(90deg,rgba(253,185,187,.7), rgba(255,255,255,.9),rgba(253,185,187,.7));
border-bottom-left-radius: 50% 40%;
border-bottom-right-radius: 50% 40%;
}


.separator{
margin-top:30px;
}
.separator img {
margin-top:-65px;
}

.line{
margin-top:-52px;
}
h5{
text-transform:uppercase;

}
.location,.schedule,.follow,.soc-links{
display:flex;
justify-content:center;

font-size:15px;

}

.location a{
 color: inherit;
text-decoration:none;
}

.location a:hover{
color: #fff;
transition: 0.2s;
text-shadow: 1px 1px 20px rgba(0,0,0,1);
}

.follow p{
text-align:center;
}

.soc-links a{
text-decoration:none;
color:inherit;
}

.soc-links a:hover{
color: #fff;
transition: 0.2s;
text-shadow: 1px 1px 20px rgba(0,0,0,1);
}