:root {
    --main-menu-back: white;
    --main-menu-back-small: rgba(255, 255, 255, 0.8);
    --main-menu-margin-top: calc(20px + var(--top-bar-height));
    --main-menu-margin: 20px;
    --main-menu-padding-default: 15px;
    --main-menu-padding-small: 0px;
    /*  اگر متغیر --raduis را تعریف نکرده اید، این خط را اضافه کنید: */
    --raduis: 5px;
    /* یا هر مقدار دلخواه دیگر */
}

.main-menu {
    background-color: var(--main-menu-back);
    position: fixed;
    height: fit-content;
    z-index: 1000;
    top: var(--main-menu-margin-top);
    left: var(--main-menu-margin);
    right: var(--main-menu-margin);
    padding: var(--main-menu-padding-default) var(--main-menu-padding-default);
    transition: 500ms;
    box-sizing: content-box !important;
}

.main-menu.small {
    left: 0;
    right: 0;
    top: calc(var(--top-bar-height) + var(--top-ad-height));
    padding: var(--main-menu-padding-small) 120px;
    /*background-color: var(--main-menu-back-small);  اگر می خواهید پس زمینه نیمه شفاف باشد */
    /*backdrop-filter: blur(2px); اگر می خواهید پس زمینه محو باشد */
    box-shadow: 0 0 5px #595959;
    /*border-radius: 10px; اگر می خواهید گوشه ها گرد باشند */
}

.main-menu.with-top-ad {
    top: calc(var(--main-menu-margin-top) + var(--top-ad-height));
}

.main-menu.small .navbar .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.main-menu .navbar .navbar-brand {
    margin-right: 0;
}

.main-menu .navbar .navbar-brand img {
    height: 40px;
    margin-right: 20px;
    margin-left: 20px;
    transform: scale(2);
    -ms-transform: scale(2);
}

.main-menu.small .navbar .navbar-brand img {
    margin-right: 0;
    margin-left: 0;
    transform: scale(1.2);
    -ms-transform: scale(1.2);
}

/*  سبک های مربوط به دکمه های آیکون دار (مهمترین بخش) */
.main-menu .navbar .btn-icon {
    background-color: #9DCCFF4D;
    color: black;
    display: flex;
    /*  برای وسط چین کردن ضروری است */
    align-items: center;
    /*  وسط چین کردن عمودی */
    justify-content: center;
    /*  وسط چین کردن افقی */
    border-radius: var(--raduis);
    /*  اعمال گردی گوشه ها */
    /*  اختیاری: اگر می خواهید کمی padding هم داشته باشد: */
    padding: 10px;
    /*  مقدار را به دلخواه تنظیم کنید */
}

.main-menu .navbar .btn-icon:hover {
    background-color: rgba(101, 179, 255, 0.3);
}

.main-menu .navbar .btn-text {
    color: var(--bs-nav-link-color) !important;
    padding: 4px 10px;
    border-radius: var(--raduis);
    /* added border-radius */

}

.main-menu .navbar .btn-text:hover {
    /*background-color: var(--primary-color--50); */
    color: white !important;
}

.main-menu .navbar .nav-item .dropdown-menu .dropdown-item {
    text-align: center;
}



/*  سبک های مربوط به بخش دکمه ها در منو */
.main-menu .navbar .button-container {
    background-color: rgba(157, 204, 255, 0.3) !important;
    border-radius: var(--raduis) !important;
    padding: 5px !important;
    display: flex !important;
    /* Make the container a flex container */
    align-items: center !important;
    /* Center items vertically */
    gap: 4px !important;
    position: relative;
    z-index: 0;
    /* Add some gap between buttons */
}



.login-btn {
    background-color: transparent !important;
    width: 70px !important;
    /* border: 1px solid black; */

}

.register-btn {
    color: white !important;
    /* background-color: transparent; */
    background-color: #ffffff00 !important;
    /* border: 1px solid black; */
    border: none;
    width: 70px !important;

}

.navbar-expand-lg .container {
    padding: 0 var(--main-menu-margin-first) !important;
}

.background-slide {
    position: absolute;
    width: 70px;
    /* اندازه بزرگ‌تر برای هر دو دکمه */
    height: 44px;
    background-color: #EBA607;
    border-radius: 0.5rem;
    right: 80px;
    top: 6px;
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0, -0.55, 0, 1);
}

.login-btn,
.register-btn {
    position: relative;
    z-index: 1;
}

.login-btn:hover {
    transition-delay: 50ms;
    color: white !important;
    background-color: #ffffff00 !important;
}

.login-btn:hover~.background-slide {
    /* transform: translateX(calc(74% + 1rem)); */
    transform: translateX(74px);
    /* width: 50px; */
    /* height: 45px; */
    /* right: 147px; */
    /* top: 2px; */
}

.login-btn:hover~.register-btn {
    transition-delay: 0.1s;
    background-color: #ffffff;
    border: none;
    color: black !important;
}

.register-btn:hover {
    background-color: transparent;
    border-color: #2563eb;
}