*{
    margin: 0;
    font-family: serif;
    direction: rtl;
}
body
{
    background: #fff;
    width: 100%;
    height: 100vh;
}
.contienar{
    width: 80%;
    height: 3010px;
    margin: auto;
    overflow: hidden;
}

#hed{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 10px auto;
    padding: 10px 0;
 
    
}
.logo{
    width: 350px;
    height: 180px;

}

.callMy{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    gap: 20px;
}
.callMy #li1{
    display: inline-block;
    color: #000;
    
    
}


header ul li a{
    margin: 0 10px;
    transition: 0.4s;
    border-radius: 7px;
    text-decoration: none;
    
}
ul li a:hover{
    color: #28d115;
    letter-spacing: 1px;
    text-decoration-line: underline;
    
    

}

.navpar{
    display: none;
}

#open, #close{
    display: none;
}
#callS, #sunny{
    display: none;
}
#dark, #sunny{
    cursor: pointer;
}
#dark:hover, #sunny:hover{
    background: #04ff0040;
    border-radius: 100px;
}

.contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    background: #5577003e;
    margin: 20px auto;
    
}

.var{
    width: 50%;
    margin:20px;
}

.var h2{
    font-size: 35px;
    display: inline-block;
}

.var ul li, .cv2 ul li{
    font-size: 25px;
    padding: 6px 10px;
}


.imaga{
    width: 320px;
    height: 320px;
    margin: 20px 10px;
}

.imaga img{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    margin: 40px auto;
    display: flex;
  
    justify-content: center;
    align-items: center;
}

.cv1{
    width: 100%;
    margin: 20px auto;
    border-radius: 8px;
    padding: 5px 0;
}

.cv1 h2, .cv2 h2, .table h2, .media h2{
    font-size: 35px;
    border-bottom: solid 2px #000;
    padding: 6px 10px;
    text-transform: capitalize;
    margin: 20px 0;
    
}
.cv1 p{
    padding: 6px 10px;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 3px;
    word-spacing: 3px;
}
.cv2{
    margin: 20px auto;
    width: 100%;
    height: 550px;
}
.ra{
    width: 100%;
    height: 80%;
}


.table{
    width: 100%;
    margin:20px auto;
    height: 250px;
    border-radius: 8px;
    

}

#table{
    width: 100%;
    height: 60%;
    border-radius: 8px;
}
#table tr th{
    font-size: 20px;
    background: #3c8982;
    border-radius: 8px;
    text-transform: uppercase;

    
}
#table tr td{
    background: #558f99;
    text-align: center;
    border-radius: 8px;

}

/* .test{
    
} */
.mad{
    width: 100%;
    height: 400px;
    border-radius: 8px;
    margin: 40px auto;

}

.media{
    width: 100%;
    height: 75%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.media1{
    width: 50%;
    height: 70%;
}



#wahtsapp{
    background: #15be05;
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    border-radius: 10px;
    cursor: pointer;

}
#wahtsapp img{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    cursor: pointer;

}

#wahtsapp a{
    text-decoration: none;
    color: #fff ;
    font-size: 20px;
}


/* facebook */
#facebook{
    background: #052abe;
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    border-radius: 10px;
    cursor: pointer;

}
#facebook img{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    
} 

#facebook a{
    text-decoration: none;
    color: #fff ;
    font-size: 20px;
}

/* instagram */

#instagram{
    background: #ec4d04;
    width: 90%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    border-radius: 10px;
    cursor: pointer;
}  
#instagram img{
    width: 30px;
    height: 30px;
    border-radius: 100%;
} 

#instagram a{
    text-decoration: none;
    color: #fff ;
    font-size: 20px;
} 

.ADS{
    width: 30%;
    height: 70%;
    border: dashed 2px #cf8d14;
    position: relative;
    left: 20px;
}

footer{
    background: #030303;
    width: 100%;
    height: 600px;
    margin: 20px auto;
    border-radius: 8px;
}

.logoimg{
    width: 100%;
    height: 400px;
    border-radius: 8px;
}
.logoimg img{
    width: 100%;
    height: 400px;
    border-radius: 8px;


}

.lam{
    background: #fa9f01;
    width: 100%;
    height: 10px;
}

.fot{
    background: #030303;
    width: 100%;
    height: 190px;
    border-radius: 8px;
    margin: 20px auto;

    
}
.fotP{
    background: #57507472 ;
    text-align: center;
    padding: 10px 0;
    color: #e4e4e1;
}
.fotP p{
    font-size: 20px;
}
.fotS{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
    margin: 20px auto;

}
.fotS img{
    width: 30px;
    height: 30px;
    margin: 20px 5px;
}

#fac:hover{
    background: #02f;
    border-radius: 8px;
    cursor: pointer;
}
#mail{
    width: 25px;
    height: 25px;
    

}
#mail:hover{
    background: #ffc400;
    border-radius: 8px;
    cursor: pointer;
}
#inst:hover{
    background: #ff8400;
    border-radius: 8px;
    cursor: pointer;

}
#what:hover{
    background: #04ff00;
    border-radius: 8px;
    cursor: pointer;
    
    
}  

@media (min-width:950px) and (max-width:1150px){
    .contienar{
    width: 98%;
    height: 4000px;
    margin: auto;
    overflow: hidden;
    }
    
    
    
    #hed{
        background: #055;
        width: 97%;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        margin: 10px auto;
        border-radius: 20px ;
        
    }
    
    #hed #li1{
        display: none;
    }
        .n1{
        display: flex;
        align-items: center;
        width: 40%;
    }
    
    
    .callMy{
        width: 30%;
        justify-content: space-between;
    }
    
    
    .logo{
    width: 350px;
    height: 220px;


    }

    

    .navpar{
        width: 90%;
        
        background: #0e0d0d67;
        color: white;
        position: relative;
        /* z-index: 1; */
        border-radius: 8px;
        display: none;
        margin: 20px auto;
       
        
        
        
        
    }
    .navpar a{
        width: 100%;
        color: #fff;
        text-decoration: none;
        font-size: 40px;
        flex-direction: column ;
    }
    .navpar p{
        background: #000;
        font-size: 50px;
        line-height: 60px;
        padding: 20px 10px;
        margin: 5px 0;
        border-radius: 8px;


    }
    
    .navpar a:hover, .navpar p:hover{
        background: wheat;
        color: #fff;
        cursor: pointer;
        border-radius: 3px;
        line-height: 60px;
        

    }
    
    
    #open{
        cursor: pointer;
        display: block;
        width: 70px;
        height: 70px;
    }
    .btnOpen{
        align-items: center;
        
    }
    #close{
        cursor: pointer;
        width: 70px;
        height: 70px;
        display: none;
    }
    #dark{
        display: block;
        width: 70px;
        height: 70px;
        border: none;
        
        
    }
    #sunny{
        display: none;
        cursor: pointer;
        width: 70px;
        height: 70px;
        border: none;
    }
    
    
    
    /*Calllll*/

    #callD{
    cursor: pointer;

    width: 70px;
    height: 70px;
}
    #callS{
        display: none;
        cursor: pointer;
    
        width: 70px;
        height: 70px;
    }
    
    .contact{
        
        margin:20px auto;
    }
    .contact ul li, .cv2 ul li{
        font-size: 25px;
        line-height: 50px;
    }
    
    .var{
        width: 60%;
    }
    
    .cv1{
        
        margin: 20px auto;
    }
    .cv1 p{
        font-size: 35px;
        letter-spacing: 5px;
        word-spacing: 5px;
        line-height:  60px;
        
        
    }




    .cv2{
        
        margin:20px auto ;
    }
    
    .table{
        
        margin: 30px auto;
    }
    #table{
        height: 100%;
    }
    #table tr th{
        font-size: 40px;
    }
    #table tr td{
        font-size: 35px;
    }
    
    .mad{
        height: 700px;
    }
    
    
    
    #wahtsapp, #facebook, #instagram{
        height: 100px;
    }
    #wahtsapp a, #facebook a, #instagram a{
        font-size: 60px;
    }
    #wahtsapp img, #facebook img, #instagram img{
        width: 60px;
        height: 60px;
    }
    
    .footer{
       margin: 25px auto;
    }
    .logoimg, .logoimg img{
        height: 600px;
    }
    .lam{
        height: 50px;
    }
    
    .fot{
        margin: 0 auto;
    }
    
    .fotP p{
        font-size: 40px;
        line-height: 50px;
    }
    .fotS{
        margin: 20px auto;
        height: 150px;
        background: #000;
        border-radius: 10px;
    }
    
    #mail{
    width: 70px;
    height: 70px;
    

    }
    
    .fotS img{
    width: 80px;
    height: 80px;
    margin: 20px 5px;
    }
    
    
    
    /*h2 */
    
    .contienar h2{
        font-size: 50px;
    }
    
    
    
    
    





}