*{
font-family: 'Borel', cursive;
font-family: 'Caveat Brush', cursive;
font-family: 'Kanit', sans-serif;
font-family: 'Metamorphous', serif;
font-family: 'Shadows Into Light', cursive;
font-family: 'Ubuntu', sans-serif;
font-family: 'Young Serif', serif;
padding: 0;
margin:  0;
}
body{
  /*  background-image:linear-gradient(to right,#01022d,#000);  */
  background-color:white;
  background-image: url(wh1.jpg);
  height: 100vh;

}
.fo center{
    
    text-decoration: underline white 1px ;
    text-decoration-style:solid;
    color: rgba(255, 255, 255, 0.808);
    
   
}

@media(max-width:700px){
 
  
}

.container{
    
    display: grid;
    grid-template-columns:repeat(4,2fr);
    grid-auto-rows:70px 800px 200px 950px;
    grid-template-areas: "nav nav nav nav"
                          "content content content content "
                          "detail detail detail detail"
                          "footer footer footer footer";
    grid-gap:5px;
}


.content{
 grid-area:content;
margin-left: 13%;
margin-right: 10%;
padding-top: 20px;

 
}

.item img{
    height: 750px;
    border-radius:20px;
    
    

}

.detail{
    grid-area: detail;
    display: grid;
    grid-template-columns:repeat(6,1fr);
    grid-auto-rows:minmax(auto,auto);
    grid-gap:5px;
    grid-column: 1/6;
    grid-row: 4/6;
    justify-content: center;
    padding:5px;
    margin: 5px;
    justify-content:center;
    padding-top:70px;
    padding-bottom:70px;
}
.left{
   
    grid-column: 1/3;
    grid-row: 1/7;
    background-image: url(bedroom1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: aliceblue;
    
   
   
}
.center{
    grid-column: 3/5;
    grid-row: 1/7;
    background-image: url(kichen6.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  color: aliceblue
}
.right{
    grid-column: 5/7;
    grid-row: 1/7;
    background-image: url(bathroom4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
      color: aliceblue
}
.text{
  direction:rtl ;
      color: rgb(2, 22, 39);
    grid-column: 1/7;
    grid-row: 7/9;
    font-size:24px;;
    margin-top:40px;
    line-height:40px;
}
.footer{
    display: flex;
    justify-content:space-between;
    padding: 20px;
   grid-area: footer;
    color:rgba(187, 185, 185, 0.493);
    background-color: rgb(0, 0, 0);
}



@media (max-width:600px){
 h2,p{
    display: flex;
    justify-content: center;
}
.detail{
    display:flex; 
    justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    


}
.left{
    display:flex; 
    justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;  
    margin: 50px;
}
.center{
    display:flex; 
    justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;  
    margin: 50px;
}
.right{
    display:flex; 
    justify-content: center;
    justify-content: space-between;
    flex-wrap: wrap;  
    margin: 50px;
}
.fo{
    padding-top:15px;
}
 .ri{
    padding-left: 10px; 
    font-size: 12px;
   
    }
.ce{
    padding-left: 10px; 
    font-size: 12px;
}
.le{
    font-size: 12px;

}
li{
    padding-left:20px;
    font-size: 13px;
    line-height:18px;
    }
  } 




#btn{
    position: fixed;
    bottom: 10px;
    right: 10px;
    opacity:0.2;
   /* background-image:linear-gradient(rgba(121, 123, 131, 0.363),rgb(13, 13, 14)) ;*/
    border-radius: 15px 15px 0 0;
    padding:10px;
   /* border-radius: 15px 15px 2px 2px;*/
    cursor: pointer;
    display: none;   
     font-size: 14px;
     transition: 3s ease ;
    
        }
        #btn:hover{
            color: white;
            opacity:1;
        
        }

.owl-carousel  {
    margin-top:5px;

 
  
}
.logo{
    margin-left: 10px ;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 20px;
   
}


     
.fa-solid{
   /* color: rgb(0, 0, 0);*/
    transition: 1s linear;
    padding: 2px;
    }
.fa-solid:hover{
    rotate: 360deg;
     
    }
    hr{
        margin: 5px;
       background-color: blue;
        height:3px;
    }