body {
    background-image: url("../Pictures/bg.jpg");
    background-color: #FFFFFF;
}

@media screen and (min-width: 1280px) and (max-width: 1920px) {

    img {
        width: 100%;
        height: auto;
    }

    #ImageButton1,
    #ImageButton2,
    #ImageButton3,
    #ImageButton4,
    #ImageButton5,
    #ImageButton6,
    #ImageButton7,
    #ImageButton8,
    #ImageButton9,
    #ImageButton10,
    #ImageButton11 {
        width: auto;
        height: auto;
    }

    #top_banner {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    #nid {
        display: inline-block;
        width: 100%;
        height: auto;
        background-color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        color: #006699;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prim_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prep_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #sec_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #footer {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 1.25vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .icons {
        color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        background-color: #006699;
        font-size: xx-large;
        text-align: center;
        font-weight: bold;
    }

    table {
        direction: rtl;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    td {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    img {
        width: 100%;
        height: auto;
    }

    #ImageButton1,
    #ImageButton2,
    #ImageButton3,
    #ImageButton4,
    #ImageButton5,
    #ImageButton6,
    #ImageButton7,
    #ImageButton8,
    #ImageButton9,
    #ImageButton10,
    #ImageButton11 {
        width: auto;
        height: auto;
    }

    #top_banner {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    #nid {
        display: inline-block;
        width: 100%;
        height: auto;
        background-color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        color: #006699;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prim_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prep_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #sec_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 2.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #footer {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 1.25vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .icons {
        color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        background-color: #006699;
        font-size: xx-large;
        text-align: center;
        font-weight: bold;
    }

    table {
        direction: rtl;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    td {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    img {
        width: 100%;
        height: auto;
    }

    #ImageButton1,
    #ImageButton2,
    #ImageButton3,
    #ImageButton4,
    #ImageButton5,
    #ImageButton6,
    #ImageButton7,
    #ImageButton8,
    #ImageButton9,
    #ImageButton10,
    #ImageButton11 {
        width: auto;
        height: auto;
    }

    #top_banner {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    #nid {
        display: inline-block;
        width: 100%;
        height: auto;
        background-color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        font-size: 3vw;
        color: #006699;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prim_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prep_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #sec_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #footer {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 1.25vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .icons {
        color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        background-color: #006699;
        font-size: xx-large;
        text-align: center;
        font-weight: bold;
    }

    table {
        direction: rtl;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    td {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    img {
        width: 100%;
        height: auto;
    }

    #ImageButton1,
    #ImageButton2,
    #ImageButton3,
    #ImageButton4,
    #ImageButton5,
    #ImageButton6,
    #ImageButton7,
    #ImageButton8,
    #ImageButton9,
    #ImageButton10,
    #ImageButton11 {
        width: auto;
        height: auto;
    }

    #top_banner {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    #nid {
        display: inline-block;
        width: 100%;
        height: auto;
        background-color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        font-size: 3.5vw;
        color: #006699;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prim_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prep_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #sec_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 3.5vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #footer {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 1.25vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .icons {
        color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        background-color: #006699;
        font-size: xx-large;
        text-align: center;
        font-weight: bold;
    }

    table {
        direction: rtl;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    td {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
}

@media screen and (max-width: 480px) {
    img {
        width: 100%;
        height: auto;
    }

    #ImageButton1,
    #ImageButton2,
    #ImageButton3,
    #ImageButton4,
    #ImageButton5,
    #ImageButton6,
    #ImageButton7,
    #ImageButton8,
    #ImageButton10,
    #ImageButton11 {
        width: 80%;
        height: 80%;
    }

    #ImageButton9 {
        width: 40%;
        height: 40%;
    }

    #top_banner {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    #nid {
        display: inline-block;
        width: 100%;
        height: auto;
        background-color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        font-size: 4vw;
        color: #006699;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prim_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 4vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #prep_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 4vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #sec_stage {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 4vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    #footer {
        display: inline-block;
        width: 100%;
        height: auto;
        font-family: 'Tajawal', sans-serif;
        font-size: 1.25vw;
        background-color: #006699;
        color: #cfccff;
        text-align: center;
        margin-top: auto;
        margin-bottom: auto;
    }

    .icons {
        color: #cfccff;
        font-family: 'Tajawal', sans-serif;
        background-color: #006699;
        font-size: xx-large;
        text-align: center;
        font-weight: bold;
    }

    table {
        direction: rtl;
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        border: 1px solid #ddd;
    }

    td {
        text-align: center;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #f2f2f2
    }
}