@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Sen:wght@400..800&display=swap');



/*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{
    opacity:1;
    transform: translateX(0);
    transform: translateY(0);
}



.fadein{
opacity: 0;
}   


/* End Animations*/
html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}
.navbar{
    background: transparent!important;
   
}

.navbar li a{
    color: white!important;
    font-family: 'Sen';
    font-weight: 300;

    font-size: 15px;
}

.navbar li a:hover{
  color: rgb(87, 188, 255);

}

.navbar li a:visited{
  color: white!important;
}

.navbar li a.active{
  color: #57bcff!important;
}

.navbar li {
    margin: 0em 1em;
}

.dropdown-menu li a{
  color: black!important;
}


.dropdown-menu li a:hover{
  background: white!important;
  color:#57bcff!important;
}



.main-button{
  background: rgb(56,168,245);
background: linear-gradient(58deg, rgba(56,168,245,1) 33%, rgba(55,169,245,1) 35%, rgba(34,205,246,1) 100%);
    color: white;
    border-radius: 0px;
    padding: 0.8em 2em;
}
.main-button:hover{
    background-color: #00b7ff;
    color: white;
}

#background-video {
    width: 100vw;
    height: 105vh;
    object-fit: cover;
    position: relative;
    z-index: -1;
        filter: brightness(45%);
  }
.video-row{
   margin-top: -65vh;
}

h1,h2,h3,h4,h5,h6,p{
    font-family: 'Sen';
   
}


@keyframes compass-jiggle{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(15deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

.compass-animation{
    animation: compass-jiggle 0.3s linear infinite;
}

.sunset-tour-type{
    background: url('../img/sunset-tours.jpg')rgba(2, 95, 177, 0.75);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center!important;
    color: white;
    height: 28vh;
    padding: 1em;
}

.sunset-p {
   display: none;
}


.sunset-tour-type:hover .sunset-p{
    display: block;
}

@keyframes show-up{
    from{
        transform: translateY(-40px);
        opacity: 0;
    }
   
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}

.tour-type-animation{
    animation: show-up 0.3s ease-in-out ;
}


.beach-cove-tour-type{
    background: url('../img/beach-cove-thumb.jpeg')rgba(2, 95, 177, 0.75);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center!important;
    color: white;
    height: 28vh;
    padding: 1em;
}

.beach-cove-p {
   display: none;
}


.beach-cove-tour-type:hover .beach-cove-p{
    display: block;
}


.coastal-tour-type{
    background: url('../img/coastal.jpeg')rgba(2, 95, 177, 0.75);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center!important;
    color: white;
    height: 28vh;
    padding: 1em;
}

.coastal-p {
   display: none;
}


.coastal-tour-type:hover .coastal-p{
    display: block;
}


.fishing-tour-type{
    background: url('../img/fishing.jpeg')rgba(2, 95, 177, 0.75);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
    justify-content: center!important;
    color: white;
    height: 28vh;
    padding: 1em;
}

.fishing-p {
   display: none;
}


.fishing-tour-type:hover .fishing-p{
    display: block;
}

.tour-type{
    transition-duration: 0.3s;
}


.tour-type:hover{
    box-shadow: rgb(77, 170, 252) 3px 3px 6px 0px inset, rgba(22, 154, 216, 0.5) -3px -3px 6px 1px inset;
    transition-duration: 0.3s;
}

#about-home{
    color: rgb(19, 19, 19);
}

label {
    display: block;
    margin-bottom: 4px;
    color: rgb(20, 20, 20);
    text-align: start;
  }
  input, textarea {
    width: 100%;
    padding: 5px;
    margin-bottom: 16px;
    box-sizing: border-box;
    background: rgb(255, 255, 255);
    border: 1px solid #87C4D8;
    color: rgb(0, 0, 0);
  }
  .contact-button {
    background-color: #3875c5;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    width: 100%;
  }

 .book-btn{
    background-color: #397ebe;
    color: white;
    border-radius: 0px;
 }
 .navbar-toggler{
  background: transparent!important;
 }

 .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.95)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  
}

 /* From Uiverse.io by adamgiebl */ 
.button1 {
    font-family: 'Sen';
    font-size: 20px;
    background: rgb(56,168,245);
background: linear-gradient(58deg, rgba(56,168,245,1) 33%, rgba(55,169,245,1) 35%, rgba(34,205,246,1) 100%);
    color: white;
    padding: 0.25em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 0px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
  }
  
  .button1 span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
  }
  
  .button1 svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
  }
  
  .button1:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
  }
  
  .button1:hover svg {
    transform: translateX(1.8em) rotate(2deg) scale(1.35);
  }
  
  .button1:hover span {
    transform: translateX(6em);
  }
  
  .button1:active {
    transform: scale(0.95);
  }
  
  @keyframes fly-1 {
    from {
      transform: translateY(0.1em);
    }
  
    to {
      transform: translateY(-0.1em);
    }
  }
  

  .tour-main-box{
    background: url('../img/tours-main.jpeg')rgb(0, 0, 0,0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:10px;
    color: rgb(255, 255, 255);
  }


  .motor-box{
    color: black;
    background-color: #e6f0f6;
    border-radius: 15px;
    padding: 1em;
    transition-duration: 0.15s;
  }

  .motor-box:hover{
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    padding: 1.05em;
    transition-duration: 0.2s;
  }

  .motor-box img{
    width: 140px;
    margin-top: -4em;
  }

  .motor-box p{
    font-size: 14px;
  }

  .destination-item img {
    transition: .5s;
  }
  
  .destination-item:hover img {
    transform: scale(1.3);
  }
  
  .destination-overlay {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: .5s;
    z-index: 1;
  }
  
  .destination-item:hover .destination-overlay {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-width: 30px;
  }

  .position-relative {
    position: relative !important;
  }

  .overflow-hidden {
    overflow: hidden !important;
  }

  .destination-overlay {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: .15s;
    z-index: 1;
  }
  
  .destination-item:hover .destination-overlay {
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border-width: 30px;
  }

  .owl-nav .owl-next{
    position: absolute;
    top: calc(100% );
    right: 40%;
    opacity: 1;
    font-size: 22px!important;
    color: rgba(190, 190, 190, 0.829)!important;
    z-index: 1;
    width: 40px;
    color: black!important;
}

.owl-nav .owl-prev{
  position: absolute;
  top: calc(100% );
    color: rgba(190, 190, 190, 0.829)!important;
    left: 40%;
    opacity: 1;
    font-size: 22px!important;
    z-index: 1;
    width: 40px;
    color: black!important;
    
}

.owl-nav .owl-next:hover{
    transform: translateX(5px);
    transition-duration: 0.4s;
    background-color: white!important;
}

.owl-nav .owl-prev:hover{
  transform: translateX(-5px);
  transition-duration: 0.4s;
  background-color: white!important;
}

.testimonial-bg{
  background: url('../img/testimonial-icon.png');
  background-size: 15%;
  background-position: bottom left;
  background-repeat: no-repeat;
  background-color: #bfdadd;
}



#footer{
  background: url('../img/footer-bg-aris.jpg');
margin-bottom: 0em;
  background-size: cover;
  background-blend-mode: multiply;
  padding-top: 60px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
a.footer-link{
  color: white;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
}
.footer-link:hover{
  color:  #A9D1DB;
}



@media only screen and (max-width: 960px) {
  
  .navbar-container{
    border: none!important;
  }
  .navbar-bg-click{
    background-color: #3875c5!important;
  }
  .motor-box{
    margin-top: 2em!important;
  }
  .testimonial-bg{
    background-size: 60%;
  }
  #boat-tour{
    height: 65vh!important;
    background-position: right!important;
  }
}

#boat-tour{
  background: url('../img/tours-head.png')rgba(0, 0, 0, 0.45);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 50vh;
  margin-top: -10vh;
  display: flex;
  align-items: center;
  color: white;
}

#tour-head{
  background: url('../img/gjirokaster-head.jpg')rgba(0, 0, 0, 0.55);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 50vh;
  margin-top: -10vh;
  display: flex;
  align-items: center;
  color: white;
}

#apartment-head{
  background: url('../img/apart-head.jpg')rgba(0, 0, 0, 0.55);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 50vh;
  margin-top: -10vh;
  display: flex;
  align-items: center;
  color: white;
}

.room-card:hover{
  background-color: #34aef5;
  transition-duration: 0.3s;
}


.room-card:hover h3,.room-card:hover p{
  color: white;
  
}
.room-card:hover .btn{
  background-color: white;
}

.card{
  border-radius: 0px!important;
  box-shadow: 10px 12px #724a3656;
}



#contact-head{
  background: url('../img/contact-head-aris.jpg')rgba(0, 0, 0, 0.56);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  height: 50vh;
  margin-top: -10vh;
  display: flex;
  align-items: center;
  color: white;
}