body {


    font-family: cursive;
    --main-color: #272b30;
    --seconde-color: #32383e;
    --color-text: #fff;
    --btn-main-color: #272729;
    background-color: var(--main-color);
    color: var(--color-text);
}
header img {
    max-height: 30vh;
    object-fit: cover;
}

nav {
    background-color: rgb(58, 73, 123) !important;
    margin-inline: auto;
    margin-top: -30px;
    border-radius: 20px;
    box-shadow: 0 0 10px rgb(0 0 0 / 70%);
}

.nav-link {

    font-size: 12px;
    color: var(--color-text);
    font-weight: 400;

}

.nav-link.active,
.nav-item .nav-link:hover {
    color: #09c !important;
    transition: color 0.5s;
}

.navbar-brand {
    color: var(--color-text);
}
.fa-close{
    cursor: pointer;
}
.home .card {
    filter: grayscale(0.7);
    transition: transform 0.5s, filter 0.5s 0.1s;
}

.home .card:hover {
    filter: unset;
    transform: scale(105%, 105%);
    -webkit-filter: unset;
    -webkit-transform: scale(105%, 105%);
    -moz-transform: scale(105%, 105%);
    -ms-transform: scale(105%, 105%);
    -o-transform: scale(105%, 105%);
}


/* loader */


.loading {
    position: fixed;
    z-index: 9999;
    inset: 0;
    background-color: #272b30e3;


}


.loader {


    --dimenison :100px;
    left:calc(50% - var(--dimenison)/2);
    top:calc(50% - var(--dimenison)/2);
  
    display: block;
    width: var(--dimenison);
    height: var(--dimenison);
    border-radius: 50%;
    position: relative;
    animation: rotate 1s linear infinite;
    -webkit-animation: rotate 1s linear infinite;
    
}

.loader::before,
.loader::after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #FFF;
    animation: prixClipFix 2s linear infinite;
}

.loader::after {
    border-color:#09c;
    animation: prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse;
    inset: 6px;
}

.details{
   background-color: var(--btn-main-color);
    
}


@keyframes rotate {
    0% {
        transform: rotate(0deg)    ;
        -webkit-transform: rotate(0deg)    ;
        -moz-transform: rotate(0deg)    ;
        -ms-transform: rotate(0deg)    ;
        -o-transform: rotate(0deg)    ;
}

    100% {
        transform: rotate(360deg)
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}