:root {
    --main-color: #007bff;
    --secondary-color: #006ada;
    --background-color: rgba(0, 0, 0, 50%);
    --text-color: #ffffff;
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Alexandria", system-ui; /* لمنع التمرير الأفقي */
}

.main-footage {

    position: relative;
    width: 100%;
    height: 100vh;
    /* يجعل الفيديو يغطي كامل الشاشة */
    overflow: hidden;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* لضمان تغطية الفيديو لكامل المساحة */
    z-index: -1;
    /* لتحديد الفيديو خلف المحتوى */
}

video::-webkit-media-controls {
    display:none !important;
}

.content {
    font-size: 2rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}



.section-titels {
    max-width: 100%;
    height: max-content;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    
}



.h1-section {
    padding: 20px 0 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: max-content;
    
}

.main-titel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 75%;
    padding: 0 0 20px 0;

}

.main-titel h1 {
    text-align: right;
    direction: rtl;
    font-size: 3rem;
    position: relative;
}

.main-titel h1::after {
    content: "";
    display: block;
    width: 20%;
    height: 3px;
    /* يمكنك ضبط سمك الخط هنا */
    background-color: var(--main-color);
    /* اختر اللون الذي تريده للخط */
    position: absolute;
    bottom: -20px;

}

.main-titel h1 span {
    font-size: 2rem;
}




.work-container {
    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: max-content;
    padding: 10px 0;
}


.work-container ul {
    font-weight: 600;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    padding: 0 10px;
    margin: 0;

}

.work-container ul span {
   
    margin-right: 10px; /* تعديل المسافة بين العلامة والعناصر */
}

.work-container ul li {
    font-size: large;
    padding: 10px 0;
    margin-right: 10px; /* يمكنك تعديل المسافة بين العناصر */
}

.work-container ul li a {
    
    text-decoration: none;
    color: black; /* استخدام لون النص الأساسي */
    padding: 0;
    margin: 0;
    display: inline-block;
}

.work-container ul li a:hover {
    color: #454545;
}






@media (max-width: 1025px) {

    .main-footage {
        height: 90vh;
    }

    .main-titel h1 {
        font-size: xx-large;
    }
    .main-titel h1 span {
        font-size: x-large;
    }

    .work-container ul {
        font-size: large;
        
    }

}


@media (max-width: 825px) {

    .main-footage {
        height: 70vh;
    }

    .main-titel h1 {
        font-size: x-large;
    }
    .main-titel h1 span {
        font-size: x-large;
    }

}

@media (max-width: 525px) {

    .main-footage {
        height: 50vh;
    }

    .main-titel h1 {
        font-size: x-large;
    }
    .main-titel h1 span {
        font-size: large;
    }

    .work-container ul {
        font-size: small;
        
    }

    .work-container ul li {
        font-size: small;
        
    }

}







/* هنا الحاوية الخاصة بالصورة او الفيديو */
.main-footage2 {
    width: 100%;
    height: 100vh;
    /* يجعل الصورة تغطي كامل الشاشة */
    background-image: url('../../../assets/image/image1.jpg');
    /* استبدل 'path_to_your_image.jpg' بمسار الصورة الخاص بك */
    background-size: cover;
    background-position: center;

}