body{
    background-color: #0D0D0D;
    color: #f9f6f6!important;
    font-family: "Segoe UI Light"
}

.side-nav-menu{
    z-index: 9999;
}

.nav-tap{
    background-color: #0D0D0D;

}

a{
    text-decoration: none;
    color: #f9f6f6!important;

}

.logo{
    height: 48px;

}

i{
    cursor: pointer;
}

/* .movie-overlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    transition: 0.5;
  
} */

.movie-item{
   width: 95%;
   margin: auto;
}

.movie-item img{
   transition: all 0.5s ease-in-out;
   width: 100%;

}

.movie-item:hover .animate
{
    transform: rotate(5deg) scale(1.25);
    filter: blur(3px);

}

.movie-item:hover .image-overlay {
    top: 0;
  }

/* .movie-item:hover .movie-overlay{
    top: 0;
} */

.movie-overlay .movie-title
{
    font-size: 35px;
    font-weight: 700;
    text-align: center;
}

.movie-overlay .movie-date{
    font-style: italic;
}

.movie-overlay .movie-desc{
   color: #EDEDED;
   user-select: text;
}

.movie-overlay .number
{
    font-size: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid green;
    padding: 10px;
    border-radius: 50%;
   
}

/* .............................. */
.contact .form-control{
    box-shadow: none;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    border-color: #CED4DA;
    border-radius: 0;
    color: #fff;
}

.error {
    color: rgb(214, 46, 51);
    position: absolute;
    font-weight: 700;
}

#inputSearch input:focus {
    background-color: #070707;
    color: rgb(149, 149, 149);
  }

  .movie-item {
    border-radius: 10px;
 
  }
 

  .image-hover h2 {
    font-weight: 300;
  }
  .image-container:hover .image-hover {
    top: 0;
  }
  .movie-item {
    position: relative;
    overflow: hidden;
  }
  
  .movie-overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    transition: left 1s;
  }
  
  .movie-item:hover .movie-overlay {
    left: 0;
  }
  

  .animate {
    transition: transform 0.7s;
  }
  
  .movie-item img{
    transition: all 0.5s ease-in-out;
}

.movie-item:hover .animate
{
    transform: rotate(5deg) scale(1.25);
    filter: blur(3px);

}

/* --------- loader --------- */



.loading-screen{
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 9999999;
  display: flex;
  

}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.loading-screen .loader{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid #FFF;
  border-right: 3px solid transparent;
  box-sizing: border-box;
}

#backToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: black;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.5s;
}


.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 18px;
}

body {
  height: 2000px; /* Adding extra height for demonstration purposes */
}

#inputSearch{
  border: 2px solid #F8F6F6;
}

#inputSearch::placeholder {
  color: #636E7D;
  font-size: 17px;
}

.contact input::placeholder {
  color: #636E7D;
  font-size: 17px;
}