body {
    margin: 0;
    padding: 0;
    direction: rtl;
}

header nav {
    width: 100%;
    display: flex;
    background-color: rgb(103, 103, 103);
    justify-content: space-between;   
}

header nav div:first-child{
    width: 40%;
    margin:0 15% 0 1%;   
}

header nav div:nth-child(2){
    width: 25%;   
    margin:0 1%;
}

header nav div ul li {
    display: inline;
    border-left: 1px solid black;
    list-style: none;
    margin: 0 0.5%;
    padding: 0 1%;
    font-size: 0.8em;
    font-weight: bold;  
}

header nav div ul li:last-child{
    border-left: none;
}

header nav div ul li a{
    text-decoration: none;
    color: rgb(198, 198, 198);
}

header nav div ul li a:hover {
    color: white;
}

header nav div:nth-child(2) {
    padding: 2vh 0;
}

header nav div:nth-child(2) a{   
    text-decoration: none;
    color: white;
}

.menu {
    width: 100%;
    display: flex;
    /* background-color: greenyellow; */
    justify-content: center;
}

.menu div:first-child{
    display: none;
    padding: 2vh ;
    text-align: center;
}
.menu div:first-child a{
    font-size: 1.8em ;
    
    /* margin-right: 2%; */
    
}
.menu div:first-child a{
    text-decoration: none;
    color: black;   
}

.menu div:nth-child(2) {
    width: 20%;
    margin: 1%;
    
}

.menu div:nth-child(2)  img {
    width:80%;
    margin: 0 1%;
}

.menu div:nth-child(3) {
    width: 80%;
    margin: 0 1%;
    
    text-align: center;
}
.menu div:nth-child(3) > ul li {
    display: inline-block;
    margin: 0.5%;
    list-style: none;
    width: 12%;
    padding: 1.5vh 0;
    
}
.menu div:nth-child(3) > ul li a:hover{
    color: green;
}
.menu div:nth-child(3) > ul > li:first-child{
    position: relative;
}
.menu div:nth-child(3) > ul > li > a {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.menu div:nth-child(4) {
    width: 10%;
    margin: 0 1%;
    
    padding: 3vh 0;
}

.menu div:nth-child(4) a {
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 1.8em;
}

.hidemenu {
    display: none;
    position: absolute;
    background-color: white;
    width: 700%;
    right: 0;
    top: 100%;
}
.hidemenu ul {
   /* float: right; */
   display: inline-block;
    width:20%;
    
    margin: 1%;

}
.hidemenu ul li {
    /* display: block; */
    width: 100% !important;
    color: rgb(86, 84, 84);
    margin: 1%;
    padding: 1%;
    font-weight: bold;
    
}
.hidemenu ul li a{
    width: 100%;
    text-decoration: none;
    color: rgb(86, 84, 84);
}
.hidemenu ul li span{
    color: green;
}
.hidemenu ul li a:hover{
    color: green;
}

.menu div:nth-child(3) > ul > li:first-child:hover .hidemenu{
    display: block;
}

.baner {
    width: 100%;
    height: 80vh;
}
.baner img{
    width: 100%;
    height: 100%;
}
.menu div:nth-child(3) > ul > li:nth-child(3) {
    position: relative;
}
.hidemenu2{
    position: absolute;
    top: 100%;
    right: 0;
    width: 200%;
    background-color: white;
    display: none;
    
    

}
.hidemenu2 ul{
    background-color: white;
    width: 100%;
    padding: 0 ;
    
   
}
.hidemenu2 ul li {
    width: 100% !important;
    border-bottom: 1px solid black;
    padding: 1vh;
    text-align: right;
}
.hidemenu2 ul li a{
    text-decoration: none;
    color: rgb(86, 84, 84);
    padding: 0 1vh;
    font-weight: bold;
}

.menu div:nth-child(3) > ul > li:nth-child(3):hover .hidemenu2{
    display: block;
}
.products {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* transition: all 1s; */
    
}
.products div {
    width: 24.6%;
    height: 20vh; 
    margin: 0.1%;
    transition: all 500ms;
    
}
.products div img {
    width: 100%;
    height: 100%;
    
   
}

.products:hover div:not(:hover) {
    filter: grayscale(100%);
    /* transform: scale(0.95); */
    
    

}
.mahsolat {
    width: 100%;
}
.mahsolat div{
    
    width: 49.8%;
    margin: 0.1%;
    float: right;
    height: 60vh;

}
.mahsolat div img {
    width: 100%;
    height: 100%;
}
.mahsolat div:last-child{
    display: flex;
    flex-wrap: wrap;

}
.mahsolat div:last-child section{
    width: 49.8%;
    height:49.8%;
    margin: 0.1%;
    position: relative;
    filter: grayscale(80%);
    transition: all 500ms;

}
.mahsolat div:last-child section:hover{
    filter: grayscale(0%);
}


.mahsolat div:first-child{
    position: relative;
    filter: grayscale(80%);
    transition: all 500ms;
}
.mahsolat div:first-child:hover {
    filter: grayscale(0%);
}
.mahsolat > div:first-child > p {
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: bold;
    font-size: 1.2em;
    color: white;
    padding: 0 2%;
}
.mahsolat > div:first-child > p >a {
    color: white;
    text-decoration: none;
}
.mahsolat div:last-child section a{
    text-decoration: none;
    color: white;

}
.mahsolat div:last-child section p{
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: bold;
    font-size: 1.2em;
    padding: 0 2%;
}

.greenBack{
    clear: both;
    background-color:#f5f5f5;
    width: 100%;
    color: gray;
    padding: 6vh 0;
}
.greenBack > div {
    width: 80%;
    margin:0 auto;
   
    display: flex;
    padding: 2vh 2%;
}

.greenBack > div > section {
    display: flex;
}
.greenBack > div > section:first-child{
    width: 38%;
    margin: 0 1%;
    border-left: 1px solid black;
}

.greenBack > div > section:nth-child(2){
    width: 58%;
    margin: 0 1%;
    
}
.greenBack > div > section:first-child >div:nth-child(2) {
    border: 1px solid black;
    padding: 2vh ;
    margin-top: 4vh;
    width: 30%;
    text-align: center;
    margin-right: 9%;
    transition: all 300ms;
}
.greenBack > div > section:first-child >div:nth-child(2) a {
    text-decoration: none;
    color: gray;
    font-size: 1.5em;
    font-weight: bold;
    width: 100%;
    display: block;
}
.greenBack > div > section:first-child >div:nth-child(2):hover {
    color: green;
    border: 2px solid green;
}
.greenBack > div > section:first-child >div:nth-child(2):hover a{
    color: green;
    
}

.greenBack > div > section:nth-child(2) > div:first-child{
    width: 58%;
    margin: 0 1%;


}

.greenBack > div > section:nth-child(2) > div:nth-child(2){
    width: 38%;
    margin: 0 1%;
    text-align: center;
    padding: 3vh 0;
}

.greenBack > div > section:nth-child(2) > div:nth-child(2) a {
    text-decoration: none;
    color: gray;
    margin: 0 3%;
    font-size: 2em;
}

.greenBack > div > section:nth-child(2) > div:nth-child(2) a:hover{
    color: green;
}

footer {
    width: 100%;
    background-color:#ebebeb;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
footer div {
    width: 10%;
    margin: 0 2%;
}

footer div ul {
    width: 100%;
    /* background-color: white; */
}

footer div ul li {
    margin: 2vh 0;
    list-style: none;
}
footer div ul li a {
    color: gray;
    text-decoration: none;
}
footer div ul li:first-child {
    font-size: 1.2em;
    font-weight: bold;
    color: rgb(36, 36, 36);
}
footer div ul li a:hover {
    color: green;
}

.copyright {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgb(56, 56, 56);
    padding: 1vh 0;
}

.copyright div:first-child {
    width:80% ;
    margin: 0 1%;

}

.copyright div:first-child a{
    text-decoration: none;
    color: white;
    margin: 0 0.8%;
}
.copyright div:first-child p {
    color: #adacac;
}

.copyright div:nth-child(2) {
    width: 12%;
    margin:0  1%;
    padding: 1.5vh 0;

}
.copyright div:nth-child(2) a{
    text-decoration: none;
    color: white;
}

.copyright div:nth-child(2) span {
    color: #adacac;
}



@media  screen and (min-width: 100px) and (max-width: 900px) {
    header nav div:first-child{
    width:78%;
    margin:1%;   
    }
    header nav div:nth-child(2){
    width: 20%;   
    margin:0 1%;
    }  
    .menu div:first-child{
    display: block;
    width: 20%;
    margin:0 1%;
    }

    .menu div:nth-child(2) {
    width: 70%;
    margin: 1%;
    
    }

    .menu div:nth-child(3) {
    display: none;
    }

    .baner {
    width: 100%;
    height: 25vh;
    }

    .products{
        flex-wrap: nowrap;
        flex-direction: column;
        width: 100%;
    }

    .products{
        float: none;
    }
    .products div{
        width: 100%;
        height: 19vh;
        margin: 0.3%;
        
    }
    .mahsolat div{
        float: none;
    }
    .mahsolat div:first-child{
        display: none;
    }

    .mahsolat div:last-child {
    flex-wrap: nowrap;
    flex-direction: column;
    width: 100%;
    

    }

    .mahsolat div:last-child section{
    width:100%;
    height: 22vh;
    

    }

    .greenBack{
        display: none;
    }

    footer{
        margin-top: 30vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }
    
    footer div{
        width: 100%;
    }

    footer div ul {
        width: 100%;
        padding: 0;
        padding-right:2% ;
    }

    .copyright {
        display: flex;
        flex-direction: column;
        width: 100%;
        flex-wrap: nowrap;


    }

    .copyright div{
        width: 100%;
        text-align: center;
    }
    .copyright div:last-child{
        display: none;

    }
}