@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

* {
  font-family: 'Cairo', sans-serif !important;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
ul { 
  list-style-type: disc; 
  list-style-position: inside; 
}
ol { 
  list-style-type: decimal; 
  list-style-position: inside; 
}
ul ul, ol ul { 
  list-style-type: circle; 
  list-style-position: inside; 
  margin-left: 15px; 
}
ol ol, ul ol { 
  list-style-type: lower-latin; 
  list-style-position: inside; 
  margin-left: 15px; 
}
a {
  text-decoration: none;
  color: inherit;
}
input::-ms-reveal,
input::-ms-clear {
  display: none;
}
.card-animation {
  opacity: 0;
  transform: translateY(10px);
  animation: slide 0.6s forwards;
}
@keyframes slide {
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.underline-hover:hover{
  text-decoration: underline;
}
.nav-box-hover{
  transition: 0.2s;
}
.nav-box-hover:hover{
  background: hsl(240 21% 21% / 1) !important;
}
.swal2-container.swal2-center.swal2-backdrop-show{
  z-index: 9999;
}
.swal2-confirm.swal2-styled.swal2-default-outline{
  box-shadow: none;
}
.swal2-popup {
  font-size: 0.9rem !important;
}
.splide__pagination__page.is-active{
  background: #0091F7 !important;
}
.album-box{
  cursor: pointer;
  position: relative;
  height: 200px;
  overflow: hidden;
}
.album-box:hover .album-box-overlay{
  opacity: 1;
  transform: translateY(0);
}
.album-box-overlay{
  transition: 0.2s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.71);
  opacity: 0;
  transform: translateY(20px);
}
.text-ellipsis-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-ellipsis-3{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
input::-ms-reveal,
input::-ms-clear {
  display: none;
}