@font-face {
    font-family: 'shabnam';
    src: url('../fonts/shabnam-font-v2.4.0/shabnam.woff') format('woff');
}

@font-face {
    font-family: 'shabnam-light';
    src: url('../fonts/shabnam-font-v2.4.0/shabnam-light.woff') format('woff');
}

@font-face {
    font-family: 'shabnam-light-fd';
    src: url('../fonts/shabnam-font-v2.4.0/farsi-digits/shabnam-light-fd.woff') format('woff');
}

@font-face {
    font-family: 'shabnam-bold-fd';
    src: url('../fonts/shabnam-font-v2.4.0/farsi-digits/shabnam-bold-fd.woff') format('woff');
}
body > *, a, p, span, div, h1, h2, h3, h4, h5, h6 {
    font-family: 'shabnam'
}

.font-light {
    font-family: 'shabnam-light' !important
}

/**********************Mega Menu*********************/

.mega-menu {
    opacity: 0;
    visibility: hidden;
    z-index: -900;
    left: 0;
    position: absolute;
    text-align: left;
    width: 100%;
    transition: all 0.15s linear 0s;
    background: #fff;
}


/* #hoverable Class Styles */
.hoverable {
    position: static;
}

   

    .hoverable:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        z-index: 900;
    }


/* #toggle Class Styles */

.toggleable > label:after {
    content: "\25BC";
    font-size: 10px;
    padding-left: 6px;
    position: relative;
    top: -1px;
}

.toggle-input {
    display: none;
}

    .toggle-input:not(checked) ~ .mega-menu {
        opacity: 0;
        visibility: hidden;
        z-index: -900;
    }

    .toggle-input:checked ~ .mega-menu {
        opacity: 1;
        visibility: visible;
        z-index: 900;
    }

    .toggle-input:checked + label {
        color: white;
        background: rgb(3, 102, 114); /*@apply bg-teal-700 */
    }

    .toggle-input:checked ~ label:after {
        content: "\25B2";
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }

/*********************End**********************/

/********************swiper***************/
.swiper {
    height: 400px;
}

/******************* End ****************/

/******************* Scroll ****************/

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #6f6f6f;
    border-radius: 20px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #b1b1b1;
    }

.container {
    max-width: 1280px !important;
}

/*********** End Scroll *************/

/**************** Modal *****************/

html:has(dialog[open]) {
    overflow: hidden;
}

@keyframes scaleDown {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

dialog[open]::backdrop {
    backdrop-filter: blur(5px);
}

@media (prefers-reduced-motion: no-preference) {
    dialog {
        opacity: 0;
        transform: scale(0.9);
    }

        dialog.showing {
            animation: slideInUp 0.3s ease-out forwards;
        }

        dialog.closing {
            animation: scaleDown 0.3s ease-in forwards;
        }
}

.close-button {
    position: absolute;
    top: 1rem;
    left: 1rem;
    cursor: pointer;
}


/******** Range Slider  **********/

.range_container {
    --_marker-border-clr: #0EA5E9;
    --_marker-size: 15px;
    --_track-heigt: 3px;
    --_tooltip-bg-clr: rgba(0, 0, 0, 0.4);
    --_tooltip-txt-clr: var(--_marker-border-clr);
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

.sliders_control {
    position: relative;
}

.slider-tooltip {
    position: absolute;
    top: -3.5rem;
    left: 0;
    width: fit-content;
    background-color: var(--_tooltip-bg-clr);
    color: var(--_tooltip-txt-clr);
    font-size: 0.8rem;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    text-align: center;
    translate: -50% 0;
}

    .slider-tooltip::before {
        content: "";
        position: absolute;
        bottom: -0.25rem;
        left: 50%;
        translate: -50% 0;
        width: .5rem;
        height: .5rem;
        rotate: 45deg;
        z-index: -1;
        background-color: inherit;
    }

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: var(--_marker-size);
    height: var(--_marker-size);
    background-color: var(--_marker-border-clr);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--_marker-border-clr);
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: var(--_marker-size);
    height: var(--_marker-size);
    background-color: var(--_marker-border-clr);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--_marker-border-clr);
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #f7f7f7;
}

input[type=range]::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: var(--_track-heigt);
    width: 100%;
    position: absolute;
    background-color: var(--_marker-border-clr);
    pointer-events: none;
}

#fromSlider {
    height: 0;
    z-index: 1;
}

.scale {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    position: relative;
    width: calc(100% - var(--_marker-size));
    margin-inline: auto;
    font-size: 0.8rem;
}

    .scale div {
        position: absolute;
        translate: -50% 0;
    }

        .scale div::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            translate: -50% -125%;
            width: 1px;
            height: 10px;
            background-color: #666;
        }

/***************End Range ***************/

.menu-drawer{
    display:block;
}
.menu-drawer.-translate-x-full {
    display: none;
}

.text-fa {
    font-family: 'shabnam-light-fd'
}

.two-line-text {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden; 
    text-overflow: ellipsis; 
    max-width: 300px; 
}