@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 03\ Light.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 03\ Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 03\ Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 02\ Thin.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 02\ Thin.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 02\ Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 01\ Hairline.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 07\ Heavy.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 07\ Heavy.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 07\ Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 04\ Regular.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 04\ Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 04\ Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 05\ Medium.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 05\ Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 05\ Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 06\ Bold.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 06\ Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 06\ Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'yekan';
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 08\ Fat.eot');
    src: url('../fonts/Yekan\ Bakh\ Fa-En\ 08\ Fat.eot?#iefix') format('embedded-opentype'), url('../fonts/Yekan\ Bakh\ Fa-En\ 08\ Fat.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.headLabelBackgroud {
    background: linear-gradient(126.69deg, #42bafa 6.42%, rgba(17, 2, 198, 0.85) 104.03%);
    position: sticky;
    top: 50px;
    z-index:40;
}

.logoBackground {
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(62,62,214,1) 0%, rgba(0,212,255,1) 100%);
}

.login-page-background {
    background-image: url(../Images/LoginBackNetwork.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}



.media-scroll-container {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}

.media-thumb {
    scroll-snap-align: start;
    transition: transform 0.2s ease;
}

    .media-thumb:hover {
        transform: scale(1.05);
        cursor: pointer;
    }



.media-scroll-strip {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.media-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 2px solid transparent;
}

    .media-item:hover {
        transform: scale(1.05);
    }

.selected-slide {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-lightest);
    box-shadow: 0 0 8px rgba(0,0,0,0.15);
}