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

.container{

    min-width: 80%;
}

@keyframes slideInDown{
    from{
        transform: translateY(-100px);
        opacity: 0;
    }

    to{
        transform: translateX(0);
        opacity: 1;
        
        
    }
}

/* End Animations*/

.navbar{
    background-color: white;
    padding: 0px!important;
    margin: 0px!important;
    
}


html p,h1,h2,h3,h4,h5,h6,a,li{
        font-family: Poppins!important;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
       
    }
 
    html,body
    {
        
        margin: 0px;
        padding: 0px;
        overflow-x: hidden; 
    }


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

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

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

.overlay{
       
height: 80vh;

}

.navbar  li a{
  
    transition-duration: 0.3;
    margin-top: 0px!important;
    margin-bottom: 0px!important;
    
}

.navbar li a.active{
   background-color: #3983c0;
   color: white!important;
}

.navbar li a:hover{
   
    transition-duration: 0.3;
}

.dropdown-menu li a,.dropdown-menu li{
    border-radius: 0px!important;
    padding: 0px;
    margin: 0px;
    width: 100%;
}
 /* Button- */
 .navbar li a{
    border: none;
    
    display: inline-block;
    padding: 22px 15px!important;
    
    text-transform: uppercase;
    cursor: pointer;
    transform: skew(-1deg);
    font-family: Manrope;
    background-color: transparent;

    border-radius: 0px;
  }
  
  span {
    display: inline-block;
    
  }
  
  .navbar li a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 100%;
    right: 0;
    left: 0;
    background: #3983c0;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s;
    
    
  }
  
  .navbar li a:hover {
    color: #fff!important;
  }
  
  .navbar li a:hover::before {
    bottom: 0;
    top: 0;
    opacity: 1;
    
  }

.top-header{
    height: 4vh;
    background-color: #3983c0;
}

.top-footer-text{
    font-weight: 200;
    font-size: 15px;
}




.sticky-header{
    position: fixed;
    animation-name: slideInDown;
    top: 0;
    width: 100%;
    z-index: 100;
    animation-duration: 0.5s;
    animation-timing-function:ease ;
    animation-delay: 0;
    
}  


.carousel-1,.carousel-2,.carousel-3{
    background: url('../img/foto1.jpeg')rgba(0, 0, 0, 0.4);
    background-size: cover;
    background-position: center;
    height: 90vh;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.carousel-2{
    background: url('../img/foto2.jpg')rgba(0, 0, 0, 0.5);
     background-size: cover;
    background-position: center;
    height: 90vh;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

.carousel-3{
    background: url('../img/foto3.jpeg')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    height: 90vh;
    background-repeat: no-repeat;
    background-blend-mode: multiply;

}
.carousel-4{
    background: url('../img/foto4.jpg')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
    height: 90vh;
    background-repeat: no-repeat;
    background-blend-mode: multiply;

}
.carousel-caption{
    margin-bottom: 8%;
    max-width: 50%;
}

.slider-p{
    font-size: 19px;
    font-weight: 300;
}


#about-us-home{
    padding: 60px 0;
}

.btn-link{
    padding: 10px 35px;
    border: 2px solid #3983c0;
    border-radius: 0px;
}

.btn-link:hover{
    background-color: #47647a;
    color: white;
    transition-duration: 0.2s;
}

.doctor-list-home li,.umsh-list-home{
    font-size: 18px;
    margin: 7px 0;
    font-weight: 300;
}

.umsh-list-home{
    list-style: none;
    font-size: 15px;
    font-weight: 300;
}

.umsh-list-home li{
    
    max-width: 70%;
}
.umsh-list-home li a{
    
    color: white;
}

.umsh-list-home li a:hover{
    border-bottom: 2px solid white;
}

.doctor-list-home li a{

    color: #47647a;
    
}

.doctor-list-home li a:hover{

    border-bottom: 2px solid #47647a;
}

.info-list-home li{
    font-size: 18px;
    margin: 7px 0;
    font-weight: 300;
    color: white;
}

.info-list-home li a{

    color: #ffffff;
    
}

.info-list-home li a:hover{

    border-bottom: 2px solid #47647a;
}

#pages-home{

    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0% 10%;
    background-blend-mode: multiply;
}

.item-1{
    background-color: white;
    text-align: center!important;
    padding-bottom: 40px;
    margin: 65px 10px;
    transition-duration: 0.3s;

}
.item-1:hover{
    box-shadow: 0px 0px 14px #85a8c5b9!important;
    transform: translateY(-20px);

    transition-duration: 0.3s;
}



#historiku{
    background: url('../img/doctor-bg.jpg')rgba(0, 0, 0, 0.5);
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    
}

.njoftim-box{
    box-shadow: 5px 5px 15px rgb(199, 199, 199);
   padding: 0px;
}

.njoftim-corner{
    background-color: rgb(255, 27, 27);
    padding: 10px 35px;
    color: white;
    font-family: Poppins;
    
}

.baza-ligjore{
    background-color: #e0e0e046;
}

.baza-ligjore-li:hover{
    scale: 1.02;
    font-weight: 600;
    
}

.register-footer-btn{
    border: 1px solid white;
    background-color: white;
}

.register-footer-btn:hover{
    background-color: white;
    color: black;
}


#about-head,#organograma-head,#keshilli-komb-head,#bordi-keshillimor-head,#keshillat-rajonale-head,#drejtuesit-umsh-head,#baza-ligjore-head,#contact-head{
    background: url('../img/doctor-bg.jpg')rgba(0, 0, 0, 0.5);
    background-position: center;
    background-size: cover;
    height: 400px;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    display: flex;
    align-items: center;
}

#organograma-head{
    background: url('../img/organograma.jpg')rgba(0, 0, 0, 0.5);
    background-size: cover;
}

#keshilli-komb-head{
    background: url('../img/umsh-logo.png')rgba(0, 0, 0, 0.5);
    background-size: contain;
    background-position: center;background-repeat: no-repeat;
}

#bordi-keshillimor-head{

    background: url('../img/urdhri-president.jpg')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: 0% 20%;
}

#keshillat-rajonale-head{
    
    background: url('../img/bordi-keshillimor.JPG')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: 0% 20%;
}

#drejtuesit-umsh-head{
    background: url('../img/drejtuesit.webp')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: 0% 15%;
    height: 60vh;
}

#baza-ligjore-head{
    background: url('../img/baza-ligjore.jpg')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
}

#contact-head{
    background: url('../img/contact-head.jpg')rgba(0, 0, 0, 0.5);
    background-size: cover;
    background-position: center;
}

.list-group-flush li{
    margin: 0px;
}

.list-group-flush li:hover{

    background-color: #d9e2e985;
}

.form-row {
    margin-bottom: 10px;
}

.form-input {
    display: block;
    width: 95%;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #47647a79;
    box-shadow: 0px 0px 20px rgba(128, 128, 128, 0.301);
}

.form-input:hover{
    border: 2px solid #3983c0c2!important;
}

.form-input:focus{
    
    border-image: none;
    background-color: none;
}
.form-error {
    color: red;
}

#popup-form-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#popup-form-container form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    margin: 30px auto;
}

#contact-form{
   box-shadow: 0px 0px 6px rgba(184, 184, 184, 0.699);
   width: 100%;
   padding: 5%;
   background-color: #f5f5f52c;
   color: black;
   font-family: Poppins;
}

.submit-btn{
    background-color: #3983c0;
    padding: 5px 25px;
    border: 1px solid white;
    color: white;
    font-family: Poppins;
    margin: 10px 0;
}

.contact-box{
    padding: 4.8%;
    box-shadow: 0px 0px 5px #3983c0;
    margin: 20px 0;
}


#botime-head{
    background: url('../img/carousel-2-doctor.jpg')rgba(0, 0, 0, 0.4);
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
    height: 400px;
    display: flex;
    align-items: center;
}

#transparenca-head{

    background: url('../img/programi-i-transparences.jpg')rgba(0, 0, 0, 0.4);
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    background-size: cover;
    height: 400px;
    display: flex;
    align-items: center;
}

.transparenca-item{

    background-color: #3983c0;
    color: white;
    border-radius: 10px!important;
    
    font-size: 15px;
    font-weight: 300;
    padding: 3%;
    height: 90px;
   display: flex;
   align-items: center;
   
    
}

.transparenca-item:hover{
    color: white;
    background-color: #47647a;
    transition-duration: 0.2s;
}


.descs{
    margin-top: 10px;
    padding: 2%;
    border: 2px solid #3983c0;
    border-radius: 10px;
    animation: slideInDown;
    animation-duration: 0.7s;
}



.hidden{
    display: none;
}


#marredheniet-nderkombetare-head{
   

        background: url('../img/maredheniet-nderkombetare.jpg')rgba(0, 0, 0, 0.4);
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-size: cover;
        height: 400px;
        display: flex;
        align-items: center;
    
}

#marredheniet-me-publikun-head{
    background: url('../img/maredheniet-me-publikun.jpg')rgba(0, 0, 0, 0.5);
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-size: cover;
        height: 400px;
        display: flex;
        align-items: center;
    
}

#cv-paga{
    background: url('../img/cv.jpg')rgba(0, 0, 0, 0.5);
        background-position: center;
        background-repeat: no-repeat;
        background-blend-mode: multiply;
        background-size: cover;
        height: 400px;
        display: flex;
        align-items: center;
    
}

.njoftime-nderk:hover{
    box-shadow: 0px 0px 12px #3983c0;
}

@media only screen and (max-width: 920px) {
    .top-header {
     height: auto;
     text-align: center;
     display: none;
    }
    .social-header-links{
        display: none!important;
    }
    .carousel-caption{
        max-width: 100%!important;
        
    }
    .carousel-1,.carousel-2,.carousel-3{
        height: 90vh!important;
    }

    .navbar li a{
        padding: 5px!important;
        margin: 4px 0px!important;
        width: 100%;
    }
    .navbar-collapse{
        height: auto!important;
    }
    #about-head{
        background-position: 10% 0%!important;
    }
    .navbar-collapse{
        padding-bottom: 20px;
    }
   
  }


  .more-text {
      display: none;
    }
    .read-more-button {
      color: blue;
      cursor: pointer;
    }