body
{
    box-sizing: border-box;
}
/* Grid-Sestem */
.grid > *
{
    color: rgb(0, 0, 0);
    padding: 20px;
    text-align: center;
}
.grid
{
    display: grid;
    grid-template: 100px 100px auto 500px / 1100px auto 200px;
    grid-gap: 0px 0px;
    overflow: hidden;
}
@font-face 
{
    font-family: 'bnazaninfont';
    src: url(Css/font/BNazanin.ttf), url(Css/font/BNazanin.woff), url(Css/font/BNazanin.woff2);
    font-weight: normal;
}
@font-face 
{
    font-family: 'bnazaninbdfont';
    src: url(Css/font/BNaznnBd.ttf), url(Css/font/BNazaninBd.woff), url(Css/font/BNazaninBd.woff2);
    font-weight: normal;
}
/* Heading */
h1, h5
{
    text-align: right;
    color: #000;
    font-family: bnazaninfont;
    font-size: 19px;
}
h2,h6
{
    color: #fff;
    font-size: 25px;
    font-family: bnazaninbdfont;
    font-weight: bolder;
    text-align: center;
    padding: 5px;
}
h3
{
    color: #df6118;
    font-size: 18px;
    text-align: right;
    font-family: bnazaninbdfont;
}
h4
{
    color: #000;
    font-size: 22px;
    text-align: right;
    font-family: bnazaninfont;
}
/* Meday Query */
@media screen and (min-width:993px) and (max-width:1200px) 
{
/* Responsive-Heading */
h1, h5
{
    width: 940px;
    font-size: 19px;
    font-weight: bolder;
}
h2, h6
{
    width: 420px;
    font-size: 19px;
    text-align: center;
}
h3
{
    width: 940px;
    text-align: right;
    font-size: 19px;
}
h4 
{
    width: 940px;
    font-size: 19px;
}
}
@media screen and (min-width:769px) and (max-width:992px) 
{
/* Responsive-Heading */
h1, h5
{
    width: 720px;
    font-size: 18px;
    font-weight: bolder;
}
h2, h6
{
    width: 350px;
    font-size: 18px;
    text-align: right;
}
h3
{
    width: 720px;
    font-size: 18px;
}
h4 
{
    width: 720px;
    font-size: 18px;
}
}
@media screen and (min-width:577px) and (max-width:768px) 
{
/* Responsive-Heading */
h1, h5
{
    width: 500px;
    font-size: 17px;
    font-weight: bolder;
}
h2, h6
{
    width: 240px;
    font-size: 17px;
    text-align: right;
}
h3
{
    width: 500px;
    font-size: 17px;
}
h4 
{
    width: 500px;
    font-size: 17px;
}
}
@media screen and (min-width:320px) and (max-width:576px) 
{
/* Responsive-Heading */
h1, h5
{
    width: 250px;
    font-size: 15px;
    font-weight: bolder;
}
h2, h6
{
    width: 170px;
    font-size: 15px;
    text-align: center;
}
h3
{
    width: 250px;
    font-size: 15px;
}
h4 
{
    width: 250px;
    font-size: 15px;
}
}