/* All */ 
body {
    margin: 0;
    Background: rgba(0,0,0,0.2) url(Pic/background.jpg);
    background-image: -o-repeating-linear-gradient();
    background-blend-mode: darken;
    background-repeat: no-repeat; 
    width: auto;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    

    
    
}

a{
    text-decoration:none;
}

/* Navbar */ 
.Nav-bar{
    height: 5.2vw;
    padding-top: 4vw;

}


.Nav-bar #aHome {
    width: 100VW;
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 10vw;

}

.Nav-bar #aVideos {
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 6vw;
}
.Nav-bar #aUpdates {
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    text-align: left;
    font-weight: bold;
    margin-left: 6vw;
}
.Nav-bar #logo1 {
    width: 8vw;
    display: block;
    margin-left: 45.5vw;
    margin-top: -5.8vw;
}
.Nav-bar #aAboutUs {
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 20vw;
}
.Nav-bar #aIDK {
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 6vw;
}
 .Nav-bar #aNP {
    font-size: 1.7vw;
    font-family: "Noto Sans", sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 6vw;
    
}
/* First text*/ 
.Nav-bar .lastfdiv p{
    margin-top: 15vw;
    font-size: 3vw; 
    text-align: center;
    color: #ffffff;
        font-family: "Alfa Slab One", serif;
        font-weight: normal;
    opacity: 0.85;
    
    
}

/* Right Hand Handel*/ 
#asidenav{

background-color:rgba(166, 166, 166, 0.82);
height:20vw;
width:8vw; 
display:flex; 
top:12vw;
right:1;
position:fixed;
justify-content:center;
align-items:center;
flex-direction:column;
border-top-right-radius:0.5vw;
border-bottom-right-radius:0.5vw;
}



/* Nav*/ 
#navbar, #navimg1,  #navimg2, #navimg3{
margin-top:1vw;  
font-weight:bold;
color:black;
    width: 3vw;
height: 3vw;    
text-align:center;
text-decoration:none;
font-family: "Noto Sans", sans-serif;



 /* Line Brake Page "Red Line"*/    
}

#nav1,#nav2,#nav3{
    font-size: 1vw;
    color:black;
    text-align:center;
    text-decoration:none;
    font-family: "Noto Sans", sans-serif;
    padding:0;
    font-weight: bold;
    
}

.Newline {
    background-color: #a6a6a6;
    margin-top: 47vw;
    height: 0.5vw;
}
/* Background Page2*/ 
#header2{
background:  rgba(0, 0, 0, 0.62) url(Pic/background2.jpg);
        background-image: -o-repeating-linear-gradient();
    background-blend-mode: darken;
    background-repeat: no-repeat; 
height: 65vw;
    width: auto;
    background-size: cover;

}

/* General Idea:*/ 
.sec1 section #p1{
    margin-top: -60vw;
    color: #ffffff;
        font-family: "Alfa Slab One", serif;
        font-weight: normal;
    font-size: 3vw;;
    margin-left: 18vw;
}
/* Advantages */ 
.sec1 section #p2{
    margin-top: -51.5vw;
    color: #ffffff;
        font-family: "Alfa Slab One", serif;
        font-weight: normal;
    font-size: 3vw;;
    margin-left: 66vw;
}
/* Pic General Idea */ 
#pic1{
    width: 50vw;
height: 33vw;
    margin-left: 3vw;
    margin-top: -1vw;
    border: solid, 0.2vw;
    color:#a6a6a6;
    border-bottom: hidden;
}
/* First Img space under */ 
.space1 {
    background-color: rgba(45, 45, 45, 0.92);
    margin-top: -0.3vw;
        border: solid, 0.2vw;
    color:#a6a6a6;
    width: 50.01VW;
    height: 13vw;
        border-top: hidden;
    margin-left: 3vw;
    
 /* hedtext first Img page 2 */    
}
#so1{
    font-size: 1.6vw;
    margin-left: 1vw;
        color:#ffffff;
    font-family: "Noto Sans", sans-serif;
        font-weight: bold;
    text-align-last: justify;
        margin-top: 0.1vw;
    position: absolute;
}
 /* SUPTEXT PAGE 1 FIRST IMG */
#so2p{
        font-size: 1.3vw;
    margin-left: 1vw;
    margin-top: 4vw;
        color:#bdbdbd;
    font-family: "Noto Sans", sans-serif;
        font-weight: normal;
    text-align-last: left;
    
}
#f1{
    width: 17vw;
    margin-left: 56vw;
    margin-top: -1.8vw;
    height: 11vw;
        border: solid, 0.2vw;
        color:#a6a6a6;
    border-right-style: hidden;
    
}
 /* first Img advantages*/
.FirstPic{
        background-color: rgba(45, 45, 45, 0.92);
    margin-top: -11.5vw;
        border: solid, 0.2vw;
    color:#a6a6a6;
    width: 25VW;
    height: 11vw;
        border-left: hidden;
    margin-left: 70vw;
}
 /* Headtext advantages*/
#t1{
    font-size: 1vw;
    margin-left: 3.7vw;
    font-family: "Noto Sans", sans-serif;
        font-weight: bold;
    text-align-last: justify;
    color:white;
    
}
 /* Suptext advantages*/
#f1so{
            font-size: 1.0vw;
    margin-left: 4vw;
    margin-bottom: 4vw;
        color:#bdbdbd;
    font-family: "Noto Sans", sans-serif;
        font-weight: normal;
    text-align-last: left;

}
#f2{
    width: 17vw;
    margin-left: 56vw;
    margin-top: 4.9vw;
    height: 11vw;
        border: solid, 0.2vw;
        color:#a6a6a6;
    border-right-style: hidden;
}
 /* first Img advantages*/
.FirstPic2{
        background-color: rgba(45, 45, 45, 0.92);
    margin-top: -11.52vw;
        border: solid, 0.2vw;
    color:#a6a6a6;
    width: 25VW;
    height: 11vw;
        border-left: hidden;
    margin-left: 70vw;
}
 /* Headtext advantages*/
#t2{
    font-size: 1vw;
    margin-left: 3.6vw;
    font-family: "Noto Sans", sans-serif;
        font-weight: bold;
    text-align-last: justify;
    color:white;
    
}
 /* Suptext advantages*/
#f2so{
            font-size: 1.0vw;
    margin-left: 4vw;
    margin-bottom: 4vw;
        color:#bdbdbd;
    font-family: "Noto Sans", sans-serif;
        font-weight: normal;
    text-align-last: left;

}
#f3{
    width: 17vw;
    margin-left: 56vw;
    margin-top: 5.8vw;
    height: 11vw;
        border: solid, 0.2vw;
        color:#a6a6a6;
    border-right-style: hidden;
}
 /* first Img advantages*/
.FirstPic3{
        background-color: rgba(45, 45, 45, 0.92);
    margin-top: -11.5vw;
        border: solid, 0.2vw;
    color:#a6a6a6;
    width: 25VW;
    height: 11vw;
        border-left: hidden;
    margin-left: 70vw;
}
 /* Headtext advantages*/
#t3{
    font-size: 1vw;
    margin-left: 3.7vw;
    font-family: "Noto Sans", sans-serif;
        font-weight: bold;
    text-align-last: justify;
    color:white;
    
}
 /* Suptext advantages*/
#f3so{
            font-size: 1.0vw;
    margin-left: 4vw;
    margin-bottom: 4vw;
        color:#bdbdbd;
    font-family: "Noto Sans", sans-serif;
        font-weight: normal;
    text-align-last: left;

}
.Newline2 {
    background-color: #a6a6a6;
    margin-top: 9.21vw;
    height: 0.5vw;
}
#header3{



height: 1vw;


margin-top: 2vw
}

#video1 {
width: 99.2vw;
height: 10.1;
    filter: brightness(47%);
    margin-top: -3vw;


}
video::-webkit-media-controls {
   display: none;     
margin: 0;

}


.video1Space{
    background-color: rgba(45, 45, 45, 0.92);
    position: absolute;
    width: 23vw;
    margin-top: -36vw;
    margin-left: 10vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;
}
 #text1video{
    font-size: 2vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 3vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ol1{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 8vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
.video2Space{
    background-color: rgba(45, 45, 45, 0.92);
    position: absolute;
    width: 23vw;
    margin-top: -36vw;
    margin-left: 63vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;
}
 #text2video{
    font-size: 2vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 3vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ol2{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 8vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
#vidoepic1{
    width: 40vw;
        position: absolute;
    margin-top: -35.5vw;
    margin-left: 32.3vw
}
.Newline3{
    margin-top: -0.20vw;
    background-color: #a6a6a6;
    height: 0.5vw;
}
#header4{
    background-color: rgb(45, 45, 45);
    height: 33vw;
}

#headtextdown{
    text-align: center;
    font-size: 2vw;
    color: white;
    font-family: "Alfa Slab One", serif;
    font-weight: normal;      
}

table{
       font-family: "Noto Sans", sans-serif;
        color: #dbdbdb;
}
td{
    font-size:1.2vw;
    
}

.Newline4{
    margin-top: -0.20vw;
    background-color: #a6a6a6;
    height: 0.5vw;
}
#header5{

    height: 40vw;

}

#lastaside #bannarpic{
height: 40vw;
    width: 99.2vw;

        color: #ffffff;
filter: brightness(45%);

    
}
#textbanner{
    margin-left: 10vw;
    margin-top: -25vw;
    position: absolute;
    font-size: 3.4vw;
    
        color: white;
    font-family: "Alfa Slab One", serif;
    font-weight: normal;     
    text-align-last: center;
}

#ol3{
        font-size: 1.7vw;
        color: #ffffff;
    margin-top: -157vw;
margin-left: 50vw;
    text-align-last: left;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
    position: absolute;

}
#litext1, #litext2, #litext3{
       padding: 1vw; 
}
#background{
     background-color: rgba(45, 45, 45);
    opacity: 0.5;
    width: 50vw;
    float: right;
    margin-top: -170vw;
    height: 40vw;
    border-left: solid 0.2vw #a6a6a6;
    border-bottom: solid 0.2vw #a6a6a6;

}
#header6{
    background-color: rgba(45, 45, 45);
    height: 130vw;
    background: url(Pic/background3.png);
    filter: brightness(45%);
}

.LastSpace{
    background-color: rgba(45, 45, 45, 0.75);
    position: absolute;
    width: 23vw;
    margin-top: -110vw;
    margin-left: 70vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;
}
 #textlast{
    font-size: 2vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 3vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ollast{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 9vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
 /* Last2*/
.LastSpace2{
    background-color: rgba(45, 45, 45, 0.75);
    position: absolute;
    width: 23vw;
    margin-top: -88vw;
    margin-left: 16vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;

}
 #textlast2{
    font-size: 1.8vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 3vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ollast2{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 9vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
 /* Last3*/
.LastSpace3{
    background-color: rgba(45, 45, 45, 0.75);
    position: absolute;
    width: 23vw;
    margin-top: -62vw;
    margin-left: 70vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;
}
 #textlast3{
    font-size: 2vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 2.1vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ollast3{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 12vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
 /* Last4*/
.LastSpace4{
    background-color: rgba(45, 45, 45, 0.75);
    position: absolute;
    width: 23vw;
    margin-top: -37vw;
    margin-left: 16vw;
    height:20vw;
    border: solid,0.2vw;
    color: #a6a6a6;
}
 #textlast4{
    font-size: 2vw;
    color: #ffffff;
    margin-left: 1.5vw;
    margin-top: 3vw;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
#ollast4{
        font-size: 1vw;
        color: #ffffff;
    margin-top: 12vw;
       font-family: "Noto Sans", sans-serif;
    font-weight: normal; 
}
#copyrighttext{


    font-size: 1.1vw;
position: absolute;
    margin-top:0.5vw;
    margin-left: 35vw;
           font-family: "Noto Sans", sans-serif;
    font-weight: bold; 

    color: white;
    
}
#copyrighttext2{


    font-size: 1.1vw;
position: absolute;
    margin-top:0.5vw;
    margin-left: 56vw;
           font-family: "Noto Sans", sans-serif;
    font-weight: bold; 

    color: white;
    
    
}

.LastSpace5{
    background-color: rgba(45, 45, 45, 0.75);
    position: absolute;
    width: 99.2vw;
    margin-top: -3vw;

    height:3vw;

    color: #a6a6a6;
}
 #textlast6{
    font-size: 2vw;
    color: #ffffff;
    position: absolute;
    font-family: "Noto Sans", sans-serif;
    font-weight: bold;
    
}
 /* All codes wrote by Ammar Al Yahyaei*/