@font-face{
    src: url(../fonts/Tajawal-ExtraBold.ttf);
    font-family: ash; /* any alias*/					
}

@font-face{
    src: url(../fonts/SigmarOne-Regular.ttf);
    font-family: Sigmar; /* any alias*/					
}

/* global */
*,
*::before,
*::after{
    margin: 0;
    padding: 0;
}

html{
    /* font-size: 62.5%; font size 10px */
    /* 1 rem = 10 px = 62.5% */
    font-size: 10px;
    font-family: 'SF Pro Display' , sans-serif;
}

a{
    display: block;
    text-decoration: none;
}

.container{
    max-width: 98rem;
    margin: 0 auto;
    padding: 0 2.2rem;
}

header{
    visibility: hidden;
}

.hero{
    visibility: hidden;
}

/* meduim screen devices */
/*@media screen and (max-width:767px) */
@media only screen and (max-width:992px) 
{
    /* header */
    header{
        visibility: visible;
        position: fixed;
        top: 0;
        z-index: 1400;
        width: 100%;
        height: 7.5rem; /* 4.4rem;*/
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(2rem);
    }

    .nav-list{
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* margin: 0 -1rem; */
        margin-top: 0;
    }

    .nav-item{
        width: 4.8rem;
        height: 7.5rem;
        display: flex;
        justify-content: center;    
    }

    .nav-link{
        font-size: 1.7rem;
        color: #fff;
        padding: 0 1rem;
        transition: opacity 0.5s;    
    }

    .nav-link:hover{
        opacity: 0.7;
    }

    .nav-item-logo{
        width: 12.6rem;
        height: 7rem;  
        z-index: 2000; 
    }

    .nav-link-logo{
        width: 12rem;
        height: 7rem;
        background: url(../iphone_images/NCIEC.png) center no-repeat;
        background-size: contain;
    }

    .nav-link-arabic{
        width: 2rem;
        height: 2rem;
        background: url(../iphone_images/arabic_manual_32.png) center no-repeat;
        background-size: contain;
    }

    .nav-link-english{
        width: 2rem;
        height: 2rem;
        background: url(../iphone_images/english_manual_32.png) center no-repeat;
        background-size: contain;
    }

    .lang-menu{
        display: flex;
        align-items: center;
        justify-content: space-between;    
        margin-right: 3rem;
    }

    .link_menu:nth-child(2){
        margin-left: -1.8rem;
    }

    header .container{
        padding: 0;
    }

    .nav-list-mobile{
        display: flex;    
    }

    .mobile-menu{
        position: relative;
        z-index: 1500;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .line{
        position: absolute;
        width: 1.7rem;
        height: 2px;
        background-color: #fff;        
        transition: margin-top 0.319s cubic-bezier(0.04, 0.04, 0.12, 0.96);        
    }

    .line-top{
        margin-top: 3px;        
    }

    .line-bottom{
        margin-top: -0.4rem;                
    }

    /* هذا الكلاس يتم النداء عليه لتنفيذه بواسطة الجافاسكريبت */
    .active .line-top{
        margin-top: 0;
        transform: rotate(45deg);
        transition: transform 0.3192s 0.1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    }

    .active .line-bottom{
        margin-top: 0;
        transform: rotate(-45deg);
        transition: transform 0.3192s 0.1s cubic-bezier(0.04, 0.04, 0.12, 0.96);
    }

    header.active{
        height: 100vh;
        background-color: #000;
    }

    .nav{
        position: relative;
    }

    .nav-list-larger{
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        display: block;
        padding: 1rem 5rem;
        z-index: 1000;
        box-sizing: border-box;
        transition: opacity 0.3s;    
    }

    .active .nav-list-larger{
        width: 100%;
        height: 60vh;
        opacity: 1;
        visibility: visible;
        overflow-y: auto;    
        margin-top: 7.5rem;
    }

    .nav-list-larger .nav-item{
        width: 100%;
        justify-content: flex-start;
        border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    }

    .nav-list-larger .nav-item:nth-child(12){
        border-bottom: none;           
    }

    .active .nav-list-larger .nav-item{
        animation: fadein 1s ease-in;
    }

    @keyframes fadein {
        from{
            opacity: 0;
        }
        to{
            opacity: 1;
        }
    }

    .nav-list-larger{
        opacity: 0;        
        visibility: hidden;
    }

    .nav-item-larger{
        padding-top: 1rem;    
        height: 4rem;
    }


    /* ------------ s_main_logo class (أول صورة فى الصفحة) ------------------------- */

    .all_sections{
        display: flex;
        flex-direction: column ;           
    }

    .hero{
        font-family: ash;
        visibility: visible;
        height: 25rem;
        margin-top: 7.6rem;         
        background-size: auto;
        background-position: bottom center;
    }

    .s_main_logo{                        
        height: 15rem;
        background-image: url(../images/logo123.jpeg) ;
        background-position: center center;        
        background-repeat: no-repeat;
        background-size: 100% 15rem;  
    }    
   
    /* ------------ s_company_name_move class (اسم الشركة المتحرك) ------------------------- */
    .s_company_name_move{
        font-family: ash;
        margin-top: 0.5rem; 
        height: 2.5rem;
        padding-top: 1rem;        
        /* background-color: yellow; */
    }

    /* ------------ s_social class (ايقونات السوشيال ميديا) ------------------------- */
    .s_social{
        margin-top: 0.5rem; 
        height: 3rem;
        padding-top: 1rem;        
        /* background-color: yellow; */
    }

    .s_icons{
        margin: auto;
        text-align: center;
    }
    .s_icons a{
        display: inline;
        font-size: 1.8rem;
    }

    .s_icons a i:hover {        
        color: red;        
    }

    .s_social_icons{
        display: inline;                        
        color: rgb(0, 0, 0);
        margin-left: 3rem;        
        transition: 0.5s;
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s;
        -ms-transition: 0.5s;
        -o-transition: 0.5s;
    }    

    /* ------------ s_news_bar class (شريط الأخبار المتحرك) ------------------------- */
    .s_news_bar{
        margin-top: 1rem;
        height: 5rem;
    }

    .s_company_name{
        font-family: ash;
    }

    .s_a_news{
        background: #1e87b4;
        color: #fff;
        height: 5rem;
    }
    .s_a_news marquee{
        font-size: 1.5rem;        
    }
    
    /* ------------ s_vip_event class (صورة الحدث المهم مثل معرض الكتاب مثلاً) ------------------------- */
    @property --angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: -10deg;
    }
      
    @keyframes scene-transition {
        to {
          --angle: 370deg;
        }
    }
      
    @keyframes s_blink { 50% { border-color: #ff0000; }  }
    
    .s_vip_event{                                        
        position: relative;    
        width: 70%;
        height: 250px;        
        border: 8px solid #000000 ;        
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        animation: s_blink .5s step-end infinite alternate;
    }

    .s_scene_1_2024,
    .s_scene_2_2024 
    {
        position: absolute;
        inset: 0;                
    }
    

    /* .s_scene_2_2024{        
        border: 2px solid rgb(247, 53, 5); 
        z-index: -1;
        -webkit-mask-image: 
            conic-gradient(
                #fff 0deg,
                #fff calc(var(--angle) - 10deg),
                transparent calc(var(--angle) + 10deg),
                transparent 360deg
            ),
          conic-gradient(transparent 340deg, #fff 360deg);
    }  */
    
    .s_scene_2_2024 {
        /* position: relative;  */
        border: 2px solid rgb(247, 53, 5);
        z-index: -1; 
        -webkit-mask-image: 
            conic-gradient(
                #fff 0deg,
                #fff calc(var(--angle) - 10deg),
                transparent calc(var(--angle) + 10deg),
                transparent 360deg
            ),
            conic-gradient(transparent 340deg, #fff 360deg);
        mask-image: 
            conic-gradient(
                #fff 0deg,
                #fff calc(var(--angle) - 10deg),
                transparent calc(var(--angle) + 10deg),
                transparent 360deg
            ),
            conic-gradient(transparent 340deg, #fff 360deg);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }

    .s_stretch {
        width:100%;
        height:100%;
    }

    .s_vip_event:is(:hover, :focus) .s_scene_2_2024 {
        z-index: 1;
        animation: scene-transition 2s linear forwards;
    }

    /* ------------ s_rotate_vertical class (الصورة التى ظهرها صورة اخرى تدور حول المحور الرأسى) ------------------------- */
    body{        
        perspective: 90%;         
    }        

    .s_two_images_rotate_vertical{
        width: 90%;
        height: 90%;
        padding: 0 0;
    }

    .s_front , .s_back{
        width: 100%;
        height: 100%; 
        background-color: rgb(4, 155, 241);
        position: absolute;                    
    }
    
    .s_two_images_rotate_vertical section{
        width: 100%;
        height: 100%; 
        background-color: rgb(4, 155, 241);
        border: 2px solid rgb(0, 0, 0);
        margin:auto;   
        transform-style: preserve-3d;            
        position: relative;                    
        transition: 4s;                         
        backface-visibility: hidden;           
        -moz-backface-visibility: hidden;          
    }
                
    .s_front{
        z-index: 1;                            
        backface-visibility: hidden;            
        -moz-backface-visibility: hidden;      
    }
    
    .s_back{        
        transform: rotateY(180deg);            
        border: 2px solid rgb(0, 0, 0);
    }        

    .s_two_images_rotate_vertical section:hover{
        transform: rotateY(180deg);              
    }
    
    .s_image{                               
        width: 100%;
        height: 100%;        
    }

    .s_back_image{                                       
        width: 100%;
        height: 100%;        
    }

    /* ---------     s_third_images الثلاثة صور بعد الصورة التى تلف حول المحور الرأسى       ------------------------ */

    .s_third_images{
        margin-top: 2rem;
    }
    /* Hide the images by default */
    .mySlides_456 {
        display: none;  
        position: relative;           
    }

    .mySlides_456::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 0px;
        bottom: 0px;
        left: 0px;
        transition: 2s;
        opacity: 0.5;
        background-color: rgba(0, 0, 0,0.5);
    }

    .img45678{
        width: 120px;    
        height: 50px;
    }

    .mySlides_456:hover::after{
        height: 100%;
    }

    .mySlides_456 img 
    {
        vertical-align: middle;        
    }

    .team_overlay456{
        position: absolute;
        top: 0;
        /* left: calc(var(--global_width) / 2 - 80px) ; */
        right: 0;
        width: 120px;    
        height: 50px;
        /* background-color: rgba(0, 0, 0, 0.8); */
        visibility: hidden;
        opacity: 0;
        /* margin-left: 100px; */
    }

    .mySlides_456:hover .team_overlay456{
        visibility: visible;
        opacity: 1;
        z-index: 2;
    }
    
    .team_overlay456 a{
        display: block;
        /* width: 40px; */
            /* height: 40px; */
        /* background-color: rgb(55, 156, 218); */
        background-color: transparent;
        margin-left: auto;    
    }

    .img_456{
        width: 50px;    
    }

    /* Slideshow container */
    .slideshow_container_456 
    {      
        border: 2px solid rgb(0, 0, 0);
        max-width: 800px;
        position: relative;
        margin: auto;
        height: 35rem ;
    }

    .carousel_456{
        /* display: none; */
        height: 300px;
        width: 90%;
        border: 2px solid rgb(0, 26, 255);
    }

    /* Next & previous buttons */
    .prev_456, .next_456 {
        cursor: pointer;
        position: absolute;
        /* top: 150px; */
        width: auto;
        /* margin-top: -22px; */
        /* padding: 16px; */
        color: rgb(247, 7, 7);
        font-weight: bold;
        font-size: 28px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }

    /* Position the "next button" to the right */
    .next_456 {
        right: -20px;
        border-radius: 3px 0 0 3px;  
        top:45%;    
    }

    .prev_456{
        left: -20px;
        border-radius: 3px 0 0 3px;
        top:45%;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev_456:hover, .next_456:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    /* Caption text */
    .text_456 {
        color: #fffdfd;
        font-size: 20px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;  
        font-family: sigmar;
        text-shadow: 1px 1px 1px rgb(253, 253, 251);
    }

    /* Number text (1/3 etc) */
    .numbertext_456 {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
        font-family: ash;
        background-color: rgba(0, 0, 0,0.4);
    }

    /* The dots/bullets/indicators */
    .dot_456 {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }

    .active2, .dot_456:hover {
        background-color: #0b1ae2;
    }

    /* Fading animation */
    .fade_456 {
        animation-name: fade_456;
        animation-duration: 1.5s;
    }

    @keyframes fade_456 {
        from {opacity: .4}
        to {opacity: 1}
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .prev_456, .next_456,.text_456 {font-size: 11px}
    }

    /* ------------ NCIEC المائية  --------------------- */
    .contect_text
    {
        /* position: relative; */
        font-family: 'Poppins';
        /* background-color: black; */
        width: 90%;    
        align-items: center;
        margin:auto;
        padding-left: 30px;
        padding-bottom: 5px;
        /* box-sizing: border-box;         */
    }

    .contect_text h2{
        position: absolute;
        /* color:#fff; */
        transform: translate((-50%,-50%));
        font-size: 5em;
    }

    .contect_text h2:nth-child(1)
    {
        color: transparent;
        -webkit-text-stroke: 2px #000000;
    }

    .contect_text h2:nth-child(2)
    {
        color: #03a9f4;
        animation: animate 4s ease-in-out infinite;
    }

    @keyframes animate 
    {
        0%,100%
        {
            clip-path: polygon(0% 51%, 9% 48%, 20% 51%, 33% 56%, 51% 61%, 71% 60%, 100% 53%, 100% 100%, 0% 100%);
        }  
        50%{
            clip-path: polygon(0% 66%, 15% 64%, 31% 61%, 47% 53%, 61% 43%, 79% 38%, 100% 43%, 100% 99%, 0% 100%);
        }
        
    }

    .contect_text h3{
        position: absolute;        
        font-size: 1em;
        left:0px;
        bottom: -15px;
    }

    .contect_text h3:nth-child(1)
    {
        color: transparent;
        -webkit-text-stroke: 1px #000000;
    }

    .contect_text h3:nth-child(2)
    {
        color: #03a9f4;
        animation: animate 4s ease-in-out infinite;
    }

    /* --------------- s_news الأخبار --------------------- */
    .s_news{
        width: 100%;
        margin-top: 16rem;
    }

    .container{
        width: 90%;
    }

    .inner-container{
        width: 100%;
    }

    .img_container{
        width: 30rem;
        height: 20rem;
    }

    .swiper-slide img{
        width: 100%;
        height: 100%;
        border: none;
    }
    
    /* ------------- بعد الاخبار slider ال 6 صور المتحركين بال   -------------------------- */
    .s_6_images_slider{
        margin-top: 177rem;
    }

    .s_imge_slider1{
        height: 26rem;
        margin-left: -5rem;
    }

    /* ----------  visitors  ---------------- */
    .s_visitors{
        margin-top: 20rem;
    }

    /* ------------ s_watermark_and_galary  ------------------- */
    .s_watermark_and_galary{
        margin-top: -15rem;
    }

    /* ------------ s_setara  ------------------- */
    .s_setara{        
         /*margin-top: 415rem; */
        margin-top: 380rem;
        position: absolute;
        top: 50%;	  
		left: 50%;
	    transform: translate(-50%,-50%); 
    }

    /* --------- footer ------------- */
    .s_footer{
        margin-top: 20rem;
    }

    .footer_logo {        
        min-height: 100px;
        margin-top: 100px;
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
    }

    .footer_about {        
        background-color: rgba(0, 0, 0, 0.9);
    }

    .f_about {        
        width: 90%;        
        margin: auto;
    }

    .f_about .about_us_text {
        direction: rtl;
        text-align: center;
        line-height: 2.5;
        font-size: 16px;        
        margin: auto;
    }

    .footer_contact_info {        
        background-color: rgba(0, 0, 0, 0.9);        
    }

}


/* 8/10/2025 */
/* إخفاء الصورة القديمة في الموبايل */
    @media (max-width: 768px) 
    {
        .s_main_logo {
            display: none !important;
        }

        .s_main_logo_mobile_video {
            position: relative;
            height: 22rem; /* ← زد الارتفاع من 15rem إلى 18rem (أو حسب الحاجة) */
            /* height: 15rem; */
            width: 100%;
            overflow: hidden;
        }

        .mobile-hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* مهم جدًا لملء المساحة مع الحفاظ على النسبة */
            z-index: 1;
        }
    }
/* 8/10/2025 */