@font-face{
font-family:DastNevis;
src:url("../fonts/DastNevis-Regular.woff2");
}

html{
scroll-behavior:smooth;
}


body{
margin:0;
background:url("../images/paper.png");
font-family:DastNevis;
color:#222;
opacity:0.8;
font-size:24px;
line-height:1.8;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 120px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 120px;     /* اگر بزرگ یا کوچک بود، این را تغییر بده */
    width: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto; /* اگر SVGهای اطراف مزاحم شده باشد */
}



@keyframes draw{
from{width:0}
to{width:100%}
}

.page{
min-height:100vh;
padding:30px 0;
max-width:1100px;
margin:auto;
}

.section{
position:relative;
background:rgba(255,255,255,0.6);
padding:40px;
}

.section-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.section-border path{
stroke:#555;
stroke-width:3;
fill:none;
stroke-linecap:round;
}


.section-title{
margin-bottom:30px;
position:relative;
font-size:32px;
}



.section-title.draw::after{
width:120px;
}

#about {
    min-height: auto !important; 
    padding-bottom: 250px !important; /* می‌توانید این عدد را برای تنظیم دقیق فاصله پایین متن تغییر دهید */
}


.works{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.work-card{
border:2px solid #222;
padding:10px;
border-radius:10px 18px 12px 20px;
transition:.3s;
}

.work-card:hover{
transform:rotate(-1deg) scale(1.03);
}

.work-card img{
width:100%;
}

.services li{
margin:10px 0;
}

.sketch-btn{
position:relative;
background:none;
border:none;
padding:14px 36px;
font-family:DastNevis;
font-size:20px;
cursor:pointer;
text-decoration:none;
color:inherit;
display:inline-block;
}

.sketch-btn span{
position:relative;
z-index:2;
}

.btn-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.btn-border path{
stroke:#555;
stroke-width:2.5;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}


.sketch-btn:hover{
background:radial-gradient(
ellipse at center,
rgba(80,80,80,0.12) 0%,
rgba(80,80,80,0.06) 55%,
rgba(80,80,80,0) 70%
);
}

.contact-form{
display:flex;
flex-direction:column;
max-width:400px;
}

.contact-form input,
.contact-form textarea{
margin-bottom:15px;
padding:10px;
border:2px solid #222;
background:transparent;
font-family:DastNevis;
    border-radius: 20px 12px 15px 15px / 15px 15px 12px 20px;
    
    transition: transform 0.2s ease;
}

.sketch-line{
width:220px;
height:20px;
display:block;
margin-top:10px;
 transform: scaleX(-1);
}

.sketch-line path{
stroke:#444;
stroke-width:3;
fill:none;
stroke-linecap:round;

stroke-dasharray:300;
stroke-dashoffset:300;
transition:stroke-dashoffset 1s ease-out;
}

.sketch-line.draw path{
stroke-dashoffset:0;
}



.footer{
text-align:center;
padding:40px;
}


/* HERO */

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.hand-title{
font-size:46px;
margin-bottom:25px;

direction:rtl;
text-align:right;

white-space:nowrap;
overflow:hidden;

width:0;
border-left:3px solid #222;

animation:
typing 3s steps(30,end) forwards,
blink .8s step-end 3.7s 3;
}

@keyframes typing{
from{
width:0;
}
to{
width:32ch;
}
}

@keyframes blink{
50%{border-color:transparent;}
}
/* gemini*/
/* تنظیمات دکمه همبرگری */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
    transition: transform 0.3s;
}

.menu-toggle:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* ۱. کانتینر اصلی منو با ابعاد جدید شما */
.peel-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 450px; /* عرض طبق درخواست شما */
    height: 550px; /* ارتفاع طبق درخواست شما */
    z-index: 90;
    pointer-events: none;
    
    /* 
       شاه‌کلید حل مشکل: 
       سایه را به جای خودِ کاغذ، به کانتینر مادر می‌دهیم تا لبه‌های گرد را تشخیص دهد 
    */
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.15));
}

/* ۲. اصلاح محتوای زیرین */
.peel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdfaf3; /* رنگ استخوانی روشن */
    border-bottom-right-radius: 50px;
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ۳. قسمت تا خورده کاغذ با رنگ متمایل به زرد و لبه گرد */
.peel-fold {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    
    /* رنگ پشت کاغذ: کرم/زرد ملایم‌تر و طبیعی‌تر */
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #fbf7e9 40%, 
        #efe6c5 100%
    );
    
    /* لبه گرد که دوست داشتید */
    border-bottom-right-radius: 50px; 
    
    /* حذف box-shadow قدیمی که لبه تیز ایجاد می‌کرد */
    box-shadow: none; 
    
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

/* ۴. استایل لینک‌ها (تنظیم فاصله برای ارتفاع بیشتر) */
.peel-nav {
    position: absolute;
    top: 100px; /* کمی پایین‌تر آوردیم چون ارتفاع بیشتر شده */
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* فاصله بیشتر بین گزینه‌ها */
    opacity: 0;
    transition: all 0.4s ease;
}

/* =========================================
   حالت فعال (وقتی منو باز می‌شود)
========================================= */

.peel-menu.active {
    pointer-events: auto;
}

.peel-menu.active .peel-content {
    /* باز شدن کادر مثلثی محتوا */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.peel-menu.active .peel-fold {
    width: 450px;
    height: 550px;
    /* 
       استفاده از مختصات ۱۰۰٪؛ 
       چون سایه را با drop-shadow به کانتینر مادر دادیم، 
       دیگر لبه تیز نمی‌شود و گردی لبه کاملاً حفظ می‌شود.
    */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.peel-menu.active .peel-nav {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* استایل متن لینک‌های داخل منوی ورق‌خوردنی */
.peel-nav a {
    color: #222; /* رنگ مشکی/خاکستری تیره که با تم کاغذی همخوانی دارد */
    text-decoration: none; /* حذف خط زیر لینک */
    font-family: 'DastNevis', sans-serif; /* اطمینان از اعمال فونت دست‌نویس */
    transition: color 0.3s ease;
}

/* افکت ملایم هنگام رفتن موس روی لینک‌ها */
.peel-nav a:hover {
    color: #555; 
}

دکمه های همبرگری رفت سر جاش ولی لوگو هم چپ مونده باز فایل کامل css رو میفرستم:
@font-face{
font-family:DastNevis;
src:url("../fonts/DastNevis-Regular.woff2");
}

html{
scroll-behavior:smooth;
}


body{
margin:0;
background:url("../images/paper.png");
font-family:DastNevis;
color:#222;
opacity:0.8;
font-size:24px;
line-height:1.8;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 120px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 120px;     /* اگر بزرگ یا کوچک بود، این را تغییر بده */
    width: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto; /* اگر SVGهای اطراف مزاحم شده باشد */
}



@keyframes draw{
from{width:0}
to{width:100%}
}

.page{
min-height:100vh;
padding:80px 0;
max-width:1100px;
margin:auto;
}

.section{
position:relative;
background:rgba(255,255,255,0.6);
padding:40px;
}

.section-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.section-border path{
stroke:#555;
stroke-width:3;
fill:none;
stroke-linecap:round;
}


.section-title{
margin-bottom:30px;
position:relative;
font-size:32px;
}



.section-title.draw::after{
width:120px;
}

.works{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.work-card{
border:2px solid #222;
padding:10px;
border-radius:10px 18px 12px 20px;
transition:.3s;
}

.work-card:hover{
transform:rotate(-1deg) scale(1.03);
}

.work-card img{
width:100%;
}

.services li{
margin:10px 0;
}

.sketch-btn{
position:relative;
background:none;
border:none;
padding:14px 36px;
font-family:DastNevis;
font-size:20px;
cursor:pointer;
text-decoration:none;
color:inherit;
display:inline-block;
}

.sketch-btn span{
position:relative;
z-index:2;
}

.btn-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.btn-border path{
stroke:#555;
stroke-width:2.5;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}


.sketch-btn:hover{
background:radial-gradient(
ellipse at center,
rgba(80,80,80,0.12) 0%,
rgba(80,80,80,0.06) 55%,
rgba(80,80,80,0) 70%
);
}

.contact-form{
display:flex;
flex-direction:column;
max-width:400px;
}

.contact-form input,
.contact-form textarea{
margin-bottom:15px;
padding:10px;
border:2px solid #222;
background:transparent;
font-family:DastNevis;
}

.sketch-line{
width:220px;
height:20px;
display:block;
margin-top:10px;
}

.sketch-line path{
stroke:#444;
stroke-width:3;
fill:none;
stroke-linecap:round;

stroke-dasharray:300;
stroke-dashoffset:300;
transition:stroke-dashoffset 1s ease-out;
}

.sketch-line.draw path{
stroke-dashoffset:0;
}




/* HERO */

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.hand-title{
font-size:46px;
margin-bottom:25px;

direction:rtl;
text-align:right;

white-space:nowrap;
overflow:hidden;

width:0;
border-left:3px solid #222;

animation:
typing 3s steps(30,end) forwards,
blink .8s step-end 3.7s 3;
}

@keyframes typing{
from{
width:0;
}
to{
width:32ch;
}
}

@keyframes blink{
50%{border-color:transparent;}
}
/* gemini*/
/* تنظیمات دکمه همبرگری */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
    transition: transform 0.3s;
}

.menu-toggle:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* ۱. کانتینر اصلی منو با ابعاد جدید شما */
.peel-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 450px; /* عرض طبق درخواست شما */
    height: 550px; /* ارتفاع طبق درخواست شما */
    z-index: 90;
    pointer-events: none;
    
    /* 
       شاه‌کلید حل مشکل: 
       سایه را به جای خودِ کاغذ، به کانتینر مادر می‌دهیم تا لبه‌های گرد را تشخیص دهد 
    */
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.15));
}

/* ۲. اصلاح محتوای زیرین */
.peel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdfaf3; /* رنگ استخوانی روشن */
    border-bottom-right-radius: 50px;
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ۳. قسمت تا خورده کاغذ با رنگ متمایل به زرد و لبه گرد */
.peel-fold {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    
    /* رنگ پشت کاغذ: کرم/زرد ملایم‌تر و طبیعی‌تر */
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #fbf7e9 40%, 
        #efe6c5 100%
    );
    
    /* لبه گرد که دوست داشتید */
    border-bottom-right-radius: 50px; 
    
    /* حذف box-shadow قدیمی که لبه تیز ایجاد می‌کرد */
    box-shadow: none; 
    
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    
}

/* ۴. استایل لینک‌ها (تنظیم فاصله برای ارتفاع بیشتر) */
.peel-nav {
    position: absolute;
    top: 100px; /* کمی پایین‌تر آوردیم چون ارتفاع بیشتر شده */
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* فاصله بیشتر بین گزینه‌ها */
    opacity: 0;
    transition: all 0.4s ease;
}

/* =========================================
   حالت فعال (وقتی منو باز می‌شود)
========================================= */

.peel-menu.active {
    pointer-events: auto;
}

.peel-menu.active .peel-content {
    /* باز شدن کادر مثلثی محتوا */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.peel-menu.active .peel-fold {
    width: 450px;
    height: 550px;
    /* 
       استفاده از مختصات ۱۰۰٪؛ 
       چون سایه را با drop-shadow به کانتینر مادر دادیم، 
       دیگر لبه تیز نمی‌شود و گردی لبه کاملاً حفظ می‌شود.
    */
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.peel-menu.active .peel-nav {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* استایل متن لینک‌های داخل منوی ورق‌خوردنی */
.peel-nav a {
    color: #222; /* رنگ مشکی/خاکستری تیره که با تم کاغذی همخوانی دارد */
    text-decoration: none; /* حذف خط زیر لینک */
    font-family: 'DastNevis', sans-serif; /* اطمینان از اعمال فونت دست‌نویس */
    transition: color 0.3s ease;
}

/* افکت ملایم هنگام رفتن موس روی لینک‌ها */
.peel-nav a:hover {
    color: #555; 
}

دکمه های همبرگری رفت سر جاش ولی لوگو هم چپ مونده باز فایل کامل css رو میفرستم:
@font-face{
font-family:DastNevis;
src:url("../fonts/DastNevis-Regular.woff2");
}

html{
scroll-behavior:smooth;
}


body{
margin:0;
background:url("../images/paper.png");
font-family:DastNevis;
color:#222;
opacity:0.8;
font-size:24px;
line-height:1.8;
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 120px;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image {
    height: 120px;     /* اگر بزرگ یا کوچک بود، این را تغییر بده */
    width: auto;
    display: block;
    object-fit: contain;
    pointer-events: auto; /* اگر SVGهای اطراف مزاحم شده باشد */
}



@keyframes draw{
from{width:0}
to{width:100%}
}

.page{
min-height:100vh;
padding:80px 0;
max-width:1100px;
margin:auto;
}

.section{
position:relative;
background:rgba(255,255,255,0.6);
padding:40px;
}

.section-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.section-border path{
stroke:#555;
stroke-width:3;
fill:none;
stroke-linecap:round;
}


.section-title{
margin-bottom:30px;
position:relative;
font-size:32px;
}



.section-title.draw::after{
width:120px;
}

.works{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.work-card{
border:2px solid #222;
padding:10px;
border-radius:10px 18px 12px 20px;
transition:.3s;
}

.work-card:hover{
transform:rotate(-1deg) scale(1.03);
}

.work-card img{
width:100%;
}

.services li{
margin:10px 0;
}

.sketch-btn{
position:relative;
background:none;
border:none;
padding:14px 36px;
font-family:DastNevis;
font-size:20px;
cursor:pointer;
text-decoration:none;
color:inherit;
display:inline-block;
}

.sketch-btn span{
position:relative;
z-index:2;
}

.btn-border{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.btn-border path{
stroke:#555;
stroke-width:2.5;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}


.sketch-btn:hover{
background:radial-gradient(
ellipse at center,
rgba(80,80,80,0.12) 0%,
rgba(80,80,80,0.06) 55%,
rgba(80,80,80,0) 70%
);
}

.contact-form{
display:flex;
flex-direction:column;
max-width:400px;
}

.contact-form input,
.contact-form textarea{
margin-bottom:15px;
padding:10px;
border:2px solid #222;
background:transparent;
font-family:DastNevis;
}

.sketch-line{
width:220px;
height:20px;
display:block;
margin-top:10px;
}

.sketch-line path{
stroke:#444;
stroke-width:3;
fill:none;
stroke-linecap:round;

stroke-dasharray:300;
stroke-dashoffset:300;
transition:stroke-dashoffset 1s ease-out;
}

.sketch-line.draw path{
stroke-dashoffset:0;
}



/* HERO */

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.hand-title{
font-size:46px;
margin-bottom:25px;

direction:rtl;
text-align:right;

white-space:nowrap;
overflow:hidden;

width:0;
border-left:3px solid #222;

animation:
typing 3s steps(30,end) forwards,
blink .8s step-end 3.7s 3;
}

@keyframes typing{
from{
width:0;
}
to{
width:32ch;
}
}

@keyframes blink{
50%{border-color:transparent;}
}
/* gemini*/
/* تنظیمات دکمه همبرگری */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
    transition: transform 0.3s;
}

.menu-toggle:hover {
    transform: scale(1.1) rotate(-5deg);
}

/* ۱. کانتینر اصلی منو با ابعاد جدید شما */
.peel-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 450px; /* عرض طبق درخواست شما */
    height: 550px; /* ارتفاع طبق درخواست شما */
    z-index: 90;
    pointer-events: none;
    
    /* 
       شاه‌کلید حل مشکل: 
       سایه را به جای خودِ کاغذ، به کانتینر مادر می‌دهیم تا لبه‌های گرد را تشخیص دهد 
    */
    filter: drop-shadow(10px 10px 15px rgba(0,0,0,0.15));
}

/* ۲. اصلاح محتوای زیرین */
.peel-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdfaf3; /* رنگ استخوانی روشن */
    border-bottom-right-radius: 50px;
    clip-path: polygon(0 0, 0 0, 0 0);
    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ۳. قسمت تا خورده کاغذ با رنگ متمایل به زرد و لبه گرد */
.peel-fold {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    
    /* افکت سایه طبیعی: تیره (خط تا) -> روشن (برجستگی) -> تیره (نوک کاغذ) */
    background: linear-gradient(to bottom right, 
        rgba(0,0,0,0) 0%, 
        rgba(0,0,0,0) 45%, 
        rgba(0,0,0,0.3) 49.6%,  /* سایه ضخیم‌تر و ملایم‌تر */
        #8f8974 50%,            /* خط تای کاملاً شارپ */
        #e6e1d6 60%,   
        #b0a891 80%,   
        #9c9582 100%   
    ) !important;
    
    /* لبه گرد که دوست داشتید */
    border-bottom-right-radius: 50px; 
    
    /* حذف box-shadow قدیمی که لبه تیز ایجاد می‌کرد */
    box-shadow: none; 
    
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 10 !important; /* تغییر یافت */
    pointer-events: none; /* اضافه شد */
}

/* ۴. استایل لینک‌ها (تنظیم فاصله برای ارتفاع بیشتر) */
.peel-nav {
    position: absolute;
    top: 100px; /* کمی پایین‌تر آوردیم چون ارتفاع بیشتر شده */
    left: 50px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* فاصله بیشتر بین گزینه‌ها */
    opacity: 0;
    transition: all 0.4s ease;
}

/* =========================================
   حالت فعال (وقتی منو باز می‌شود)
========================================= */

.peel-menu.active {
    pointer-events: auto;
}

.peel-menu.active .peel-content {
    /* باز شدن کادر مثلثی محتوا */
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.peel-menu.active .peel-fold {
    width: 450px;
    height: 550px;
    /* 
       استفاده از مختصات ۱۰۰٪؛ 
       چون سایه را با drop-shadow به کانتینر مادر دادیم، 
       دیگر لبه تیز نمی‌شود و گردی لبه کاملاً حفظ می‌شود.
    */
   /* clip-path: polygon(100% 0, 100% 100%, 0 100%); */
}

.peel-menu.active .peel-nav {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* استایل متن لینک‌های داخل منوی ورق‌خوردنی */
.peel-nav a {
    color: #222; /* رنگ مشکی/خاکستری تیره که با تم کاغذی همخوانی دارد */
    text-decoration: none; /* حذف خط زیر لینک */
    font-family: 'DastNevis', sans-serif; /* اطمینان از اعمال فونت دست‌نویس */
    transition: color 0.3s ease;
}

/* افکت ملایم هنگام رفتن موس روی لینک‌ها */
.peel-nav a:hover {
    color: #555; 
}

/* =========================================
   کدهای ریسپانسیو نهایی (موبایل و تبلت)
========================================= */
@media (max-width: 768px) {
    
    /* ۱. تنظیم هدر: هل دادن لوگو به سمت راست */
    .header {
        padding: 20px !important;
        width: 100%;
        box-sizing: border-box;
        justify-content: flex-start !important; /* این دستور لوگو را کامل به راست می‌چسباند */
    }

    /* اصلاح سایز تصویر لوگو */
    .logo-image {
        height: 60px !important; 
        width: auto !important;
    }

    /* تنظیم جایگاه دکمه همبرگری (ثابت در سمت چپ) */
    .menu-toggle {
        position: fixed !important; 
        top: 30px !important;
        left: 20px !important; /* دکمه را در سمت چپ نگه می‌دارد */
        z-index: 100;
    }

    /* ۲. اصلاح عنوان هیرو برای جلوگیری از شکستن خط */
    .hand-title {
        font-size: 6.5vw !important; 
        white-space: nowrap !important; 
    }
    
    .hero-content p {
        font-size: 4.5vw !important;
    }

    /* ۳. ابعاد اختصاصی منوی ورق‌خوردنی در موبایل */
    .peel-menu {
        width: 370px !important; 
        height: 600px !important;
    }

    .peel-menu.active .peel-fold {
        width: 370px !important;
        height: 600px !important;
    }

    .peel-content {
        width: 100% !important;
        height: 100% !important;
    }

    .peel-nav {
        left: 25px !important; 
        top: 80px !important;
        gap: 20px !important; 
    }

    /* ۴. تک‌ستونه کردن پروژه‌ها در موبایل */
    .works {
        grid-template-columns: 1fr !important;
    }
   
       /* تنظیمات کادرِ دورِ عکس در موبایل */
    .hero-image-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 15px; /* کمی فاصله از چپ و راست صفحه */
        display: flex;
        justify-content: center; /* وسط چین کردن محتویات کادر */
        overflow: hidden; /* جلوگیری از بیرون زدن هرگونه محتوای اضافه */
    }

    /* تنظیمات خود عکس در موبایل */
    .hero-image {
        max-width: 100% !important;
        height: auto !important; /* حفظ تناسب عکس */
        display: block;
        margin: 0 auto;
    }

        /* تنظیم اختصاصی زاویه گرادیانت تاخوردگی برای موبایل */
    .peel-fold {
        background: linear-gradient(to bottom right, 
            rgba(0,0,0,0) 0%, 
            rgba(0,0,0,0) 45%, 
            rgba(0,0,0,0.3) 49.6%, 
            #8f8974 50%, 
            #e6e1d6 60%,   
            #b0a891 80%,   
            #9c9582 100%   
        ) !important;
    }
}

/* ۱. تعریف انیمیشن نور قرمز (Glow) */
@keyframes blinkRedGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
    50% {
        box-shadow: 0 0 15px 5px rgba(255, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
    
    /* faghat dore khatha
        0% { filter: drop-shadow(0 0 0px rgba(255, 0, 0, 0)); }
        50% { filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.9)); }
        100% { filter: drop-shadow(0 0 0px rgba(255, 0, 0, 0)); }
    */
}

/* ۲. اعمال انیمیشن به دکمه منوی همبرگری */
.menu-toggle { /* 🔴 نام کلاس دکمه منوی خود را به جای این قرار دهید */
    /* 
       توضیح مقادیر زیر به ترتیب:
       نام انیمیشن | زمان هر بار چشمک | نوع حرکت | تاخیر در شروع | تعداد تکرار
    */
    animation: blinkRedGlow 1s ease-in-out 0.5s 2;
    
    /* یک انحنای ملایم به کادر بدهید تا نور زیباتر پخش شود (اختیاری) */
    border-radius: 8px; 
}