@font-face {
    font-family: 'main_font';
    src: url('../fonts/Cairo-VariableFont_wght.ttf') format('truetype');
}
.body {
    font-family: 'main_font';
    src: url('../fonts/Cairo-VariableFont_wght.ttf') format('truetype');
    margin:0;
    padding:0;
}
.container {
    width: 100%; /* عرض الصفحة بالكامل */
    align-content: center;
}
.image-slider {
    width: 100%;
    height: 650px;
    background-image: url('Img_img/1.jpg');
    background-size: cover;
    transition: background-image 1s ease-in-out; /* تأثير التلاشي */
}
.titeldiv {
    width: 100%; /* عرض كل div داخلي يساوي عرض الحاوية */
    padding: 10px; /*  هامش داخلي للعناصر */
    box-sizing: border-box; /*  يشمل padding و border في عرض العنصر */
    height:50%;
}
.maindiv {
    width: 100%; /* عرض كل div داخلي يساوي عرض الحاوية */
    padding: 10px; /*  هامش داخلي للعناصر */
    box-sizing: border-box; /*  يشمل padding و border في عرض العنصر */
    height: 50%;
    overflow: inherit;
    
}
.cardis {
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    background-color: #efefef;
    color: #fff;
    border-radius: 5px;
}
.rectangle-container {
    position: absolute;   
}

.rectangle {
    position: absolute; /*  تحديد موضع العنصر بالنسبة للعنصر الحاوي */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5); /*  لون الخلفية (أبيض في هذا المثال) ودرجة الشفافية */
    border: 2px solid darkgray; /*  اختياري: لإضافة إطار */
    border-radius: 10px;
}
.nunb-container {
    position: absolute;
}

.nunb {
    position: absolute; /*  تحديد موضع العنصر بالنسبة للعنصر الحاوي */
    width: 100%;
    border-radius: 10px;
}
.box-container {
    position: absolute;
}

.box {
    position: absolute; /*  تحديد موضع العنصر بالنسبة للعنصر الحاوي */
    width: 100%;
    background-color: whitesmoke; /*  لون الخلفية (أبيض في هذا المثال) ودرجة الشفافية */
    border: 2px solid darkgray; /*  اختياري: لإضافة إطار */
    border-radius: 10px;
}
a.no-underline {
    text-decoration: none;
}
nav {
    margin: 20px auto;
    text-align: center;
    max-width: 60%;
    top: 1%;
}
nav ul {
        background: #efefef;
        background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
        background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
        background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
        box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
        padding: 0 0.5vw;
        border-radius: 0px 20px 0px 20px;
        list-style: none;
        position: relative;
        display: inline-table;
        z-index: 1;
        font-size: 18px;
}
nav ul:after {
            content: "";
            clear: both;
            display: block;
}
nav ul li {
            float: right;
}
nav ul li:hover > ul {
        display: block;
}
nav ul li:hover {
                background: #4b545f;
                background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a {
                display: block;
                padding: 1vw 2.5vw;
                color: #757575;
                text-decoration: none;
}

nav ul li:hover a {
                color: #fff;
}

nav ul ul {
        display: none;       
        background: #5f6975;
        border-radius: 0px;
        padding: 0;
        position: absolute;
        top: 100%;
        text-align:right;        
}
nav ul ul li {
                float: none;
                border-top: 1px solid #6b727c;
                border-bottom: 1px solid #575f6a;
                position: relative;
}
nav ul ul li a {
                    padding: 1vw 3.5vw;
                    color: #fff;
                    width: 43%;
}
nav ul ul li a:hover {
    background: #4b545f;
}