html { scroll-behavior: smooth; }

@font-face {
    font-family: "Doran";
    src: url("../fonts/Doran-Medium.otf");
}

@font-face {
    font-family: "ABC";
    src: url("../fonts/Neometric-Medium.otf");
}
@font-face {
    font-family: "estedad-medium";
    src: url("../fonts/estedad/Estedad-Regular.ttf");
}
@font-face {
    font-family: "estedad-bold";
    src: url("../fonts/estedad/Estedad-bold.ttf");
}


@font-face {
    font-family: "Doran-Bold";
    src: url("../fonts/Doran-Bold.ttf");
}
p{
    font-family: Doran, serif;
}
aside {
    background-color: #facc15; /* زرد Tailwind (yellow-400) */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    overflow: hidden;
}
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
    animation: fadeSlideDown 0.5s ease;
    padding-right: 20px;
    padding-left: 15px;
    font-family: Doran, serif;
    font-size: 12px;
}
.sticky-header img{
    float: left;
    margin-top: 3px;
    height: 12px;
    width: auto;
}

/* منوی سمت راست: ظاهر پایه */
.menu-btn {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}
/* وقتی فعال شد: پس‌زمینه قهوه‌ای و آیکون سفید */
.menu-btn.active {
    background-color: #e9a100 !important;
}

/* فاصلهٔ بالای محتوا (اندازه هدر) */
:root { --header-height: 180px; }

/* Ripple Effect */
.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.5);
    animation: ripple 0.6s linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes ripple {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes fadeSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar زیبا */
#menuScroll::-webkit-scrollbar {
    width: 5px;
}
#menuScroll::-webkit-scrollbar-thumb {
    background: #c0a97a;
    border-radius: 10px;
}

section{
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.37) 0%, rgba(255, 255, 255, 0.63) 20%, rgba(255, 255, 255, 0.96) 100%) , url("../img/Dozham-pattern.png");    background-size: contain;

}


.title-container{
    width: 100%;
    direction: ltr;
    padding-left: 30px;
}

.video{
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.menu-btn img{
    padding: 10px;
}

.text-small{
    font-size: 13px;
}

.border-b{
    padding-right:35px !important;
    padding-left:45px !important;
}

.border-b img{
    width: 55px;
    height: auto;
}

.en-title{
    font-family: "estedad-medium", serif;
    font-size: 11px !important;
}

.price-text p{
    font-family: "estedad-bold", serif;
    font-weight: bold;
    font-size: 13px !important;
}

.price-text{
    font-family: "estedad-bold", serif;
    font-weight: bold;
    font-size: 13px !important;
}

.fa-title{
    font-size: 14px;
}