/*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);
}

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

.fadein{
opacity: 0;
}   




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


p{
    font-family: 'Poppins';
}

.navbar{
    background-color: rgba(27, 27, 27, 0.833)!important;
    color: white!important;
    box-shadow: none!important;
    padding: 1em 0em;
}

.navbar li a{
    color: white;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 20px;
}

.navbar li a:hover{
    color: white;
}

.navbar li a.active{
    color: white!important;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 20px;
}

.navbar li{
    margin: 0em 0.8em;
}
.dropdown-menu{
    background-color: rgb(27, 27, 27)!important;

}
.dropdown-item{
    color: rgb(255, 255, 255) !important;
}
.contact-btn{
    color: rgb(2, 32, 44);
    background-color: white;
    padding: 1em 3em;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 15px;
    border: 1px solid white;
}

.contact-btn:hover{
    color: white;
    border: 1px solid white;
}

/* End Animations*/

.container-fluid{
    max-width: 95%;
}
  
  #myBtn:hover {
    background: #ddd;
    color: black;
  }

  #background-video {
    
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: relative;
  
    z-index: -1;
    margin-top: -10vh;
    
  }

.video-row{
   margin-top: -50vh;
}

.home-row{
    background-color: #1d1b1a;
    color: white;
    text-align: center;
    padding: 10px 0;
    
}

.overlay{
    background: rgb(255,255,255);
background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6138830532212884) 100%);
height: 90vh;
margin-top: -15vh;
}

.tirana-destination{
    background: url('../img/tirana-dest.jpeg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 55vh;
    display: flex;
    align-items: end;
    justify-content: center;
    transition-duration: 0.3s;
}

.tirana-destination:hover{
   
    background: url('../img/tirana-dest.jpeg')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden!important;
    
}

.berati-destination{
    background: url('../img/berat.jpeg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 55vh;
    display: flex;
    align-items: end;
    justify-content: center;
    transition-duration: 0.3s;
}

.berati-destination:hover{
   
    background: url('../img/berat.jpeg')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden!important;
    
}
.gjirokaster-destination{
    background: url('../img/gjirokaster.jpeg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 55vh;
    display: flex;
    align-items: end;
    justify-content: center;
    transition-duration: 0.3s;
}

.gjirokaster-destination:hover{
   
    background: url('../img/gjirokaster.jpeg')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden!important;
    
}
.saranda-destination{
    background: url('../img/saranda-dest.jpg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 55vh;
    display: flex;
    align-items: end;
    justify-content: center;
    transition-duration: 0.3s;
}

.saranda-destination:hover{
   
    background: url('../img/saranda-dest.jpg')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden!important;
    
}
.kruja-destination{
    background: url('../img/kruja.jpg')rgba(0, 0, 0, 0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    height: 55vh;
    display: flex;
    align-items: end;
    justify-content: center;
    transition-duration: 0.3s;
}

.kruja-destination:hover{
   
    background: url('../img/kruja.jpg')rgba(0, 0, 0, 0.3);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    overflow-x: hidden!important;
    
}

.dest-content{
    transition-duration: 0.4s;

}

.destination:hover .dest-content{
    margin-bottom: 50%;
    transition-duration: 0.4s;
}

.destination:hover .contact-btn{
   display: block!important;
}



.owl-nav .owl-next{
    position: absolute;
    top: calc(45% - 25px);
    right: -35px;
    opacity: 1;
    font-size: 22px!important;
    color: rgba(255, 255, 255, 0.829)!important;
    z-index: 1;
    width: 80px;
    background-color: #043053!important;
    border-radius: 35px!important;
    border: 2px solid #ffffff!important;
    transition-duration: 0.2s;
}

.owl-nav .owl-prev{
    position: absolute;
    top: calc(45% - 25px);
    color: rgba(255, 255, 255, 0.829)!important;
    left: -35px;
    opacity: 1;
    font-size: 22px!important;
    z-index: 1;
    width: 80px;
    background-color: #043053!important;
    border-radius: 35px!important;
    border: 2px solid #ffffff!important;
    transition-duration: 0.2s;
}

.owl-nav .owl-next:hover{
    color: white!important;
    background-color: #043053!important;
    border: 2px solid #043053!important;
    transition-duration: 0.2s;
}

.owl-nav .owl-prev:hover{
    color: white!important;
    background-color: #043053!important;
    border: 2px solid #043053!important;
    transition-duration: 0.2s;
}

.sec-btn{
    color: rgb(255, 255, 255);
    background-color: #043053;
    padding: 1em 3em;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 15px;
    border: 1px solid #043053;
}


.sec-btn:hover{
    background-color: #043053;
    color: rgb(255, 255, 255);
}

.fa-arrow-right-long{
    display: none;
    animation-name: arrow-appear;
}

.sec-btn:hover .fa-arrow-right-long{
   display: inline;
   transition-duration: 0.4s;
   
}

.destination{
    border-radius: 10px;
}

#banner{
    background: url('../img/bits-banner.jpg'),linear-gradient(270deg, rgba(0,22,54,1) 48%, rgba(255,255,255,0.23573179271708689) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
   z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40vh;
}

.about-box{
    padding: 2em;
    display: flex;
    align-items: center;
    height: 180px;
    width: 180px;
    background-color: yellow;
    border-radius: 50%;
    border-style:double;
    border-width: 10px;
}
.section-bg{
    background: url('../img/bits-banner.jpg')rgba(0, 0, 0, 0.586);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    padding-top:250px;
    padding-bottom: 150px;
    position: relative;
    margin-top: -130px;
    text-align: center;
}

.tour-box{
    padding: 30px;
    -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
margin:70px 0px 70px 0px;
transition: 0.3s ease-in-out;

}

.tour-box:hover{
    transform: translateY(-20px);
    transition: 0.3s ease-in-out;
}

.tour-info{
    padding: 30px;
    -webkit-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
    box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.75);
}

.custom{
    background: #043053;
    padding: 40px; 
    text-align: center;
    color: white;
}

.circle1 {
    position: relative;
    margin-bottom: -50px;
    width: 40px;  /* Example width */
    height: 40px; /* Example height */
    background-color: #87C3D7; /* Example background color */
    border-radius: 50%; /* Makes the div a circle */
    display: flex !important;
    justify-content: center;
    align-items: center;
     /* Optional, if you use absolute positioning for the icon */
    transition: 0.3s ease-in-out;
  }
  .circle1:hover{
    transform: translateY(-10px);
    background: white;
    color: #87C3D7;
  }

  @media(max-width:1000px){
    .socials-row {
        justify-content: center !important;
    }
  }