/*Animations*/
.fadeinleft {
    opacity:0;
    transform: translateX(200px);
    transition: all 1.3s ease-out;
}
.fadeinright{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 0.8s ease-out;
}
.fadeindown{
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1.2s ease-out;
}
.fade-in{
    opacity:0;
    transition: all 1.3s ease-in;
}
.active-left,.active,.active-right,.active-down,.active-up{
    opacity:1;
    transform: translateY(0);
}
.fadein{
opacity: 0;
}   
/* End Animations*/

/* Navbar fillim */
.navbar{
    background-color:lightgray;
    width:100%;
    z-index:1000;
}
.nav-link, .nav-link:hover{
    color:black;
    font-weight:bold;
    position:relative;
}
.navbar-brand,.navbar-brand:hover{
    color:black;
}
.navbar-nav{
    align-items: center;
    flex-wrap: wrap;
}
.nav-link::before, .nav-link::after{ 
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    width:0%;
    background-color:rgb(199, 172, 21);
    transform:scaleX(0);
    transition: width 0.3 ease;
}
.nav-link::before{
    bottom: 0px;
    left:0;
}
.nav-link::after{
    bottom: 4px;
    right:0;
}
.nav-link:hover::before, .nav-link:hover::after{
     transform:scaleX(1);
     width:100%; 
}
.navbar-collapse{
    text-align: left;
}
.icon-flag{
    padding-left:5px;
    width:30px;
    height:30px;
}
.dropdown{
    margin-top:10px;
    
}
.card-img-overlay {
    padding:10px;
}
.dropdown-toggle, .dropdown-toggle:hover{
    font-weight:bold;
  color:black;
} 
.dropdown-menu a{
    color:black;
}
.carusel-text{
    font-size:50px;
}
/* Butoni book */
.book-btn{
    background-color:black;
    border: solid black 2px;
    border-radius: 0%;
    box-shadow: none;
    width:150px;
    color:white;
}
.book-btn:hover{
    border-color:rgb(255, 215, 0);
    color:white;
    background-color:black;
    box-shadow: 0 0 60px 20px rgba(255, 215, 0, 1), 0 0 120px 40px rgba(255, 215,0,0.9), 0 0 160px 60px rgba(255, 215, 0, 0.6);
    transform:scale(1.08);
}
/* Butoni book now fund */
/* Navbar fund */
.img-carousel{
    height:65vh;
    position:relative;
    object-fit:cover;
    
}
.carousel{
    padding-top:75px;
}
.carousel-item{
position:relative;
}
.carousel-item::before{
    content:" ";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    background-color:rgba(0, 0, 0, 0.055);
}
.carousel-caption{
    color:black;
    position:absolute;
    top:60%;
    left:50%;
    transform: translate(-50%,-60%);
    font-weight:bold;
}
.carousel-caption h4{
    color:white;
    text-shadow: -3px 0 black, 0 1px black, 1px 0 black, 0 -3px black;
}
/* Abput us */
.about img{
  height: 200px;
  width:100%;
  margin-left:0px;
  padding:0;
}
.about-text{
    padding-top: 50px;

}
#primary-about{
    height:400px;
}
/* Sherebime */
.service-card{
    position:relative;
}
.service-description{
    background-color:white;
    position:absolute;
    width:80%;
    margin:0 auto;
    height: 30%;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    overflow: hidden;
}
.service-home{
    height:300px;
}
.service-description:hover{
    height:80%;
    transform: transfrom 0.3s ease;
}
.service-description>p{
    display: none;
}
.service-description:hover p{
    display: block;
}
.service-description > .more-btn{
    visibility: hidden;
}
.service-description:hover >.more-btn{
    visibility: visible;
}
p{
    font-size: 14px;
}
/* Butona */
.more-btn:visited {
    background-color:black;
color:white;
border:solid 3px white;
}
.more-btn:hover{
background-color:white;
color:black;
border:solid 3px black;
transform: scale(1);
}

/* Fotter */
footer{
    background-color:rgb(56, 54, 54);
    color:white;
}
/* FUND HOME  */

/* FILLIM ROOM  */
.photo-room{
    padding: 75px 0 0 0;
    position:relative;
}
.room-firstcard>img{
    height:30vh;
    position:relative;
    object-fit: cover;
}
.card-img-overlay{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.room-firstcard::before{
    content:" ";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    background-color:rgba(0, 0, 0, 0.137);
}
.information{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.room-card:hover{
    border-right:solid 6px rgb(230, 196, 6);
      border-bottom:solid 6px rgb(230, 196, 6)
}
/* About */
.facilities:hover{
    transform: scale(1.1);
}
/* Contact */
#harta{
    width:100%;
    height:390px;
}
/* Gallery */
.gallery-card{
    border-left:solid 3px rgb(177, 151, 6);
    border-bottom:solid 3px rgb(177, 151, 6);
    border-radius:none;
}
.gallery-img{
    height:300px;
}
/* Responsiviteti */
/* Tablet */
@media (max-width:768px){
    /* Service ne HOME */
    #around-home{
        margin:0px 20px;
    }
    .about-text{
    padding-top: 20px;
}
    .navbar-nav {
    align-items: flex-start;
}
.carusel-text{
    font-size:30px;
}
}
/* Smartphone: L */
@media (max-width:425px){
    .img-carousel{
        height:40vh;
    }
    #about-home{
        padding: 0 20px;
    }
    #about-home .row > .about{
        width:50%;
    }
    .description{
        flex-wrap: wrap;
    }
    #around-home{
        margin:0 20px;
    }
    .facilities{
    padding: 0;
    }
    .service-ard{
        width:100%;
    }
    .service-description:hover{
    height:100%;
    width:100%;
    padding: 0px !important;
    }
    .carusel-text{
    font-size:20px;
}
}
