@font-face {font-family: B Yekan;src: url("/fonts/BYekan.ttf") format("truetype")      ;}
@font-face {font-family: Yekan Bakh;src: url("/fonts/YekanBakh.ttf") format("truetype");}
@font-face {font-family: Tahoma;src: url("/fonts/Tahoma.ttf")  format("truetype")      ;}
@font-face {font-family: B Leyla;src: url("/fonts/BLeyla.ttf")  format("truetype")     ;}
@font-face {font-family: B Jadid;src: url("/fonts/BJadid.ttf") format("truetype")      ;}
@font-face {font-family: B Titr;src: url("/fonts/BTitr.ttf")   format("truetype")      ;}
@font-face {font-family: B Tabassom;src: url("/fonts/BTabassom.ttf") format("truetype");}
@font-face {font-family: B Shabnam;src: url("/fonts/Shabnam.ttf") format("truetype")   ;}
@font-face {font-family: Dastnevis;src: url("/fonts/Dastnevis.ttf") format("truetype") ;}
body{overflow-x: hidden;background-color: #1e293e;user-select: none;background-image: linear-gradient(to bottom,#fff, #1e293e, #fff);height:95.35vh;}
::-webkit-scrollbar {width:7px;background-color:#f0f0f0                        ;}
::-webkit-scrollbar-thumb{background-color: #8B0000                            ;}


.BaseDiv img{position: absolute;width: 770px;height: 575.0px;top: 185px;float: right;right: 50%;transform: translateX(50%);border-radius: 20.0px;animation-name:img;animation-duration: 1200ms;overflow: hidden;}
@keyframes img{
0%    {width: 0px ;height: 0px ;top: 470.0px;right:calc(50% + 96.0px);}
100%  {width:770px;height: 575.0px;top: 185.0px;right:50%;}}


.BaseDiv .image-top-bar {position: absolute;top: 180px;right: 50%;transform: translateX(50%);width: 770px;height: 4px;z-index: 100;overflow: hidden;pointer-events: none;border-radius: 20px 20px 0 0;}
.BaseDiv .image-top-bar::after {content: "";position: absolute;top: 0;left: -200px;width: 200px;height: 100%;background: linear-gradient(90deg,transparent 0%,rgba(234, 247, 119, 0.95) 50%, transparent 100%);animation: image-light-sweep 4s infinite linear;animation-delay: 3s;}
@keyframes image-light-sweep {
    0%   { left: -200px; opacity: 0; }
    5%   { opacity: 1; }
    15%  { opacity: 1; }
    20%  { left: 770px; opacity: 0; }
    100% { left: 770px; opacity: 0; }}
.BaseDiv .image-bottom-bar {position: absolute;top: 760px;right: 50%;transform: translateX(50%);width: 770px;height: 4px;z-index: 100;overflow: hidden;pointer-events: none;border-radius: 0 0 20px 20px;}
.BaseDiv .image-bottom-bar::after {content: "";position: absolute;top: 0;right: -200px;width: 200px;height: 100%;background: linear-gradient(270deg,transparent 0%,rgba(234, 247, 119, 0.95) 50%,transparent 100% );animation: image-light-sweep-reverse 4s infinite linear;animation-delay: 3s;}
@keyframes image-light-sweep-reverse {
    0%   { right: -200px; opacity: 0; }
    5%   { opacity: 1; }
    15%  { opacity: 1; }
    20%  { right: 770px; opacity: 0; }
    100% { right: 770px; opacity: 0; }}




/* ========= RIGHT BAR ========= */
.BaseDiv .image-right-bar {position: absolute;top: 180px;right: calc(50% - 390px);width: 4px;height: 580px;z-index: 100;overflow: hidden; pointer-events: none;border-radius: 0 20px 20px 0;}
.BaseDiv .image-right-bar::after {content: "";position: absolute;top: -200px;left: 0;width: 100%;height: 200px;background: linear-gradient(180deg,transparent 0%,rgba(234, 247, 119, 0.95) 50%,transparent 100%); animation: image-light-sweep-right 4s infinite linear; animation-delay: 3s;}
/* ========= LEFT BAR ========= */
.BaseDiv .image-left-bar {position: absolute;top: 180px;right: calc(50% + 390px - 4px);width: 4px;height: 580px;z-index: 100;overflow: hidden;pointer-events: none;border-radius: 20px 0 0 20px;}
.BaseDiv .image-left-bar::after {content: "";position: absolute;bottom: -200px;left: 0;width: 100%;height: 200px;background: linear-gradient(0deg, transparent 0%, rgba(234, 247, 119, 0.95) 50%,transparent 100%);animation: image-light-sweep-left 4s infinite linear; animation-delay: 3s;}

/* ========= ANIMATIONS ========= */
/* راست: بالا به پایین - بعد از افقی‌ها، در 20 تا 40 درصد */
@keyframes image-light-sweep-right {
    0%   { top: -200px; opacity: 0; }
    20%  { top: -200px; opacity: 0; }
    25%  { opacity: 1; }
    35%  { opacity: 1; }
    40%  { top: 580px; opacity: 0; }
    100% { top: 580px; opacity: 0; }}

/* چپ: پایین به بالا - بعد از افقی‌ها، در 20 تا 40 درصد */
@keyframes image-light-sweep-left {
    0%   { bottom: -200px; opacity: 0; }
    20%  { bottom: -200px; opacity: 0; }
    25%  { opacity: 1; }
    35%  { opacity: 1; }
    40%  { bottom: 580px; opacity: 0; }
    100% { bottom: 580px; opacity: 0; }}



.brand-block {position: absolute;color: #777;border: 1px solid transparent;top: 2px;width: 98%;height: 900px;float: right;right: 50%;transform: translateX(50%);animation-name:brand_block;animation-duration: 2500ms;opacity: 1;}
@keyframes brand_block { 0% {opacity: 0;}   100% {opacity: 1;}}
.brand-block h1 {position: absolute;font-size: 40px;font-family: 'B Jadid';color: #298ef2;border: 1px solid transparent;width: 100%;text-align: center;top: 4px;letter-spacing: 1px;word-spacing: 1px;}
.brand-block h2 {position: absolute; font-size: 20px; font-weight: normal;width: 100%;font-family: 'Yekan Bakh';text-align: center;border: 1px solid transparent;top: 65px;color: #FF8C00;}
.brand-block p{position: absolute;float: right;right: 50%;transform: translateX(50%);font-family: 'Yekan Bakh';top: 110px;color: #00008B;word-spacing: 2px;}
.brand-block h3 {position: absolute;font-size: 35px;font-family: 'B Jadid';color: #298ef2;border: 1px solid transparent;width: 100%;text-align: center;top: 730px;}
.brand-block h4 {position: absolute; font-size: 20px; font-weight: normal;width: 100%;font-family: 'Yekan Bakh';font-weight: 1; text-align: center;border: 1px solid transparent;
                 top: 785px;color: #FF8C00;}
.brand-block h5 {position: absolute;float: right;right: 50%;transform: translateX(50%);font-family: 'Yekan Bakh';font-weight: 1;top: 810px;color: #00008B;font-size: 20px;text-align: left;direction: ltr;}


.BaseDiv #waitimg{position:absolute;width:120px;height:120px;top:520px;right:50%;text-align:center;opacity:0;animation:waitimg 300ms ease-in-out 1500ms forwards;}
@keyframes waitimg {
0%{opacity:0;transform:translate(-220px,20px) scale(0);}
100%{opacity:1;transform:translate(-220px,20px) scale(1);}}









.sound-toggle-btn{
    width:65px;
    height:65px;
    border-radius:50%;
    border:2px solid #8B0000;
    background:#8B0000;
    position:fixed;
    left:30px;
    bottom:-120px;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    animation:toggle_btn 500ms ease-in-out 3000ms forwards;
    transition:transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

@keyframes toggle_btn {
    0%{
        opacity:0;
        bottom:-120px;
    }
    100%{
        opacity:1;
        bottom:30px;
    }
}

.sound-toggle-btn:hover{
    transform:scale(1.08);
    box-shadow:0 0 18px rgba(139,0,0,0.45);
}

.sound-toggle-btn:active{
    transform:scale(0.96);
}

.sound-toggle-btn .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}

.sound-toggle-btn .icon svg{
    width:28px;
    height:28px;
    fill:#fff;
    display:none;
}

.sound-toggle-btn .icon .icon-play{
    display:block;
}

.sound-toggle-btn.is-playing .icon .icon-play{
    display:none;
}

.sound-toggle-btn.is-playing .icon .icon-pause{
    display:block;
}


















@media screen and (max-width: 768px) {
body{height:80.0vh;}
.BaseDiv img{width: 320px;height: 225px;top: 155.0px;}
@keyframes img{
0%    {width: 0px ;height: 0px ;top: 300px;right:calc(50% + 40.0px);}
100%  {width: 320px;height: 225px;top: 155px;}}


.BaseDiv #waitimg{width:50px;height:50px;top:320px;border-radius: 2px;}
@keyframes waitimg {
0%{opacity:0;transform:translate(-90px, -25px) scale(0);}
100%{opacity:1;transform:translate(-90px, -25px) scale(1);}}


.BaseDiv .image-top-bar { width: 320px; top: 152px; height: 2px;}
.BaseDiv .image-bottom-bar { width: 320px; top: 381px; height: 2px;}
 @keyframes image-light-sweep {
        0%   { left: -200px; opacity: 0; }
        5%   { opacity: 1; }
        20%  { opacity: 1; }
        25%  { left: 320px; opacity: 0; }
        100% { left: 320px; opacity: 0; }}

@keyframes image-light-sweep-reverse {
        0%   { right: -200px; opacity: 0; }
        5%   { opacity: 1; }
        20%  { opacity: 1; }
        25%  { right: 320px; opacity: 0; }
        100% { right: 320px; opacity: 0; }}

.BaseDiv .image-right-bar { width: 2px; right: 50%;right:calc(50% - 162px); height: 320px;top: 152px;}
.BaseDiv .image-left-bar  { width: 2px; right: 50%;right:calc(50% + 162px); height: 320px;top: 152px;}
@keyframes image-light-sweep-right {
    0%   { top: -150px; opacity: 0; height: 0;}
    20%  { top: -150px; opacity: 0; }
    25%  { opacity: 1; }
    35%  { opacity: 1; }
    40%  { top: 152px; opacity: 0; }
    100% { top: 152px; opacity: 0; height: 320px;}}

@keyframes image-light-sweep-left {
    0%   { bottom: 85px; opacity: 0; height: 0;}
    20%  { bottom: 85px; opacity: 0; }
    25%  { opacity: 1; }
    35%  { opacity: 1; }
    40%  { bottom: 225px; opacity: 0; }
    100% { bottom: 225px; opacity: 0; height: 320px;}}






.brand-block h1 {font-size: 25px;}
.brand-block h2 { font-size: 12px;top: 42px;}
.brand-block p{font-size: 8px;top: 68px;text-align: justify;letter-spacing: 1px;word-spacing: 1px;}
.brand-block h3 {font-size: 25px; top: 380px;}
.brand-block h4 { font-size: 12px;top: 425px;}
.brand-block h5 { font-size: 10px;top: 445px;width: 310px;}














  .sound-toggle-btn {width: 55px;height: 55px;left: 15px; bottom: -60px; } 
  .sound-toggle-btn:hover {width: 55px;height: 55px;left: 15px; bottom: 15px; } 
  .sound-toggle-btn:active {width: 51px;height: 51px;left: 17px; bottom: 17px; } 
  #soundToggleIcon {font-size: 25px; }












 }