body {
    color: #000000;




}
html{
    scroll-behavior: smooth;
}





.button {
    border: none !important;
}




/*fonts*/

@font-face {
    font-family: 'pinar';
    src: url("../fonts/Pinar-FD-VF.woff2");
}

@font-face {
    font-family: 'kook';
    src: url("../fonts/Kook-Regular.ttf");
}

@font-face {
    font-family: 'yekan';
    src: url("../fonts/YekanBakhFaNum-Regular.ttf");
}

.kook {
    font-family: kook, serif !important;
}

.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 #00A651;

        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 {
    box-shadow: 0 4px 4px 0 #00000062;
    transition: 0.6s;
    border-radius: 0px;
    width: 100%;
}

.concertcardbutton:hover {
    background-color:  #A6A400;
}

.footerhover:hover {
    color: #B9E901 !important;
    transition: 0.3s;
}


/*background*/
.backgroundadj {
    background-repeat: no-repeat;
    background-size: cover;
}

.bgblur{
    background: rgba(12, 12, 12, 0.17);
    backdrop-filter: blur(0.3rem);
}


/*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 {
    stroke-width: 3px;
    stroke: #868686;
    backdrop-filter: blur(5px);
}

.cardbackground p {
    font-weight: bold;
    font-size: 1.3em !important;
}

.cardbackground span {
    font-weight: 500;
}

.cardbackground button {
    padding: 0 !important;
}

.cardbackgrounddark {

    background-image: linear-gradient(114deg, rgba(0, 0, 0, 0.35) 3.43%, rgba(74, 73, 73, 0) 102.29%);
    stroke-width: 3px;
    stroke: #171616;
    backdrop-filter: blur(5px);
}

.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{
    display: none;
}

.navactive {
    border-top: solid 0.16rem #00A651;
    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: #00A651;

}

.clronetext {
    color: #00A651;

}

.clrtwo {
    background-color: #0002A6 !important;

}


.clrtwotext {
    color: #0002A6 !important;
}

.clrthree {
    background-color: var(--first-color);
    box-shadow: 0px 2px 4px 2px #00000060;
}

.clrfour {
    background-color: #fff;
}


.clrfive {
    background-color: #A6A400;
}
.clrfivetext {
    color: #A6A400;
}

.clrsix {
    background-color: #FFFFFF;
}

.clrseven {
    background-color: #484747;
}

.clreight {
    background-color: #A60055 !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: 1px solid #535353;
    border-radius: 0.9rem;

}


.cardboxborder2 {
    border: 1px solid #535353;
    border-radius: 0.6rem;

}

.blackborder {
    border: 1px solid #000000;
    border-radius: 3rem;

}

.whiteborder {
    border: 1px solid #f8f5f5;
    border-radius: 0.9rem;

}

.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: 3rem;
}

.borderradtopleft {
    border-top-left-radius: 5rem;
}


.paddingtopandbuttom20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.noborder {
    border: none;
}

.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;

}

.borderclerone {
    border: 0.1rem solid #00A651;
}






/* 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-weight: bold;
    font-size: 16px;

    border-radius: 5px;
    background: #00A651;
}

.morecard button:hover {
    background: #00A651;
    color: #FFFFFF;
    border: 3px solid #00A651;
    box-shadow: #000 1.8px 2.9px 1px 2px;
}








/* newwwwwwwwwwwwwwwffds */
:root {
    --first-color: #00A651;
    --second-color: #414042;
    --third-color: #0002A6;
    --icons-color: #A6A400;
    --text-color: #000000;
    --white-color: #fff;
    --more-button: #A60055;





}
::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
    font-family: 'Kook-regular';
}


/* -------------- fonts -------------- */

@font-face {
    font-family: 'Kook-bold';
    src: url(../fonts/Kook-Bold.ttf);
}

@font-face {
    font-family: 'Kook-extrabold';
    src: url(../fonts/Kook-ExtraBold.ttf);
}

@font-face {
    font-family: 'Kook-light';
    src: url(../fonts/Kook-Light.ttf);
}

@font-face {
    font-family: 'Kook-regular';
    src: url(../fonts/Kook-Regular.ttf);
}

@font-face {
    font-family: 'Kook-medium';
    src: url(../fonts/Kook-Medium.ttf);
}

/* -------------- texts -------------- */

html {
    background-color: #fff !important;
}

p,body  {
    font-family: 'Kook-regular';
}

h2, h3, h4, h5, h6 {
    font-family: 'Kook-bold';
    color: var(--text-color);
    font-weight: bold !important;
}

h1 {
    font-family: 'Kook-extrabold';
}





/* header {
    padding: 1.5em 0;
} */

header a {
    font-family: 'Kook-bold';
    color: var(--text-color) !important;
}


header span img {
    width: 20px;
    height: 20px;
}

main h2 {
    font-size: 27px;
}

.icon__det img {
    background-color: var(--first-color);
    mask-origin: fill-box;
    width: 30px;
    padding: 5px;
    border-radius: 5px;
}

.icon__det p {
    color: #414042;
    font-size: 16px;
    font-weight: 600;
}

.map__location img{
    width: 667px;
    height: 167px;
}

.content__det h2 {
    font-weight: bolder;
    color: #111111;
    font-size: 27px;
}

.content__det ul li {
    list-style: decimal;
    list-style-type: persian;
    margin-right: 1rem;
    color: #484747;
    font-size: 16px;
    margin-top: .6em;
    font-weight: 600;
}

footer {
    margin-top: 2em;
}

footer p {
    color: var(--text-color);
    font-size: 16px;
}

footer h4 {
    color: var(--first-color);
    font-size: 18px;
}

footer .socials_foot{
    margin-top: 6em;
}

footer .socials_foot span {
    border: 1px solid var(--text-color);
    border-radius: 50%;
    padding: .7em;
}

footer .socials_foot span img {
    width: 21px ;
    height: 20px;
}

footer ul li {
    color: var(--text-color);
    font-family: 'Kook-medium';
}

footer .footer__contact li::before{
    content: '';
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-left: .7rem;
  background-image: url('');
  background-size: 1.5em; 
}

footer .footer__contact{
    position: relative;
    left: 1rem;
}

footer li {
    display: flex;
    align-items: center;
}

footer .footer__phone , footer .footer__gmail,footer .footer__loc{
    font-size: 18px;
    font-family: 'Kook-extrabold';
}

footer .footer__phone::before{
    content: '';
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-left: .7rem;
  background-image: url('../../icons/call-calling.png') !important;
  background-repeat: no-repeat;
  background-size: 1.5em; 
}

footer .footer__gmail::before{
    content: '';
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-left: .7rem;
  background-image: url('../../icons/gmail.png') !important;
  background-repeat: no-repeat;
  background-size: 1.5em; 
}

footer .footer__loc::before{
    content: '';
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-left: .7rem;
  background-image: url('../../icons/map-marker-smile.png') !important;
  background-repeat: no-repeat;
  background-size: 1.5em; 
}

footer hr {
    background-color: var(--icons-color);
}




.contact__area *{
    font-family: 'Kook-bold';
}



.padtopmobile p {
    font-family: 'Kook-bold';
    font-size: 16px;
    color: #111111;
}

.contact__info {


    width: 100%;
}

.contact__info .info {
    display: block;
    padding: 8px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.contact__info .info img {
    width: 100%;
}

.contact__info h3 {
    font-family: 'Kook-extrabold';
    font-weight: bold;
    font-size: 24px ;
    color: var(--text-color);
}

.contact__info .contact__number p{
    font-size: 18px !important;
    font-weight: bold;
    position: relative;
    top: 1.5em;
    color: #151515;
}
.contact__info .contact__socials {
    width: 100%;
    display: flex;
    justify-content: center;
}

.contact__info .contact__socials a{
    margin: 10px;
    
}


/* blog */

.blog__area span {
    position: relative;
}

.blog__area .blog__top img {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: -1;
}

.home__top__lit img {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: -1;
}

.title-img {
   transform: translateX(3rem) translateY(2rem);
}







.blog__area .blog__content img{
    width: 560px;
    height: 390px;
}

.blog__area .blog__content p {
    color: #5F5F5F;
}

.blog__area .blog__content button {
    background-color: var(--first-color);
    border: none;
    font-family: 'Kook-bold' ;
    font-size: 16px;
    border-radius: 50px;
    padding: 7px 15px;
}




/*slider*/

.bulletbg {
    background: #A60055 !important;
    opacity: 100% !important;

    width: 2rem !important;
    border-radius: 1.3rem !important;
}

.swiper-button-prev, .swiper-button-next {
    color: #ffffff !important;
   border-radius: 0.6rem;
    padding: 1.6rem;

    background: #484747;
}


.sliderheight {
    height:50rem;
}

.slidercard {
    width: 26%;
    position: absolute;
    top: 20%;
    right:20%;
    text-align: justify;

}



/* responsive */
@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;
    }

    .sliderheight {
        max-height:13rem !important;
    }


    .slidercard {
        width: 26%;
        height: 60%;
        position: absolute;
        top:18%;


        right:15%;


    }
}

@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: 1024px) {
    nav {
        direction: ltr;
    }
    .sliderheight {
        max-height:20rem;
    }


    .slidercard {
        width: 26%;
        height: 60%;
        position: absolute;
        top:18%;


        right:15%;


    }


}
@media screen and (max-width: 1800px) {
    .padtopmobile {
        padding-top: 6rem !important;
    }
}


@media (max-width: 1366px) {
    .column {
        padding-right: 0.2rem;
        padding-left: 0.2rem;
    }

    .columns {
        margin-right:0rem;
        margin-left:0rem;
    }

    .swiper-button-prev, .swiper-button-next {
        color: #ffffff !important;
        border-radius: 0.6rem;
        padding: 0.1rem;



        background: #484747;
    }



    .map__location.mt-6{
        margin-top: 0 !important;
    }

    .title__det.mt-5 {
        margin-top: 0!important;
    }
    .blog__area .blog__content img{
        width: 460px;
        height: 290px;
    }
    .blog__area {
        margin-top: 8em;
    }


}
@media screen and (max-width: 1800px) {
    .myautodesktop {
        margin: 0;
    }

    .concertsheight {
        min-height: 10rem;
    }


    .navpadstart150 {
        padding-right: 1rem;


    }

    .svgheight {

        height: 15rem !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;
        padding-bottom: 1rem !important;
        background-color: rgba(255, 255, 255, 0.90);
        backdrop-filter: blur(6px);


        width: 100% !important;
        margin-left: auto;
        margin-right: 0;
        z-index: 1001;


    }

    .navbordertop {
        border-radius: 0;
        border: none;
    }

    .smallwidth {
        width: 80%;

    }

    .padtopmobile {
        padding-top: 6rem !important;
    }

    .clrfive {
        background-color: #ffffff !important;
    }


}


/* Define the scrollbar for all elements */
::-webkit-scrollbar {
    width: 0.6rem; /* 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: #00A651; /* Background color of the scrollbar thumb */
    border-radius: 0.3rem; /* Border radius of the scrollbar thumb */
}
/* Define the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
    background-color: #5EBF55; /* Background color of the scrollbar thumb on hover */
}