body {
    color: #000000
}



.button {
    border: none !important;
}

.Toastify__toast {
    font-family: yekan !important;
}


/*Fonts*/

@font-face {
    font-family: 'pinar';
    src: url("../Fonts/Pinar-FD-VF.woff2");
}

@font-face {
    font-family: 'yekan';
    src: url("../Fonts/YekanBakhFaNum-Regular.ttf");
}

.yekan {
    font-family: yekan, serif !important;
}


.pinar {
    font-family: pinar, yekan, serif !important;
}


.justify {
    text-align: justify;
}


/*Animations*/

.underline {
    &::after {
        content: "";
        border-bottom: solid 0.1618rem #601FEB;

        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.4s;
    }

    &:hover {
        &::after {
            transform-origin: center;
            transform: scaleX(1);
        }
    }

    @keyframes underline {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }
}


@keyframes rotation {
    0% {
        transform: rotateY(0) rotateX(0);
    }
    25% {
        transform: rotateY(180deg) rotateX(0);
    }
    100% {
        transform: rotateY(0deg) rotateX(180deg);
    }


}

.scoialhover:hover {

    color: #601FEB;
    transition: 0.3s;
}


.dashboardhover:hover {
    border: 1px solid #601FEB;
    transition: 0.3s ease-in-out;
}

.navbardropwdownhover:hover {
    border: 1px solid #B9E901 !important;
    transition: 0.3s;
}


.concertcardanimated:hover {
    transform: rotateY(360deg);
    transition: 1.6s;


}

.animated:hover :nth-child(1) {
    transform: rotateY(360deg);
    transition: 1.6s;


}


.animated:hover :nth-child(2) {
    display: block !important;


}

.animated:hover :nth-child(2) {
    position: relative;
    /*animation: rotation 1.36s linear 1;*/


    transition: 1s;


}

.concertcardbutton:hover {
    background-color: #B9E901;
    transition: 0.6s;
}

.footerhover:hover {
    color: #B9E901 !important;
    transition: 0.3s;
}


/*background*/
.backgroundadj {
    background-repeat: no-repeat;
    background-size: cover;
}


/*shadows*/


.shadowone {
    box-shadow: 0.3rem 0.3rem 0 #000;
}

.shadowtwo {
    box-shadow: 0.3rem 0.3rem 0.6rem 0px rgba(0,0,0,0.5);
    border-radius: 0.6rem;
}


.cardbackground {

    background-image: linear-gradient(114deg, rgba(0, 0, 0, 0.40) 3.43%, rgba(0, 0, 0, 0.00) 102.29%);
    stroke-width: 1px;
    stroke: #868686;
    backdrop-filter: blur(4.349999904632568px);
}


.navactive {
    border-top: solid 0.16rem #601FEB;
    border-radius: 1.118rem;
    /*border-left: solid 0.1rem #B9E901;*/
    /*border-right: solid 0.1rem #B9E901;*/
    /*border-top-right-radius: 1.618rem;*/
    /*border-top-left-radius: 1.618rem;*/
    font-weight: bold;
    transition: 0.2s;


}


/*colors*/

.clrone {
    background-color: #B9E901;

}

.clronetext {
    color: #B9E901;

}

.clrtwo {
    background-color: #601FEB !important;

}


.clrtwotext {
    color: #601FEB !important;
}

.clrthree {
    background-color: #111111;
}

.clrfour {
    background-color: #2E2E2E;
}

.clrfive {
    background-color: #f1f1f100;
}

.clrsix {
    background-color: #FFFFFF;
}

.clrseven {
    background-color: #484747;
}

.clreight {
    background-color: #FF0000 !important;;

}


.clrnine {
    background-color: #5EBF55 !important;
}

.clrten {
    background-color: #209a00;
}

.clrsixtext {
    color: #FFFFFF !important;
}


.textred {
    color: #FF0000 !important;;

}


/*Navbar related*/

.navbaricoCircle {
    border-radius: 50%;
    padding: 2px;
}

.navbarheight52 {
    height: 52px;
}

/*Flex width and stuff*/
.svgheight {

    height: 42rem !important;
}


.concertsheight {
    min-height: 25rem;
}


.containerwidth {
    width: 1900px;
}

.smallwidth {
    width: 1600px;
}


.width1440 {
    width: 1440px;
}

.width1140 {
    width: 1140px;
}

.wdith100 {
    width: 100%;
}

.flex-JCS-ACS {
    display: flex;
    justify-content: center;
    align-items: center;

}


/*Borders Radious margin padding etc*/


.myautodesktop {
    margin-top: auto;
    margin-bottom: auto;
}

.navpadstart150 {
    padding-right: 150px;
}

.navpadend150 {
    padding-left: 150px;
}


.navbordertop {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.boxborderbottom {
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
}

.navborderbotblack {
    background-image: linear-gradient(to right, black 33%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 25px 1px;
    background-repeat: repeat-x;
}

.navborderbotwhite {
    background-image: linear-gradient(to right, #ffffff 33%, rgba(255, 254, 254, 0) 0%);
    background-position: bottom;
    background-size: 25px 1px;
    background-repeat: repeat-x;
}

.cardboxborder {
    border: 0.1rem solid #535353;
    border-radius: 0.9rem;

}

.cardboxborder2 {
    border: 1px solid #535353;
    border-radius: 0.6rem;

}

.blackborder {
    border: 0.1rem solid #000000;
    border-radius: 3rem;

}

.borderright1 {
    border-right: 1px solid white;
    border-top-right-radius: 2rem;
}


.navborderradtop {
    border-top-left-radius: 1.6rem;
    border-top-right-radius: 1.6rem;
}

.borderbottomrad {
    border-bottom-right-radius: 1.6rem;
    border-bottom-left-radius: 1.6rem;
}


.borderrad1 {
    border-radius: 0.6rem !important;
}

.borderrad2 {
    border-radius: 1.9rem;
}

.borderradtopleft {
    border-top-left-radius: 5rem;
}


.paddingtopandbuttom20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.noborder {
    border: none;

}
.noborder::placeholder{
    color: #aba9a9;
}

.concertwhiteborder {
    border: 1px solid white;
    border-radius: 0.3rem;
}


.loginborderblack {

    border: 1px solid black;
    border-radius: 5rem;

}

.selectedcardborderright {
    border-top-right-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;

}

.selectedcardborderleft {
    border-top-left-radius: 0.6rem;
    border-bottom-left-radius: 0.6rem;

}


.clrtwoborder {
    border: 0.1rem solid #601FEB;
}




/* Concerts */
.topimg {
    width: 100%;
    height: 250px;

}


.innerimg {
    position: relative;
    top: -310px;
    right: 180px;
    width: 180px;
    height: 280px;
}

.innerimg img {
    width: 50px;
    height: 60px;
    position: relative;
    left: 55px;
    top: 12px;
}

.innerimg h3 {
    font-weight: bold;
    color: #000;
    font-size: 30px;
    font-family: 'pinar';
}

.innerimg p {
    font-family: 'yekan';
    font-size: 18px;
    margin-top: 6px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 2px;
}

.innerimg span {
    display: flex;
}

.innerimg p:hover {
    color: #601FEB;
}

.filterarea {
    display: flex;
}

.filterbox {
    border: 3px solid #000;
    border-radius: 20px;
    width: 600px;
    height: 400px;
    position: relative;
    top: 30px;
    display: flex;
    padding: 30px;
    flex-direction: column;
    justify-content: center;
}

.filterbox .filter1 {
    display: flex;
    margin: 13px 0;
}

.filterbox .filter1 p {
    font-family: 'yekan';
    color: #2E2E2E;
    font-size: 16px;
    margin: 0 10px;
    font-weight: bold;
    line-height: 21.7px;
}

.filterbox .filter1 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 2rem;
    padding: 0.2rem;
    border: 3px solid #000;
    border-radius: 3px;
}

.filterbox .filter1 input[type="checkbox"]::before {
    content: "";
    width: .8rem;
    height: .8rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    background-color: #000;
}

.filterbox .filter1 input[type="checkbox"]:checked::before {
    transform: scale(1);
}


.filterbox button {
    border: 3px solid #000;
    background-color: transparent;
    padding: 2px 0;
    border-radius: 10px;
    font-family: 'pinar';
    font-weight: bold;
    font-size: 20px;
    margin-top: 20px;
}

.filterbox h4 {
    font-family: 'pinar';
    font-weight: bold;
    color: #000;
    font-size: 20px;
    margin-bottom: 10px;
}

.morecard {
    display: flex;
    justify-content: center;
    margin-bottom: 140px;
    margin-top: 30px;
}

.morecard button {
    padding: 2px 16px;
    border: 3px solid #000;
    margin-inline: 5px;
    font-family: 'pinar';
    font-weight: bold;
    font-size: 16px;
    background: transparent;
    border-radius: 5px;
}

.morecard button:hover {
    background: #601FEB;
    color: #FFFFFF;
    border: 3px solid #601FEB;
    box-shadow: #000 1.8px 2.9px 1px 2px;
}








/* Define the scrollbar for all elements */
::-webkit-scrollbar {
    width: 0.8rem; /* Width of the scrollbar track */
    height: 0.6rem; /* Height of the scrollbar thumb */
}
/* Define the scrollbar track */
::-webkit-scrollbar-track {
    background-color: #f5f5f5; /* Background color of the scrollbar track */
    border-radius: 0.3rem; /* Border radius of the scrollbar track */
}
/* Define the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: #601FEB; /* Background color of the scrollbar thumb */
    border-radius: 0.3rem; /* Border radius of the scrollbar thumb */
}

/*Responsive Design*/

@media screen and (max-width: 600px) {
    .archivepg {
        margin-top: 20px;
        position: relative;
        top: 40px;
    }

    .morecard {
        margin-top: 70px;
        margin-bottom: 80px;
    }

    .filterarea {
        display: flex;
        flex-wrap: wrap-reverse;
    }

    .topimg {
        margin-bottom: 0px;
        position: relative;
        top: 80px;
    }

    .topimg img {
        height: 120px;
    }

    .innerimg {
        top: 0px;
        right: 130px;
    }

    .innerimg img {
        width: 40px;
        height: 40px;

    }

    .filterbox {
        margin-top: 80px;
    }

    /*.wdith100 {*/
    /*    width: auto;*/
    /*}*/
}
@media screen and (max-width: 768px) {
    .filterarea {
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        margin-top: 40px;
    }

    .archivepg {
        position: relative;
        top: 30px;
    }

    .topimg {
        margin-bottom: 0px;
        position: relative;
        top: 90px;
    }

    .topimg img {
        height: 180px;
    }

    .innerimg {
        top: -180px;
        right: 110px;
    }

    .innerimg img {
        width: 60px;
        height: 60px;

    }
}




@media screen and (max-width: 1800px) {
    .myautodesktop {
        margin: 0;
    }

    .concertsheight {
        min-height: 10rem;
    }


    .navpadstart150 {
        padding-right: 1rem;


    }

    .svgheight {

        max-height: 35rem !important;
    }

    .navpadend150 {
        padding-left: 1rem;
    }

    .containerwidth {
        width: 100%;
        margin-left: auto;
        margin-right: auto;

    }

    .borderradmobile1 {
        border-top-right-radius: 0.9rem;
        border-top-left-radius: 0.9rem;

    }

    .mrautomobile {
        margin-right: auto;
    }


    .stcikynavmobile {

        position: fixed !important;

        width: 100% !important;
        margin-left: auto;
        margin-right: 0;
        z-index: 1001;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(0.5rem);



    }

    .navbordertop {
        border-radius: 0;
        border: none;
    }

    .smallwidth {
        width: 80%;

    }

    .padtopmobile {
        padding-top: 6rem !important;
    }

    .clrfive {
        background-color: #ffffff ;
    }


}