:root {
    --primary-text        : #ddd;
    --secondary-text      : #777;
    --light-text          : #FFF;
    --background-main     : #FFF;
    --background-secondary: #121212;
    --accent-color        : #007bff;
    --card-shadow         : 0 5px 15px #0000001a;
    --button-primary      : #1a2a48;
    --dash-bg-dark        : #1e2125;
    --dash-bg-hover       : #2c3138;
    --dash-text-color     : #adb5bd;
    --dash-text-hover     : #ffffff;
    --dash-active-bg      : #0d6efd;
    --dash-active-border  : #338dff;
    --dash-separator-color: #3e444a
}

@font-face {
    font-family: Farhang;
    src: url(/fonts/Farhang2FaNum-Regular.TTF)
}

@font-face {
    font-family: BoldFarhang;
    src: url(/fonts/Farhang2FaNum-Bold.TTF)
}

* {
    font-family: Farhang;
}

.bold, b, h1, h2, h3, h4, h5, h6 {
    font-family: BoldFarhang !important;
    line-height: normal !important;
}

body {
    margin          : 0;
    font-family     : 'Farhang', sans-serif;
    background-color: var(--background-secondary) !important;
    color           : var(--primary-text) !important
}

.nav-item-dropdown {
    position: relative;
}

    .nav-item-dropdown:hover .mega-menu-panel {
        display: block;
    }

.mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 1.5rem;
    min-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 50;
}

.mega-menu-title {
    color: var(--accent-color, #ffc107);
    font-size: 0.95rem;
    margin-bottom: 10px;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

.mega-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .mega-menu-list li {
        margin-bottom: 6px;
    }

    .mega-menu-list a {
        color: #ccc !important;
        font-size: 0.9rem;
        transition: color 0.2s;
    }

        .mega-menu-list a:hover {
            color: #fff !important;
        }

@media (max-width: 992px) {
    .mega-menu-panel {
        display: none !important; /* در موبایل از منوی همبرگری استفاده می‌شود */
    }
}

.page-container {
    overflow-x: hidden
}

.hero-section {
    position           : relative;
    height             : 470px;
    background-image   : url(/img/banners/cover.png);
    background-size    : cover;
    background-position: center 30%;
    display            : flex;
    flex-direction     : column;
    color              : var(--light-text)
}

.hero-section .overlay {
    position  : absolute;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: #00000080
}

.hero-content {
    position       : relative;
    z-index        : 5;
    flex-grow      : 1;
    display        : flex;
    justify-content: center;
    align-items    : center
}

.hero-links {
    display   : flex;
    gap       : 3rem;
    margin-top: -50px
}

.hero-link-item {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    text-decoration: none;
    position       : relative
}

.hero-circle-image {
    width              : 160px;
    height             : 160px;
    border-radius      : 50%;
    border             : 4px solid #ffffffe6;
    margin-bottom      : 12px;
    background-size    : cover;
    background-position: center;
    box-shadow         : 0 4px 15px #0000004d;
    transition         : transform .3s ease, box-shadow .3s ease;
    z-index            : 2
}

.hero-link-item:hover .hero-circle-image {
    transform : scale(1.05);
    box-shadow: 0 6px 20px #0006
}

#circle-image-1 {
    background-image: url(/img/banners/1.png)
}

#circle-image-2 {
    background-image: url(/img/banners/2.png)
}

#circle-image-3 {
    background-image: url(/img/banners/3.png)
}

.hero-link-text-box {
    background-color: #000000b3;
    color           : #fff;
    padding         : .75rem 1.5rem;
    border-radius   : 8px;
    margin-top      : -25px;
    min-width       : 180px;
    text-align      : center;
    font-weight     : 700;
    font-size       : 1.1rem;
    z-index         : 1;
    box-shadow      : 0 2px 5px #0003
}

.main-nav {
    position       : relative;
    z-index        : 10;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 1.5rem 3rem
}

.nav-right .logo {
    font-size  : 1.8rem;
    font-weight: 700
}

#logo-part {
    background-color: #000;
    border-radius   : 100%;
    width           : auto;
    height          : auto;
    opacity         : 80%
}

.nav-center {
    display: flex;
    gap    : 2rem
}

.nav-center a,
.nav-right a,
.nav-left span {
    color          : var(--light-text);
    text-decoration: none;
    font-size      : 1rem
}

.nav-left {
    display    : flex;
    align-items: center;
    gap        : 1.5rem
}

.search-form {
    display      : flex;
    align-items  : center;
    background   : #fff3;
    padding      : 5px;
    border-radius: 20px
}

.search-form input {
    background: transparent;
    border    : none;
    color     : #fff;
    padding   : 5px 10px
}

.search-form input:focus {
    outline: none
}

.search-form input::placeholder {
    color: #ccc
}

.search-form button {
    background: none;
    border    : none;
    color     : #fff;
    font-size : 1.2rem;
    cursor    : pointer
}

.user-account {
    display    : flex;
    align-items: center;
    gap        : 8px
}

.user-account img {
    width        : 50px;
    height       : 50px;
    border-radius: 50%
}

.hero-content {
    position       : relative;
    z-index        : 5;
    flex-grow      : 1;
    display        : flex;
    justify-content: center;
    align-items    : center
}

.hero-links {
    display   : flex;
    gap       : 3rem;
    margin-top: -50px
}

.hero-circle {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 1rem;
    text-decoration: none;
    color          : var(--light-text);
    font-size      : 1.1rem;
    font-weight    : 700
}

.circle-image-wrapper {
    width          : 150px;
    height         : 150px;
    border-radius  : 50%;
    background     : #0006;
    border         : 3px solid var(--light-text);
    display        : flex;
    justify-content: center;
    align-items    : center;
    transition     : transform .3s ease
}

.hero-circle:hover .circle-image-wrapper {
    transform: scale(1.05)
}

.circle-image-wrapper img {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    border-radius: 50%
}

main {
    padding: 2rem 3rem
}

.content-section {
    margin-bottom: 3rem
}

.section-header {
    justify-content: space-between;
    align-items    : center;
    margin-bottom  : 1.5rem;
    display        : flex
}

.section-header h2 {
    font-size: 1.8rem;
    color    : var(--primary-text)
}

.section-header-p {
    margin   : 0 20px 20px;
    font-size: 1rem;
    color    : var(--secondary-text)
}

.view-more {
    text-decoration: none;
    color          : var(--accent-color);
    font-weight    : 700
}

.cards-container {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 1.5rem
}

.event-card {
    background-color: #121001;
    border-radius   : 12px;
    box-shadow      : var(--card-shadow);
    overflow        : hidden;
    transition      : transform .3s ease, box-shadow .3s ease;
    text-align      : right
}

.event-card:hover {
    transform : translateY(-5px);
    box-shadow: 0 10px 20px #00000026
}

.card-image {
    position: relative;
    width   : 100%;
    height  : 180px
}

.card-image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.tag {
    position        : absolute;
    top             : 10px;
    left            : 10px;
    background-color: red;
    color           : #fff;
    padding         : 4px 10px;
    border-radius   : 5px;
    font-size       : .9rem;
    font-weight     : 700
}

.card-info {
    padding: 1rem
}

.card-info h3 {
    margin   : 0 0 .5rem;
    font-size: 1.2rem
}

.card-info .date-location {
    font-size    : .9rem;
    color        : var(--secondary-text);
    margin-bottom: 1rem
}

.card-info .price {
    font-size  : 1.1rem;
    font-weight: 700;
    color      : var(--accent-color)
}

.large-card {
    grid-column: span 2;
    position   : relative;
    color      : #fff
}

.large-card .card-image {
    height: 300px
}

.card-info-overlay {
    position  : absolute;
    bottom    : 0;
    right     : 0;
    left      : 0;
    padding   : 1.5rem;
    background: linear-gradient(to top, #000c, transparent)
}

.ticket-button {
    background-color: var(--button-primary);
    color           : #fff;
    border          : none;
    padding         : 10px 20px;
    border-radius   : 5px;
    cursor          : pointer;
    font-weight     : 700;
    font-size       : 1rem;
    margin-top      : 1rem
}

.main-footer {
    background-color: var(--background-secondary);
    color           : var(--light-text);
    padding         : 3rem 3rem 0
}

.footer-content {
    display  : flex;
    flex-wrap: wrap;
    gap      : 2rem
}

.footer-column {
    flex     : 1;
    min-width: 200px
}

.footer-column h4 {
    font-size    : 1.2rem;
    margin-bottom: 1rem
}

.footer-column ul {
    list-style: none;
    padding   : 0
}

.footer-column ul li a {
    color          : #ccc;
    line-height    : 2.2;
    text-decoration: none
}

.subscribe-column p {
    color    : #ccc;
    font-size: .9rem
}

.subscribe-form {
    display   : flex;
    margin-top: 1rem
}

.subscribe-form input {
    flex-grow    : 1;
    padding      : 10px;
    border       : 1px solid #555;
    background   : #333;
    color        : #fff;
    border-radius: 0 5px 5px 0
}

.subscribe-form input:focus {
    outline: none
}

.subscribe-form button {
    padding         : 10px 15px;
    border          : none;
    background-color: var(--button-primary);
    color           : #fff;
    cursor          : pointer;
    border-radius   : 5px 0 0 5px
}

.footer-bottom {
    text-align: center;
    padding   : 1.5rem 0;
    font-size : .9rem;
    color     : #888
}

.end-footer {
    border-bottom : 1px solid #444;
    padding-bottom: 2rem
}

.end-footer p {
    color      : var(--primary-text);
    font-family: LightFarhang
}

.blog-card {
    height             : 35vh !important;
    background-size    : cover;
    width              : 100%;
    height             : fit-content !important;
    background-position: center
}

.blog-card .card-title {
    font-size: x-large
}

.blog-card .card-text {
    background-color: #3a3a3a;
    color           : #ccc;
    opacity         : 75%;
    font-size       : medium;
    padding         : 15px 5px;
    border-radius   : 10px
}

a {
    text-decoration: none !important;
    color          : var(--primary-text) !important
}

.features-timeline-section {
    padding : 80px 0;
    position: relative;
    overflow: hidden
}

.timeline-container {
    position : relative;
    max-width: 1000px;
    margin   : 0 auto
}

.timeline-container::after {
    content         : '';
    position        : absolute;
    width           : 3px;
    background-color: #e0e0e0;
    top             : 0;
    bottom          : 0;
    left            : 50%;
    margin-left     : -1.5px
}

.timeline-item {
    padding : 10px 40px;
    position: relative;
    width   : 50%
}

.timeline-item::after {
    content         : '';
    position        : absolute;
    width           : 20px;
    height          : 20px;
    left            : -10px;
    background-color: #222034;
    border          : 4px solid #ffc107;
    top             : 25px;
    border-radius   : 50%;
    z-index         : 1
}

.timeline-item:nth-child(odd) {
    left: 0
}

.timeline-item:nth-child(even) {
    right: 50%
}

.timeline-item:nth-child(even)::after {
    right: -10px
}

.timeline-content {
    padding         : 30px;
    background-color: #222034;
    position        : relative;
    border-radius   : 8px;
    box-shadow      : 0 4px 20px #00000014;
    transition      : transform .3s ease, box-shadow .4s ease;
    border-top      : 4px solid #ffc107;
    text-align      : center
}

.timeline-item:hover .timeline-content {
    transform : translateY(-5px);
    box-shadow: 0 8px 30px #0000001f
}

.timeline-content .content-icon {
    margin-bottom: 15px
}

.timeline-content .content-icon .bi {
    font-size: 40px;
    color    : #ffc107
}

.timeline-content h3 {
    font-family  : 'BoldFarhang', sans-serif;
    margin-top   : 0;
    margin-bottom: 10px;
    font-size    : 1.5rem
}

.timeline-content p {
    font-size  : 1rem;
    line-height: 1.7;
    color      : #d3d6ab
}

@media screen and (max-width: 768px) {
    main {
        padding: 0
    }

    .timeline-container::after {
        left: 31px
    }

    .timeline-item {
        width        : 100%;
        padding-left : 70px;
        padding-right: 25px
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0
    }

    .timeline-item::after {
        left: 21px
    }
}

.hamburger-menu-button {
    display   : none;
    background: none;
    border    : none;
    color     : #fff;
    font-size : 2.5rem;
    cursor    : pointer;
    z-index   : 1001
}

.mobile-nav-panel {
    display: none
}

@media screen and (max-width: 992px) {
    .main-nav {
        padding: 1rem 1.5rem
    }

    .desktop-menu {
        display: none !important
    }

    .hamburger-menu-button {
        display: block
    }

    .mobile-nav-panel {
        display         : flex;
        flex-direction  : column;
        gap             : 1.5rem;
        position        : fixed;
        top             : 0;
        left            : -100%;
        width           : 100%;
        height          : 100vh;
        padding         : 6rem 2rem 2rem;
        background-color: #121212f2;
        backdrop-filter : blur(10px);
        transition      : left .3s ease-in-out;
        z-index         : 1000;
        text-align      : center
    }

    .mobile-nav-panel.active {
        left: 0
    }

    .mobile-nav-panel a {
        font-size  : 1.5rem;
        font-family: 'BoldFarhang', sans-serif;
        color      : #fff !important
    }

    .mobile-nav-panel hr {
        border-color: #fff3
    }

    .hamburger-menu-button.is-active .bi-list {
        display: none
    }

    .hamburger-menu-button:not(.is-active) .bi-x-lg {
        display: none
    }

    .hamburger-menu-button.is-active::before {
        content    : '\F62A';
        font-family: "bootstrap-icons";
        font-size  : 2rem
    }

    .timeline-container::after {
        left       : 20px;
        margin-left: 0
    }

    .timeline-item {
        width        : 100%;
        padding-left : 55px;
        padding-right: 15px
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left : 0;
        right: auto
    }

    .timeline-item::after {
        left : 11px;
        right: auto
    }

    .timeline-item:nth-child(even)::after {
        left : 11px;
        right: auto
    }

    .timeline-content {
        padding: 20px
    }

    .timeline-content h3 {
        font-size: 1.3rem
    }

    .timeline-content p {
        font-size: .95rem
    }

    .main-nav .logo img {
        width     : 120px;
        transition: width .3s ease
    }

    .hero-section {
        height        : auto;
        padding-bottom: 4rem
    }

    .hero-links {
        gap      : 1.5rem;
        flex-wrap: wrap;
        padding  : 0 1rem
    }

    .hero-circle-image {
        width : 110px;
        height: 110px
    }

    .hero-link-text-box {
        min-width : 140px;
        padding   : .9rem 1rem .7rem;
        margin-top: -35px
    }

    .hero-link-text-box span {
        font-size: .9rem
    }

    .mobile-nav-panel a {
        font-size: 1.3rem
    }

    .hero-section .hero-links {
        display       : flex !important;
        flex-direction: column !important;
        align-items   : center !important;
        gap           : 2.5rem !important;
        width         : 100% !important;
        padding-top   : 2rem !important
    }

    .hero-section .hero-link-item {
        width         : auto !important;
        display       : flex !important;
        flex-direction: column !important;
        align-items   : center !important
    }

    .hero-section .hero-circle-image {
        width        : 140px !important;
        height       : 140px !important;
        margin-bottom: 0 !important;
        border-width : 3px !important;
        box-shadow   : 0 4px 10px #00000040 !important
    }

    .hero-section .hero-link-text-box {
        margin-top      : -10px !important;
        width           : 180px !important;
        border-radius   : 8px !important;
        padding         : .75rem 1rem !important;
        box-shadow      : none !important;
        background-color: #121212cc !important
    }

    .hero-section .hero-link-text-box span {
        font-size  : 1rem !important;
        font-weight: 700 !important;
        color      : #fff !important
    }
}

@media screen and (max-width: 480px) {
    .hero-links {
        gap: 2rem
    }

    .hero-circle-image {
        width : 100px;
        height: 100px
    }

    .hero-link-text-box {
        min-width : 130px;
        margin-top: -30px
    }

    .hero-link-text-box span {
        font-size: .85rem
    }
}

body {
    background-color: #121212;
    color           : #ddd;
    font-family     : 'Vazirmatn', sans-serif
}

.content-section {
    padding: 60px 2rem
}

.section-header {
    text-align   : center;
    margin-bottom: 40px
}

.section-header h2 {
    font-size    : 2.5rem;
    margin-bottom: 10px
}

.section-header .section-header-p {
    max-width: 600px;
    margin   : 0 auto;
    color    : #aaa
}

.about-hero-section .hero-image-container {
    position       : relative;
    width          : 100%;
    height         : 60vh;
    display        : flex;
    justify-content: center;
    align-items    : end;
    margin         : 10px 0
}

.about-hero-section .hero-image-container img {
    width     : 100%;
    height    : 100%;
    object-fit: cover
}

.about-hero-section .hero-overlay {
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: #0006
}

.about-hero-section .play-button {
    position        : absolute;
    z-index         : 2;
    width           : 90px;
    height          : 90px;
    background-color: #ffffffe6;
    border-radius   : 50%;
    display         : flex;
    justify-content : center;
    margin-left     : 30px;
    align-items     : center;
    text-decoration : none;
    transition      : transform .3s ease, background-color .3s ease
}

.about-hero-section .play-button:hover {
    transform       : scale(1.1);
    background-color: #fff
}

.about-hero-section .play-button .bi-play-fill {
    font-size   : 50px;
    color       : #121212;
    margin-top  : 13px;
    margin-right: -5px
}

.schedule-container {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap                  : 1.5rem;
    max-width            : 1200px;
    margin               : 0 auto
}

.schedule-item {
    background-color: #1e1e1e;
    padding         : 1.5rem;
    border-radius   : 8px;
    border-right    : 4px solid #ffc107;
    transition      : transform .2s ease
}

.schedule-item:hover {
    transform: translateY(-5px)
}

.schedule-day {
    font-size    : 1.5rem;
    font-weight  : 700;
    margin-bottom: .5rem
}

.schedule-time {
    font-size    : 1.1rem;
    color        : #ffc107;
    margin-bottom: 1rem
}

.schedule-details {
    color: #bbb
}

.team-cards-container {
    display        : flex;
    justify-content: center;
    gap            : 2rem;
    flex-wrap      : wrap
}

.team-card {
    background-color: #1e1e1e;
    border-radius   : 10px;
    overflow        : hidden;
    width           : 280px;
    text-align      : center;
    box-shadow      : 0 4px 15px #0003
}

.team-card img {
    width     : 100%;
    height    : 250px;
    object-fit: cover
}

.team-card-info {
    padding: 1.5rem
}

.member-name {
    font-size: 1.4rem;
    margin   : 0
}

.member-role {
    color : #aaa;
    margin: .25rem 0 1rem
}

.social-links a {
    color     : #ccc;
    font-size : 1.5rem;
    margin    : 0 .5rem;
    transition: color .2s ease
}

.social-links a:hover {
    color: #ffc107
}

.join-us-section {
    display         : flex;
    background-color: #1e1e1e;
    align-items     : center;
    margin          : 4rem 0
}

.join-us-content {
    flex   : 1;
    padding: 4rem
}

.join-us-content h2 {
    font-size    : 2.5rem;
    margin-bottom: 1rem
}

.join-us-content p {
    color        : #aaa;
    margin-bottom: 2rem
}

.primary-button {
    background-color: #8a2be2;
    color           : #fff;
    border          : none;
    padding         : 12px 30px;
    border-radius   : 5px;
    font-size       : 1rem;
    font-weight     : 700;
    cursor          : pointer;
    transition      : background-color .3s ease
}

.primary-button:hover {
    background-color: #9932cc
}

.join-us-image {
    flex   : 1;
    display: none
}

@media (min-width: 768px) {
    .join-us-image {
        display: block
    }

    .join-us-image img {
        width     : 100%;
        height    : 100%;
        object-fit: cover
    }
}

.rubika-logo {
    height       : 28px !important;
    width        : 26px !important;
    margin-bottom: 4px
}

.breadcrumbs {
    padding   : 15px 0;
    min-height: 40px
}

.breadcrumbs a,
.breadcrumbs span {
    color: #adadad
}

.breadcrumbs ol {
    display   : flex;
    flex-wrap : wrap;
    list-style: none;
    padding   : 0;
    margin    : 0;
    font-size : 14px
}

@media (max-width:992px) {
    .breadcrumbs ol {
        margin-top: 10px
    }
}

.breadcrumbs ol li+li::before {
    display: inline-block;
    padding: 0 7px;
    color  : #adadad;
    content: "/"
}

@media (max-width:768px) {
    .breadcrumbs .d-flex {
        display: block !important
    }

    .breadcrumbs ol {
        display: block
    }

    .breadcrumbs ol li {
        display: inline-block
    }
}

.share-btn {
    width           : 1.5rem;
    height          : 1.5rem;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 50%;
    background-color: #3a83b254
}

.share-btn img {
    filter: invert(90%)
}

.cart-fab {
    position        : fixed;
    bottom          : 25px;
    left            : 35px;
    width           : 60px;
    height          : 60px;
    background-color: #192a3d;
    color           : #fff;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 1.8rem;
    text-decoration : none;
    box-shadow      : 0 4px 12px #0003;
    z-index         : 1000;
    transition      : transform .2s ease-in-out
}

.cart-fab:hover {
    transform: scale(1.1);
    color    : #fff
}

.cart-badge {
    position        : absolute;
    top             : -5px;
    right           : -5px;
    background-color: #dc3545;
    color           : #fff;
    width           : 24px;
    height          : 24px;
    border-radius   : 50%;
    font-size       : .8rem;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border          : 2px solid #fff;
    transition      : transform .2s ease;
    transform       : scale(0)
}

.cart-badge.visible {
    transform: scale(1)
}

.subscribe-form input {
    width: 75%
}

.dashboard-container {
    display       : flex;
    flex-direction: row-reverse;
    gap           : 20px;
    max-width     : 1200px;
    margin        : 20px auto;
    padding       : 0 15px
}

.dashboard-nav {
    flex            : 0 0 260px;
    background-color: var(--nav-bg);
    border-radius   : 8px;
    border          : 1px solid var(--border-color);
    padding         : 15px 0;
    height          : fit-content
}

.dashboard-nav ul {
    list-style: none;
    padding   : 0;
    margin    : 0
}

.dashboard-nav a {
    display        : flex;
    align-items    : center;
    padding        : 12px 20px;
    text-decoration: none;
    color          : var(--secondary-text);
    font-weight    : 500;
    transition     : all .2s ease-in-out;
    border-right   : 3px solid transparent
}

.dashboard-nav a:hover {
    background-color: var(--accent-color-light);
    color           : var(--primary-text)
}

.dashboard-nav a.active {
    background-color  : var(--accent-color-light);
    color             : #f6f1a8 !important;
    border-right-color: var(--accent-color)
}

.dashboard-nav a svg {
    width      : 20px;
    height     : 20px;
    margin-left: 10px
}

.nav-separator {
    height          : 1px;
    background-color: var(--border-color);
    margin          : 10px 20px
}

.dashboard-content {
    flex: 1
}

.dashboard-card {
    background-color: var(--content-bg);
    border-radius   : 8px;
    border          : 1px solid var(--border-color);
    padding         : 30px
}

@media (max-width: 768px) {
    .dashboard-container {
        flex-direction: column
    }

    .dashboard-nav {
        flex-basis: auto
    }
}

.avatar-selector {
    display  : flex;
    flex-wrap: wrap;
    gap      : 15px
}

.avatar-option {
    position: relative
}

.avatar-option .avatar-radio {
    position: absolute;
    opacity : 0;
    width   : 0;
    height  : 0
}

.avatar-option img {
    width        : 80px;
    height       : 80px;
    border-radius: 50%;
    border       : 3px solid transparent;
    cursor       : pointer;
    transition   : all .2s ease
}

.avatar-option img:hover {
    transform: scale(1.1)
}

.avatar-option .avatar-radio:checked+label img {
    border-color: var(--accent-color);
    box-shadow  : 0 0 10px #0d6efd80
}

.dashboard-nav {
    background-color: var(--dash-bg-dark);
    padding         : 1rem 0;
    border-radius   : 8px;
    width           : 280px;
    height          : 100%;
    box-shadow      : 0 4px 12px rgba(0, 0, 0, .2)
}

.dashboard-nav ul {
    list-style-type: none;
    padding        : 0;
    margin         : 0
}

.dashboard-nav ul li a {
    display        : flex;
    align-items    : center;
    padding        : 12px 25px;
    color          : var(--dash-text-color);
    text-decoration: none;
    font-size      : 1rem;
    font-weight    : 500;
    transition     : background-color .3s, color .3s, border-right-color .3s;
    border-right   : 4px solid transparent
}

.dashboard-nav ul li a i {
    font-size  : 1.2rem;
    margin-left: 12px
}

.dashboard-nav ul li a:hover {
    background-color: var(--dash-bg-hover);
    color           : var(--dash-text-hover)
}

.dashboard-nav ul li a.active {
    background-color  : var(--dash-active-bg);
    color             : var(--dash-text-hover);
    font-weight       : 700;
    border-right-color: var(--dash-active-border)
}

.dashboard-nav ul li.nav-separator {
    height          : 1px;
    background-color: var(--dash-separator-color);
    margin          : 1rem 1.5rem
}

.dashboard-nav ul li a[href*=Logout]:hover {
    background-color: #dc3545;
    color           : #fff
}