@font-face {
    font-family: 'al_qalam_quran_majeedregular';
    src: url('/fonts/al_qalam_quran_majeed-webfont.woff2') format('woff2'),
    url('/fonts/al_qalam_quran_majeed-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;


}

body {
    font-family: 'Open Sans', Arial, sans-serif;;
    font-size:20px;
    color:#1B2740;
}

.al-bold{
    font-weight: bold;
}



/*--------------------Layout Panel-------------------*/

.al-layout{
    display: grid;
    grid-template-rows:85px auto;
    grid-row-gap: 30px;
}

.al-header {
    display: grid;
    grid-template-columns: 33.333333% 33.333333% 33.333333%  ;
    align-items: center;
    z-index: 1006;
}

#al-menu-icon {
    justify-self: left;
    padding: 23px 30px;
}
.al-logo {
    justify-self: center;
}


/*--------------------Letter Panel-------------------*/

.al-letter{
    display: grid;
    width: 75vw;
    padding-left: 12.5vw;
    grid-template-rows: 10%  auto auto 30%;
    grid-row-gap: 30px;
}

.al-name{
    display: grid;
    grid-template-columns: 40% 20% 40%;
    font-size: 100px;
    font-weight: bold;
    padding-bottom: 50px;
}

.al-name-dmg{
    text-align: right;
}

.al-connect{
    text-align: center;
}

.al-name-arabic{
    text-align: left;
}
.al-spelling{
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: 18px;
    text-align: center;
}

.al-spelling-normal {
    display: grid;
    grid-template-rows: auto auto;
}
.al-spelling-dmg{
    display: grid;
    grid-template-rows: auto auto;
}

.al-spelling-arabic{
    font-size: 100px;

}

.al-spelling-panel {
    display: grid;
    grid-template-rows:auto auto auto;
    grid-row-gap: 30px;
    padding-bottom: 200px;
}

.al-spelling-box {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    text-align: center;

}

.al-spelling-box-arabic{
    font-size: 100px;
}

.al-description {
    text-align: justify;
    display: grid;
    grid-template-rows:auto auto;
    grid-row-gap: 30px;

}

.al-spelling-dmg>.al-bold + div {
    font-size: 100px;
}