@import url('https://fonts.googleapis.com/css2?family=dosis:wght@300;400;500;600;&display=swap');
// <uniquifier>: Use a uniquifier for the class name
// <weight>: Use a value from 100 to 900

.noto-sans arabic-<uniquifier> {
  font-family: "Noto Sans Arabic", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

*
{
    margin: 0;
    padding: 0;
   box-sizing: border-box;
   font-family: "dosis", sans-serif;
}
.video{
    width:100%;
    min-width: 470px;
    height: 650px; 
}
body
{
    min-height:100vh;
    background-image: url(Images/BC14.png);
    font-family: "dosis";
    font-size: 18px;
}
p{
    font-family: "Dosis";
    font-size: 22px;
    font-weight:700;
    color: #000;   
    world-space: 20px;
}
.responsive{
    width: 100%;
    padding-right: 5px;
   height: auto;
    
}

header
{
    position: absolute;
    width: 100%;
    min-height: 40px;
    background: #e9c590;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	
}
    

header .logo
{
    color: #fff;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
}
header ul
{
    position: relative;
    z-index: 10;
    font-family: dosis,sans-serif;
}
header ul li
{
    position: relative;
    list-style: none;
    float: left;
    z-index: 1000;
}
header ul li a
{
    color: #000;
    font-size: 20px;
    padding: 4px 10px;
    float: 600;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
   
}
header ul li a:hover
{
    background: #e9c590;
}

header ul li ul
{
    position: absolute;
    left: 0;
    width: 200px;
    background: #e9c590;
    display: none;
    
}
header ul li:hover > ul
{
    display: block;
}
header ul li ul li
{
    position: relative;
    width: 100%;
    border: 1px solid #e9c590;
    
}
header ul li ul li ul
{
    top: 0;
    left: 200px;
    
}
/* Start Responsive */
@media (max-width: 600px)
{
header
{
    padding: 10px 20px;
}
header nav
{
    position: absolute;
    width: 100%;
    top: 66px;
    left: 0;
    background: #e9c590
    display: none;
}
header.active nav
{
    display: initial;
}
header nav ul li{ 
    width: 100%; 
}
header nav ul li ul
{
    position: relative;
    width: 100%;       
    left: 0;
}
header nav ul li ul li ul
{
    top: 0;
    left: 0;
}
header nav ul li:hover ul li 
{
background: #e9c590;
}
.menuToggle
{
    position: relative;
    width: 40px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuToggle::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff;
    transform: translateY(-12px);
    box-shadow: 0 12px #fff;
} 
.menuToggle::after
{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #fff;
    transform: translateY(12px); 
}
header.active .menuToggle::before
{
    transform: rotate(45deg);
    box-shadow: 0 0 #fff;
}
header.active.menuToggle::after
{
    transform: rotate(315deg);
    box-shadow: 0 0 #fff;
}
}
/*from here*/
  /* Style the links inside the navigation bar */
  .topnav a {
    float: center;
    display: block;
    color: #79fa01;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #79fa01;
    color: black;
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    
    color: rgb(224, 248, 5);
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }



  @import url("webfonts/Dosis_Medium/stylesheet.css");

*
{
    margin: 0;
    padding: 0;;
   box-sizing: border-box;
   font-family: "dosis medium", sans-serif;
}
body
{
    min-height:100vh;
    
}
.topvav
{
    position: absolute;
    width: 100%;
    min-height: 100px;
    
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topvav .logo
{
    color: #5c1010;
    font-size: 1.75em;
    font-weight: 600;
    text-decoration: none;
}
.topvav ul
{
    position: relative;
    z-index: 1000;
}
.topvav ul li
{
    position: relative;
    list-style: none;
    float: left;
}
.topvav ul li a
{
    color: #5c1010;
    font-size: 1em;
    padding: 20px 25px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
}
.topvav ul li a:hover
{
    background: blue;
}

.topvav ul li ul
{
    position: absolute;
    left: 0;
    width: 200px;
    background: #66a0a0;
    display: none;
}
.topvav ul li:hover > ul
{
    display: block;
}
.topvav ul li ul li
{
    position: relative;
    width: 100%;
    border: 1px solid rgba(173, 65, 65, 0.2);
}
.topvav ul li ul li ul
{
    top: 0;
    left: 200px;
}
/* Start Responsive */
@media (max-width: 900px)
{
header
{
    padding: 10px 20px;
}
header nav
{
    /* 1st Child*/
    position: absolute;
    width: 100%;
    top: 66px;
    left: 0;
    background: #557c0c;
    display: none;
}
header.active nav
{
    display: initial;
}
header nav ul li{ 
    width: 100%; 
}
header nav ul li ul
{
    position: relative;
    width: 100%;       
    left: 0;
}
header nav ul li ul li ul
{
    top: 0;
    left: 0;
}
header nav ul li:hover ul li 
{
 /*2ND cHILD */   
background: #f5870a;
}
.menuToggle
{
    position: relative;
    width: 40px;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menuToggle::before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #5c1010;
    transform: translateY(-12px);
    box-shadow: 0 12px #A39EA2;
} 
.menuToggle::after
{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #5c1010;
    transform: translateY(12px); 
}
header.active .menuToggle::before
{
    transform: rotate(45deg);
    box-shadow: 0 0 #5c1010;
}
header.active.menuToggle::after
{
    transform: rotate(315deg);
    box-shadow: 0 0 #5c1010;
}
}