@font-face {
    font-family: BRay;
    src: url(../../fonts/Ray-Black.ttf);
}

@font-face {
    font-family: Ray;
    src: url(../../fonts/Ray-ExtraBold.ttf);
}

body * {
    font-family: Ray;
}

.rtl {
    direction: rtl;
}

.text-justify {
    text-align: justify;
}

#Menu a {
    font-family: BRay;
    position: relative;
    display: block;
    text-align: center;
    background-color: rgb(251, 186, 0);
    border-radius: 0 15px 0 15px;
    border: none;
    padding: 2px;
    color: #000000;
    text-decoration: none;
}

#HMenu a {
    font-family: BRay;
    position: relative;
    display: block;
    text-align: center;
    background-color: rgb(251, 186, 0);
    border-radius: 0 15px 0 15px;
    border: none;
    padding: 2px;
    color: #000000;
    text-decoration: none;
}

#Menu a:hover {
    color: rgb(235, 236, 236);
    text-shadow: 0px 0px 2px #000000;
}

#Menu a.active {
    background-color: rgb(255, 243, 131);
}

#HMenu a:hover {
    color: rgb(235, 236, 236);
    text-shadow: 0px 0px 2px #000000;
}

#HMenu a.active {
    background-color: rgb(255, 243, 131);
}

#Content_Row {
    width: 80%;
    margin-left: 10%;
    overflow-y: auto;
    z-index: 3;
    position: relative;
    height: 80%;
}


@media all and (min-width: 992px) {

    /* Desktop */
    #Content {
        width: 84%;
        height: 90vh;
        top: 5vh;
        right: 0;
        border-radius: 50px 0 0 50px;
    }

    #Content_Row {
        margin-top: 180px;
    }

    #UpLeft {
        width: 20vw;
    }

    #DownRight {
        width: 11vw;
    }

    #LogoPosition {
        top: 5vw;
        left: 3vw;
    }

    #Logo {
        width: 11vw;
    }

    #Line {
        width: 66vw;
        right: 9%;
        bottom: 11vh;
    }

    #Footer {
        bottom: 7vh;
        right: 5%;
        width: 75%;
    }

    #Main {
        height: calc(85vh - 22vw);
        width: 87%;
        padding-left: 10vw;
        margin-top: 3vh;
        float: right;
    }

    #BG {
        width: 84%;
        height: 80%;
        top: 5vh;
        right: 0;
        border-radius: 50px 0 0 50px;
    }

    #MainBG {
        border-top-left-radius: 50px 15%;
        padding-right: 0;
    }

    #Menu {
        margin-top: 100px;
        padding-left: 40%;
        z-index: 2;
    }

    #Menu a {
        width: 180px;
        margin-bottom: 18px;
    }

    #HMenu {
        margin-top: 100px;
        padding-left: 40%;
        z-index: 2;
    }

    #HMenu a {
        width: 180px;
        margin-bottom: 18px;
    }

}

@media all and (max-width: 991px) {

    /* Mobile */
    #Content {
        width: 70%;
        top: 22vw;
        right: 0;
        border-radius: 25px 0 0 25px;
        height: calc(94vh - 23vw);
    }

    #Content_Row {
        margin-top: 10px;
    }

    #UpLeft {
        width: 30vw;
    }

    #DownRight {
        width: 21vw;
    }

    #LogoPosition {
        top: 1vw;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    #Logo {
        width: 20vw;
    }

    #Line {
        width: 54vw;
        right: 8%;
        bottom: 15vh;
    }

    #Footer {
        bottom: 7.5vh;
        right: 5%;
        width: 63%;
    }

    #Main {
        height: calc(70vh - 30vw);
        width: 85%;
        padding-left: 10vw;
        margin-top: 3vh;
    }

    #BG {
        width: 70%;
        height: 30%;
        top: 22vw;
        border-radius: 25px 0 0 25px;
        right: 0;
    }

    #MainBG {
        border-top-left-radius: 25px 10%;
        padding-right: 0;
    }

    #Menu {
        margin-top: 42vw;
        padding-right: 18vw;
        z-index: 2;
    }

    #HMenu {
        margin-top: 27vw;
        padding-right: 18vw;
        z-index: 2;
    }

    #Menu a {
        left: -15vw;
        width: 140px;
        margin-bottom: 10px;
    }

    #HMenu a {
        left: -15vw;
        width: 140px;
        margin-bottom: 10px;
    }
}

@media all and (max-width: 660px) {

    #Footer {
        font-size: smaller;
    }

    #Main {
        font-size: smaller;
        height: calc(75vh - 30vw);
        width: 85%;
        padding-left: 10vw;
    }

    #Menu a {
        left: -15vw;
        width: 110px;
        margin-bottom: 8px;
        font-size: smaller;
    }

    #HMenu a {
        left: -15vw;
        width: 110px;
        margin-bottom: 8px;
        font-size: smaller;
    }

    #MainBG {
        border-top-left-radius: 25px 15%;
    }
}

@media all and (max-width: 510px) {
    #Footer {
        font-size: x-small;
    }

    #Main {
        font-size: x-small;
        height: calc(77vh - 30vw);
        width: 85%;
        padding-right: 10vw;
    }

    #Menu a {
        left: -17vw;
        width: 100px;
        font-size: x-small;
    }

    #HMenu a {
        left: -17vw;
        width: 100px;
        font-size: x-small;
    }

    #MainBG {
        border-top-left-radius: 25px 20%;
    }
}

@media all and (max-width: 400px) {
    #Footer {
        font-size: xx-small;
    }

    #Map,
    #Social {
        height: 15px;
    }

    #Main {
        font-size: xx-small;
        height: calc(75vh - 30vw);
    }

    #Line {
        bottom: 17vh;
    }

    #Menu a {
        left: -20vw;
        width: 90px;
        font-size: xx-small;
    }

    #HMenu a {
        left: -20vw;
        width: 90px;
        font-size: xx-small;
    }

    #MainBG {
        border-top-left-radius: 25px 25%;
    }
}