* {
    box-sizing: border-box; /*اگر یک باکس صد پیکسل در صد پیکسل طراحی کنیم و به آن ده پیکسل پدینگ برای متن داخل باکس اعمال کنیم 
        ابعاد آن باکس صد و ده پیکسل خواهد شد برای اینکه این مشکل را حل کنیم و پدینگ از داخل باکس  اعمال شود 
        از این دستور استفاده میکنیم تا باکس همان صد پیکسل بماند و پدینگ از داخل باکس اعمال شود و دیگر به ابعاد 
        باکس اضافه نخواهد شد
    */
}
/*-------------------------------------------------------------------------------------*/
body {
    width: 100vw; /*صفحه واکنشگرا از صد در صد صفحه استفاده میکنیم*/
    height: 100%; /*صفحه واکنشگرا از صد در صد صفحه استفاده میکنیم*/
    /*background-color: #ffffff; /*رنگ زمینه سایت*/
    margin: 0px; /*فاصله بدنه اصلی از صفحه وب نمایشگر*/
    background-image: url("../Image/background1.jpg"); /*عکس زمینه اصلی که تمام المانها  روی آن قرار میگیرند*/
    background-repeat: no-repeat; /*عکس تکرار نشود*/
    background-size:  cover; /*تمام صفحه وب توسط عکس پوشش داده شود*/
    font-weight:bold;
    font-style:italic;
}
/*-------------------------------------------------------------------------------------*/
img { /*تصویر بنر*/
    display: flex;
    margin: 0 auto; /* وسط‌چین افقی */
    width: 95%;
    height: auto;
    box-shadow: 0.5vw 0.5vh 5px #000000d9; /*  سایه حول محور ایکس پنج دهم در صد پهنا و حول محور وای  پنج دهم درصد ارتفاع و پنج پیکسل مرز مبهم سایه دارد*/
}
/*-------------------------------------------------------------------------------------*/
@font-face {
    font-family: BTraffic; /*اضافه کردن فونت جدید*/
    src: url("../Font/BTraffic.ttf"); /*آدرس فونت */
}
/*-------------------------------------------------------------------------------------*/
.Container-Main{
    z-index: 1; /*سایت در لایه دوم قرار بگیرد چون لایه اول فیلم زمینه است*/
    font-family: BTraffic;
    font-size: 30px; /*اندازه فونت */
    font-weight: bold;
    text-align: center;
    margin: auto;
    align-items:center;
}
/*-------------------------------------------------------------------------------------*/
@keyframes Rotation1 { /*انیمیشن بنر*/
    0% {
        transform: rotateY(0deg); /* چرخش 0 درجه */
        opacity: 0; /*شفافیت بین صفر تا یک است*/
    }

    100% {
        transform: rotateY(360deg); /* چرخش 360 درجه */
        opacity: 1;
    }
}

.Animation_Banner1 {
    animation-name: Rotation1; /*نام انیمیشن */
    animation-duration: 3s; /*مدت زمان انیمیشن*/
}

h1 {
    font-family: BTraffic; /*فونت اچ وان بی ترافیک است*/
    text-align: center; /*متن در مرکز صفحه قرار گیرد*/
    animation-name: Rotation1;
    animation-duration: 3s;
    text-shadow: 0.5vw 0.5vh 5px #000000d9; /*  سایه حول محور ایکس پنج دهم در صد پهنا و حول محور وای  پنج دهم درصد ارتفاع و پنج پیکسل مرز مبهم سایه دارد*/
}
/*-------------------------------------------------------------------------------------*/
@keyframes Opacity1 { /*انیمیشن شفافیت*/
    0% {
        transform: scale(0); /*مقیاس بین صفر تا یک است*/
        opacity: 0; /*شفافیت بین صفر تا یک است*/
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}
    .Button_Opacity {
        animation-name: Opacity1; /*نام انیمیشن */
        animation-duration: 3s; /*مدت زمان انیمیشن*/
    }

    .Product_Opacity {
        animation-name: Opacity1; /*نام انیمیشن */
        animation-duration: 3s; /*مدت زمان انیمیشن*/
    }
/*-------------------------------------------------------------------------------------*/
.Button_Background_Blue {
    background-color: rgba(135, 137, 250,0);
}

    .Button_Background_Blue:hover {/*با حرکت موس بر روی باتن رنگ آن تغییر میکند*/
        background-color: rgba(135, 137, 250,0.5);
    }
/*-------------------------------------------------------------------------------------*/

.Button_Beauti {
    border-color: rgb(26, 51, 255, 0.6);
    border-width: 3px;
    box-shadow: 0.16vw  0.16vh 5px #605d5d; /*  سایه حول محور ایکس شانزده در صد پهنا و حول محور وای  شانزده درصد ارتفاع و پنج پیکسل مرز مبهم سایه دارد*/
    opacity: 1; /*شفافیت بین صفر تا یک است*/
    Height: 43px;
    Width: 335px;
    border-radius: 5px; /*گرد کردن گوشه مربع به اندازه پنج پیکسل*/
    color: rgba(0, 38, 255,1);
    border-style: solid;
    font-size: 25px;
    margin-bottom: 2px;
    margin-top: 1px;
    /*margin: 10px;*/
    /*background-image:url("../img1/background1.jpg");*/
}

    .Button_Beauti:hover { /*با حرکت موس بر روی باتن شفافیت آن تغییر میکند*/
        opacity: 0.6;
    }
/*-------------------------------------------------------------------------------------*/
.Textbox_Beauti {
    border-color: rgb(26, 51, 255, 0.6);
    border-width: 3px;
    background-color: rgba(255,235,162,0);
    border-radius: 5px; /*گرد کردن گوشه*/
    font-size: 30px;
    color: rgba(0, 38, 255,1);
    border-style: solid; /*تک رنگ شدن بردار تکس باکس */
    height: 43px;
    width: 200px;
}
/*-------------------------------------------------------------------------------------*/
.Label_Beauti {
    direction: rtl; /* جهت متن را راست به چپ تنظیم می‌کند */
    text-align: right; /* متن را از سمت راست تراز می‌کند */
    display: block; /* برای اطمینان از اینکه تراز متن به درستی اعمال می‌شود */
    height: 40px;
    border-radius: 5px; /*گرد کردن گوشه*/
    font-size: 24px;
    color: rgba(0, 38, 255, 1);
    text-align: center; /*تراز کردن جملات در کل خط  */
    
}
/*-------------------------------------------------------------------------------------*/
.Video-Background {
    top: 0; /* محل قرار گرفتن فیلم زمینه از گوشه بالا 0 باشه */
    left: 0; /* محل قرار گرفتن فیلم زمینه از گوشه چپ 0 باشه */
    min-height: 100%; /*حداقل ارتفاع فیلم*/
    min-width: 100%; /*حداقل عرض فیلم*/
    position: fixed;
    z-index: -1; /*فیلم در لایه اول در زمینه همه عناصر سایت قرار بگیرد*/
    background-size: cover; /*پوشش کل صفحه توسط فیلم زمینه*/
}
/*-------------------------------------------------------------------------------------*/
.Container-Product {
    display: flex;/*جاگذاری انعطاف پذیری آیتم ها در سطر*/
    flex-wrap: wrap;/*  هر چه بتواند آیتم ها  در سطر  قرار میدهد و بقیه را در سطر بعدی  قرار میدهد */ 
    flex-direction: row;/*محتوا به صورت سطری قرار گیرند*/
    justify-content: center; /*در راستای افق محتوا در وسط قرار گیرد*/
    align-items: center; /*در راستای ارتفاع محتوا در وسط قرار گیرد*/
}
/*-------------------------------------------------------------------------------------*/
.Box {
    margin: 10px;
    width: 320px;
    height: 200px;
    color: #000000;
    box-shadow: 0.5vw 0.5vh 5px #000000d9; /*  سایه حول محور ایکس پنج دهم در صد پهنا و حول محور وای  پنج دهم درصد ارتفاع و پنج پیکسل مرز مبهم سایه دارد*/
}

.Red {
    background-color: red;
}

.Green {
    background-color: green;
}

.Blue {
    background-color: blue;
}

.Yellow {
    background-color: yellow;
}
/*-------------------------------------------------------------------------------------*/
.CopyRight {
    font-size: smaller;
    justify-content: center; /*در راستای افق محتوا در وسط قرار گیرد*/
    text-align: center; /*در راستای ارتفاع محتوا در وسط قرار گیرد*/
}

.Animation_CopyRight {
    animation-name: Opacity1; /*نام انیمیشن */
    animation-duration: 9s; /*مدت زمان انیمیشن*/
}
/*-------------------------------------------------------------------------------------*/
.Menu {
    background-color: burlywood;
    color: brown;
    border-radius: 5px; /*گرد کردن گوشه*/
}