*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

}
body{
    font-family: 'Poppins', sans-serif;
}
.header{
    width:100%;
    background-image: radial-gradient( white ,#ffd6d6 );
    padding-bottom: 20px;
    
}

.navbar{
    display:flex;
    align-items: center;/*virtacally align depending on hight*/
    padding: 20px;
}

.logo{
    width:125px;
   
}
nav{
    flex:1;
    text-align: right;
}
nav ul{
    list-style: none;
    display: inline-block;

}
nav ul li{

    display: inline-block;
    margin-right: 20px;


}
.navul800{
    display: none;
}
nav ul li a{
    text-decoration: none;
    color: #555;

}
.cart{
    text-decoration: none;
    color: #555;

}
.menu-bar{
    display: none;
    margin-left: 20px;
    color: #555;
}
p{
    color: #555;
}
.headercontainer{
    max-width: 1300px;
    padding: 0px 25px;


}
.row{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    padding: 0px 25px;
   
}

.cols2{
    flex-basis: 50%;
    min-width: 300px;
}
.cols2 h1{
font-size: 50px;
margin: 25px 0px;
line-height: 120%;
}

.headerimage{
    padding:  50px 0px 50px 100px;
    max-width:100%;
    height: 535px;
    

}

.red-btn{
    text-decoration: none;
    display: inline-block;
    background-color: #ff523b;
    color:#fff;
    padding: 8px 30px;
    margin: 30px 0px 0px  ;
    border-radius: 30px;
    transition: 0.5s;
}
.red-btn:hover{

    background-color: #563434;
    
}

.sections_container{
    max-width: 1080px;
    margin: 70px auto;
    padding: 0 25px;
}
.col3{
    
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom:  70px ;
}
.cat-image{
    width: 100%;
}
.sections_titles{
    text-align: center;
    margin: 50px 0px ;
    position: relative;
    color:#555;
    line-height: 200%;
}
.sections_titles::after{
    content: '';
    background-color: #ff523b;
    width: 80px;
    height: 5px;
    position:absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    
    
}

.col4{
    flex-basis: 25%;
    width: 200px; 
    padding: 10px;
    margin-bottom: 50px ;
    transition: transform 0.5s;
   /*box-shadow: 0 0 20px rgba(0,0,0,0.1);*/
}
.col4 img{
  width: 100%;
}
.col4 h4{
 color: #555;
 font-weight: normal;
}

.col4 p{
 font-size: 14px;
}
.rating i{
    color:#ff523b;
}
.col4:hover{
    transform: translateY(-8px);
}
/*------offer--------*/
.offer_image{
    width: 360px;
    padding: 20px;
    
}

.offers{
    width: 100%;
    background-image: radial-gradient( white ,#ffd6d6 );
    padding: 30px 200px;
    margin-top: 80px;

}
.small_text{
    font-size: small;
    color:#555;
}
/*---------------reviews---------*/
.reviews{
    text-align: center;
    padding: 50px 100px 0px;
    
}
.reviews .col3{
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    padding: 50px 20px;
    transition:  0.5s;
    cursor: pointer;
    
}
.reviews .col3:hover{
    transform: translateY(-10px);
    
}
.reviews .fa-quote-left {
    font-size: 34px;
    color: #ff523b;
    margin-bottom: 20px;
}

 
.reviews p{
 font-size:12px;
 margin: 12px 0px;
 color: #777;
}
.reviews h3{

 color: #555;
 font-size: 16px;
}
.reviews-images{
width: 50px;
 border-radius: 50%;
margin: 30px 0px;
}
/*-----------brands-----------*/
.brands{
    margin: 100px 0px;
}
.col5{
    flex-basis: 20%;
    width:160px;
    margin: auto;
    padding: 0px 30px;
    
}
.col5 a img{
    width: 100%;
    filter: grayscale(100%);
    transition: transform 0.5s;
}
.col5 a img:hover{
    transform: translateY(-5px);
    filter: grayscale(0%);
}
/* ----------------footer-------------*/
.footer{
    background-color: #000;
    padding: 30px 50px 0px;
    
}
.footer .row{
    
    padding-bottom: 30px;
}
.footer-titles{
    color: white;
    margin-bottom: 20px;
}
.footer-p{
    color:rgb(129, 120, 120);
    transition: 0.5s;
}
.footer-p:hover{
    color: white;
    
}
.footer-col1 ,
.footer-col2 ,
.footer-col3 ,
.footer-col4 {
    padding: 20px;
    text-align:center ;
    font-size: 12px;
    
}

.footer-col1 
 {
    flex-basis: 30%;
}
.footer-col1 img
 {
     margin: 20px 0px;
    width:120px;
}
.footer-col2 
 {
    flex:1;/*so it takes all the available space*/

}
.footer-col2 img
 {
  
    width: 200px;
    margin: 20px 0px;

}
.footer-col3 ,.footer-col4 
 {
    flex-basis: 12%;
    
}
.footer-col3 ul, .footer-col4 ul
 {
    list-style-type: none;

}
.footer-li
 {
    text-decoration: none;
    color:rgb(129, 120, 120);
    line-height: 130%;
    transition: 0.5s;
    

}
.footer-li:hover
 {
    
color: white;
padding-right: 5px;
    
}
.footer hr{
    border: none;
    background-color: #555;
    height: 2px;
}
.copy-rights{
    text-align: center;
    padding: 10px;
    font-size: 12px;
}

/*---------------------all products ---------------------*/
.row1{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0px 25px;
    margin-bottom: 40px;
   
}
.row1 h2, .row1 .sortselect, .row1 p{
    
    margin-top: 20px;
   
}
.sortselect{
    display: inline-block;
    color:#555;
    border:#ff523b solid 1px;
    border-radius: 5px;
    padding: 0px 10px;
}
.sortselect:focus{
    outline: none;
}
/*.pages-no{
    padding-right: 20%;
}*/
.pages-no span a{
    color: #555;
    text-decoration: none;
    border:#ff523b solid 1px;
    padding: 5px 10px;
    margin-right: 5px;
}
.pages-no span a:hover{
    color: white;
    background-color: #ff523b;
}

/*------------------small image--------------*/
.single-p-row{
        display:flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        padding: 0px 25px;
       
    
}
.single-p-row h3{
        color: #555;
    
}
#bigimage{
    width:100%;
}
.gal-col{
    width:24%;
    
}  
.gal-col img{
    width:100%;
    
}  
.row2{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
  
}
.single-p-row .cols2{
    padding: 20px;
    

}
.size-select{
    display: block;
    margin: 10px 0px;
    padding: 10px;
    border:1px solid #ff523b;

}
.size-select:focus ,
.single-p-row .cols2 input:focus{
    outline:none;

}
.single-p-row .cols2 h2{
    display: block;
    font-size: 34px;
    margin: 20px 0px;

}
.single-p-row .cols2 input{
    padding: 10px;
    border:1px solid #ff523b;
    width:70px;

}

.product-details{
    margin: 40px 0px;
}
.product-details h4{
    margin-bottom: 10px;
}
.product-details p{
    font-size: 14px;
    color: black;
}
/*.col6{
    
        flex-basis: 15%;
        width: 180px; 
        padding: 5px;
        margin-bottom: 50px ;
        
      
}
.col6 img{
    
      width: 100%;
      
}*/
/*----------------------cart--------------*/
.cart-image{
 width:80px;
 margin-right: 10px;
}
.cart-table {
    width: 100%;
    margin: 50px auto ;
    border-collapse: collapse;
   
}
.cart-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;

}
.cart-row p{
    font-size: 14px;

}

.cart-table tr th {
    text-align: left;
    margin-bottom: 40px;
    background-color: #ff523b;
    color: white;
    padding: 5px;
    font-weight: normal;

}
.cart-table td{
    padding: 10px 5px;
    color: #555;
}
.cart-table input{
    padding: 5px;
    width:50px;
    height: 40px;
    color: #ff523b;
}
.cart-table input:focus{
    outline: none;
}
.cart-table a{
    text-decoration: none;
    color: #ff523b;
    font-size: 12px;
    margin: 5px 0px;
}
.cart-table td:last-child,
.small-table td:last-child{
   text-align: right;
}

.small-table{
    
    display: flex; 
    flex-wrap: wrap;
    justify-content: flex-end;
   
}
.small-table td{
    padding: 10px;
   
}
.small-table table{
    border-top: #ff523b solid 2px;
    width: 100%;
   max-width: 450px;
}
.confirm-btn{
    display: flex;
    justify-content: flex-end;
   
}
/*-------------------------account-----------------*/
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-image: radial-gradient( white ,#ffd6d6 );
    
}
.form-container{
    width: 400px;
    height: 450px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    box-shadow:  0px 0px 20px 0px rgba(0,0,0,0.1);
    overflow: hidden;
    padding: 20px 0px 0px;
}
.form-container form{
    width: 400px;
    padding: 20px;
    transition: transform 0.5s;

}
.form-container form a{
    text-decoration: none;
    color: #555;
    font-size: small;
    

}

.form-container input{
    
    width: 100%;
    height: 40px;
    padding: 5px;
    margin: 10px 0px;
    font-size: 14px;
    border: #ccc solid 1px;
    border-radius: 10px;
    
}

.form-container input:focus{
    
    outline: none;
}

 #register{
     position: absolute;
     top: 100px;
     left: 0px;
     

 }
 #login{
     position: absolute;
     top: 140px;
     left:-400px;
    
    }


 .form-spans span{
    
    font-weight: bold;
    display: inline-block;
    width: 100px;
     padding: 0px 10px;
     cursor: pointer;
     color: #555;
     
 }
 .form-spans {
    display: inline-block;
    
     
 }
 #form-indicator{
     margin-top: 8px;
     border: none;
     background-color: #ff523b;
     height: 3px;
     width: 100px;
     transform: translateX(100px);
     transition: transform 0.5s ;
 }