body{
    padding: 0;
    margin: 0;
    direction: rtl;
    background-color: rgb(234, 234, 234);
    
}

#firstpart{

    width: 100%;
    display: flex;
    flex-direction: row;
    height: 20vh;
    
    
   
    

}

#firstpart section{
    width: 20%;
    /* background-color: red; */
    margin:0 15%;
    padding: 3vh 0;
    
}
#firstpart section img{
    width: 30%;
    height: 13vh;
}
#firstpart section:nth-child(2){
    position: relative;
}
#firstpart section div a {
    text-decoration: none;
    color: white;

}
#firstpart section div:first-child{
    width: 20%;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    padding: 6vh 0  1vh 0;
    background-color: rgb(67, 66, 163);
    box-sizing: border-box;
    border-radius: 0 0 20% 20%;
    
}
#firstpart section div:first-child:hover{
    background-color: rgb(130, 128, 241);
}

#firstpart section div:nth-child(2){
    width: 20%;
    position: absolute;
    top: 0;
    left: 30%;
    padding: 6vh 0  1vh 0;
    background-color: rgb(67, 66, 163);
    box-sizing: border-box;
    text-align: center;
    border-radius: 0 0 20% 20%;

}
#firstpart section div:nth-child(3){
    width: 20%;
    position: absolute;
    top: 0;
    left: 60%;
    padding: 6vh 0  1vh 0;
    text-align: center;
    background-color: rgb(78, 183, 78);
    box-sizing: border-box;
    border-radius: 0 0 20% 20%;
    height: 12vh;
    overflow: hidden;

}
#firstpart section div:nth-child(3):hover {
    overflow: visible;
}

#firstpart section div:nth-child(3) main{
    width: 600%;
    /* height: 40vh; */
    background-color: white;
    position: absolute;
    left: 70%;
    border-radius: 20px;
    border-top: 5px solid black;
}
#firstpart section div:nth-child(3) main h3{
    display: inline-block;
    direction: rtl;
}
#firstpart section div:nth-child(3) main h3:first-child {
    width: 20%;
    padding: 0.5vh;
    background-color: rgb(207, 207, 248);
    font-size: 0.9em;
    border-radius: 30px ;
    margin-left: 25%;

}


#firstpart section div:nth-child(3) main h3:nth-child(2) a {
    color: rgb(67, 66, 163);
    text-decoration: none;
}

#firstpart section div:nth-child(3) main button {
    width: 100%;
    padding: 2vh 0;
    cursor: pointer;
    background-color: rgb(207, 207, 248);
    border-radius: 50px;
    margin-top: 20vh;
}
#firstpart section div:nth-child(3) main button:hover{
    background-color: rgb(120, 120, 218);
}

#menu{
    width: 100%;
    background-color: red;
    margin-bottom: 20vh;
}
#menu div{
    float: right;
    
}
#menu div:first-child{
    width: 70%;
    background-color: rgba(72, 44, 97, 0.841);
    margin: 0 2.5% ;
    border-radius: 50px;

}
#menu div:nth-child(2){
    width: 20%;
    /* background-color: rgb(143, 90, 171); */
    margin: 0 2.5%;
}
#menu div:nth-child(2) ul li{
    width: 5% ;
    margin: 0 6%;
}
#menu div ul li{
    width: 8%;
    margin: 0 0.5%;
    display: inline-block;
    list-style: none;
    text-align: center;
    color: white;
    padding: 0.7vh 0;
}

#menu div ul li a{
    text-decoration: none;
    color:white ;
    font-weight: bold;
    /* font-size: large; */
}
#menu div ul li a:hover{
    color: rgb(216, 216, 216);
}
#mainshop{
    
    clear: both;
    width: 90%;
    height: 90vh;
    margin: 0 auto;
    display: flex;
    flex-direction: row;

}
#mainshop a{
    text-decoration: none;
    color: black;
}
#mainshop div{
    margin: 20px;
}
#mainshop div:first-child{
    width: 20%;
    height: 60vh;
    background-color: white;
    border-radius: 20px;
    text-align: center;
    
}
#mainshop ul li{
    list-style: none;   
    padding: 3vh 0;
    font-weight: bold;

}

#mainshop div:nth-child(2){
    width: 45%;
    
    border-radius: 20px;
}
#mainshop div:nth-child(2) img{
    width: 100%;
    border-radius: 20px;
    height: 90vh;
}


#coloums{
    display: flex;
    flex-direction: column;
    
    width: 25%;
    height: 60vh;
    border-radius: 20px;
   
}
#coloums section{
    width: 100%;
    

}
#coloums section:first-child{
    margin-bottom: 10px;
}
#coloums section img{
    width: 100%;
    border-radius: 20px;
    
}
#poster{
    
    width: 80% ;
    margin: 2% auto;
    height: 30vh;
    
}
#poster img{
    width: 100%;
}

#products{
    width: 80%;
    height: 80vh;
    margin: 0 auto;
    background-color: rgb(234, 234, 234);
   

}
#titlep{
    width: 60%;
    display:flex;
    flex-direction: row;
    

}
#titlep div{
    width: 20%;
    margin: 0 1%;
    padding: 2vh 0;
    
    text-align: center;
    border-radius: 10px 10px 0 0 ;
    transition: all 600ms;
}
#titlep div:first-child{
    background-color: rgba(52, 31, 70, 0.944);
}
#titlep div:hover{
    background-color: rgba(72, 44, 97, 0.841);
    border-radius: 10px 10px 0 0 ;
}
#titlep div a{
    text-decoration: none;
    color: black;
    font-weight: bold;
    display: block;
    width: 100%;
    padding: 1vh 0;
}

#productslist{
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    padding: 5vh;
    border-radius: 10px;
    
}
#productslist div {
    width: 23%;
    margin: 0 1%;
    text-align: center;
    background-color: rgb(234, 234, 234);
    border-radius: 10px;
    padding: 2vh 0;

}
#productslist div img {
    width: 80%;
    
}
.producthover{
    position: relative;
    overflow: hidden;
}
.producthover span:nth-of-type(1) {
    color: green;
}
.productsoverflow{
    background-color: rgb(239, 238, 238);
    position: absolute;
    height: 20vh;
    padding: 4vh 0;
    width: 100%;
    top: 110%;
    transition: all 30ms;

}
.productsoverflow span{
    background-color: #ccf;
    width: 5%;
    height: 5vh;
    font-weight: bold;
    padding: 3vh 0;
    border-radius: 50%;
    


}
.productsoverflow span a{
    text-decoration: none;
    width: 100%;
    padding: 3vh 0;
    border-radius: 50%;
}
.productsoverflow a{
    margin: 0 2%;
    text-decoration: none;
    background-color: #ccf;
    text-align: center;
    padding: 2vh 2%;
    border-radius: 50%;
}
.productsoverflow a:hover{
    background-color: white;
    color : black;

}
.productsoverflow span a:hover{
    background-color: white;
}
.producthover:hover .productsoverflow{
    top: 80%;
}

.comparison {
    width: 35%;
    background-color: #ccf;
    position: absolute;
    top: 110%;
    left: 35%;
    padding: 2vh 0;
    border-radius: 40%;
    font-weight: bold;
    
    
}
.comparison a{
    text-decoration: none;
    padding: 2vh 0;
    color: black  ; 
}
.comparison span {
    color: black !important;
}
.producthover:hover .comparison {
    top: 30%;
}

#productbar{
    width: 80%;
    margin: 0 auto;
    border: 0.7px solid black;
    display: flex;
    flex-wrap: wrap;
    border-radius: 100px;
    background-color: rgb(234, 234, 234);

}

#productbar div:first-child {
    width: 10%;
    
    margin: 0 1.5% ;
    padding: 2vh 0;
    text-align: center;
}
#productbar div:nth-child(2) nav{
    display:flex ;
    flex-wrap: wrap;
    width: 55%;
    background-color: white;
    border-radius: 40px;
    padding: 1vh 2.5vh;
}
#productbar div:nth-child(2) nav section  {
    width: 20%;
    margin: 0 2%;
    
    text-align: center;
    padding: 2vh 0;
    transition: all 200ms;
    
    border-radius: 20px;
}

#productbar div:nth-child(2) nav section:hover{
    transform: scale(1.051);
    background-color: rgb(234, 234, 234);
    border-radius: 20px;
    font-weight: bold;
}
#productbar div:nth-child(2) nav section a{
    color: black;
    text-decoration: none;

}
#productbar div:nth-child(2) nav section:first-child{
    border-radius: 20px;
    background-color: rgb(234, 234, 234);

}
#productbar div:nth-child(2) {
    width: 60%;
    /* background-color: rgb(127, 127, 237); */
    margin: 0 1.5% ;
    display: flex;
    flex-wrap: wrap;
    padding: 6vh 0;
}
#productbar div:nth-child(3) {
    width: 20%;
    /* background-color: yellowgreen; */
    margin: 0 1.5% ;
    padding: 7vh 0 0 0;
}

#productbar div:nth-child(3) i {
    background-color: red;
    width: 3%;
    padding: 1vh;
    margin: 1%;
    border-radius: 50%;
}
#productbar div:nth-child(3) a {
    text-decoration: none;
    margin: 0 8%;
    background-color: rgb(244, 244, 244);
    padding:2vh  2vh;
    border-radius: 50px;
   color: black;
   font-weight: bold;
}

#productbar div:nth-child(3) a:hover{
    background-color: black;
    color:rgb(153, 152, 152) ;
}
#productbar div:nth-child(3) i:nth-child(1) {

    background-color: rgb(252, 252, 252);
}
#productbar div:nth-child(3) i:nth-child(2) {

    background-color: white ;
    cursor: pointer;
}

.mahsolat{
    width: 80%;
    margin: 5vh auto;
    display: flex;
    flex-wrap: wrap;
}

.mahsolat div{
    width: 23%;
    height: 65vh;
    margin: 0 1%;
    background-color: rgb(235, 235, 235);
    box-shadow: 0 0 10px black;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    


}
.mahsolat div img{
    width: 70%;
    height: 50%;
    text-align: center;
    padding: 4vh 6vh;

}
.mahsolat div h3{
    text-align: center;
    margin-bottom: 20%;
}
.mahsolat div a{
    text-decoration: none;
    color: black;
}

.mahsolat div h2{
    padding: 0 5%;
}
.mahsolat div h2 span{
    color: green
}
.overcenter {
    width: 22%;
    padding: 3% 2vh;
    border-radius: 20px;
    background-color: #ccf;
    position: absolute;
    top: 110%;
    left: 40%;
    transition: all 0;
}
.overbottom{
    width: 100%;
    height: 10vh;
    background-color: rgb(235, 235, 235);
    
    position: absolute;
    top: 108%;
    left: 0;
    text-align: center;
    transition: all 1s;
}
.overbottom a{
    width: 20%;
    padding: 2vh 3%;
    margin: 0 5%;
    background-color: #ccf;
    border-radius: 50%;
}

.mahsolat div:hover .overbottom{
    top: 80%;
}

.mahsolat div:hover .overcenter {
    top: 30%;
    left: 31%;
}
.overbottom a:hover{
    background-color: rgb(219, 219, 219);
}

#topsell {
    width: 100%;
    height: 30vh;
    margin-top: 10vh;
    text-align: center;
}

#products2{
    padding: 1vh 1% 0 1%;
    width: 78%;
    margin: 5% auto;
    height: 60vh;
    background-color: rgb(1, 125, 1);
    border-radius: 50px;
    text-align: center;
    
}

#productslist2 {
    
    display: flex;
    flex-wrap: wrap;
    padding: 5vh;
    border-radius: 10px;

}
#productslist2 div {
    width: 23%;
    margin: 0 1%;
    text-align: center;
    background-color: rgb(229, 229, 229);
    border-radius: 10px;
    padding: 2vh 0;
    box-shadow: 0 0 10px black;

}
#productslist2 div img {
    width: 80%;
    
}

#blog{
    width: 80%;
    margin: 0 auto;
    margin-top: 35vh ;
    text-align: center;
    

}
#blog h1 span{
    background-color: gray;
    padding: 0 4px;
    

}
#blog h3{
    
    width: 8%;
    margin: 0 auto;
    padding: 1vh 0;
    text-align: center;
    background-color: green;
    border-radius: 50px;


}
#blog h3 a{
    text-decoration: none;
    color: white;
    padding: 1vh 0;
    width: 100%;
}

#blog div {
    width: 30% ;
    margin:5%  1% ;
    
}

#blog div img{
    width: 100%;
    height: 21vh;
}
#blog div section {
    width: 100%;
    height: 8vh;
    margin-top: 0;
    background-color: rgb(44, 44, 172);
}
#blog div section h5{
    display: inline-block;
    width: 30%;
    text-align: right;
    color: white;


}
#blog div section h5:nth-child(2){
    margin-right: 80px;
}
#blog div section h5 span{
    color: orange;
}
#blog div h4{
    text-align: right;
    padding: 0 15px;
    
}
#blog div h4 a{
    text-decoration: none;
    color: rgb(2, 2, 69);
    font-weight: bolder;
    font-size: 1.1em;
}
#blog div h4 a:hover{
    color: rgb(33, 33, 131);
    text-shadow: 0 0 3px black;
}
#blog div p {
    text-align: justify;
    padding:0 10px;
}
#blogmainflex{
    display: flex;
    flex-wrap: wrap;
}

footer{
    width: 80%;
    height: 80vh;
    margin: 0 auto;
    
    display: flex;
    flex-wrap: nowrap;

}
footer div{
    width: 30%;
    
    margin: 1% ;
    
}
footer div span{
    margin-left: 40px;
    font-size: 1.1em;
    font-weight: bold;
}
footer div:first-child a{
    text-decoration: none;
    margin: 6px;
}
footer div:first-child p {
    margin:5vh 0;
    text-align: justify;
    color: rgb(1, 1, 57);
    font-weight: bold;
}

footer div ul li {
    margin: 5vh 0;
}

footer div ul li a{
    text-decoration: none;
    color: rgb(1, 1, 57);
    font-weight: bolder;
}
footer div:last-child{
    padding: 5vh 0 0 0;
}
footer div:last-child h4{
    display: inline;
    margin: 0 2%;
    
}
footer div:last-child h4 strong {
    font-size: 1.4em;
    color: rgb(1, 1, 57);
}

footer div:last-child input {
    width: 80%;
    height: 4vh;
    border-radius: 40px;
    margin: 3vh 0;
    
}

footer div:last-child input::placeholder{
    color: rgb(1, 1, 57);
    font-size: 1.3em;
    font-weight: bold;
    padding: 2vh;
}

footer div button {
    width: 30%;
    background-color: rgb(36, 36, 122);
    color: white;
    padding: 2vh 0; 
    border-radius: 40px;
    cursor: pointer;
    font-weight: bold;
}
footer div button:hover{
    background-color: rgb(71, 71, 185);
}

#bottom{
    width: 80%;
    margin: 0 auto;
    height: 15vh;
    background-color: rgb(44, 44, 172);
    border-radius:60px 60px 0 0;
}