@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: 'Poppins', sans-serif;*/
   font-family: sans-serif;
   /*color: #000000;*/
  

}



/************ This is the beginning of the container that houses the main row that contains the main text, subtext and image on the home page. This also includes all of the main text, subtext and image in the goal section at the bottom of the home page ******************/


/**********this contains the entire row including the two columns. It spans the entire width of the page ********************************/
.container.home {
    width: 100%;
    margin: auto;
   /* border: 2px solid black;*/

}


/* we don't need this to be applied in the mobile version because the background is white by default ****/
/***** this applies to the main row and the goal row on the home page for the mobile version. We want the background color of the row to be white so the text beneath the main page isn't brown **************/
/*.container.home .row{ 
    background: #fff;
}*/



/*this applies to the mobile version. The column takes up 100% of the width of the page*****/
/*.col-2.home {
    flex-basis: 100%;
   
}*/

/******* the image occupies 100% of the mobile width screen. It fills 100% width of the parent div which is the row and container div ***************/
.col-2.home  img{
    max-width: 100%;
    display:block; /***this rule removes the gap at the bottom of the image inside a flexbox div****/
}


/*********This rule targets the whole text content in the col-2 divs for the mobile version for the main text and goal text  *********************/
/****************** the heading, sub heading and button are positioned and are centered *******************/
.container.home .row .col-2.home.text , .container.home .row.goal .col-2.home.text  { 

    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
   /* border: 1px solid black;*/
}




/**** this increases the space from the top text and the top image **/
.container.home .row .col-2.home.text.main.mobile {

    padding-top: 30px;
   /* border: 1px solid red;*/
}


/**** this increases the space from the top text and the top image **/
.container.home .row .col-2.home.text.main.mobile .shop.button{

   
    margin-top: 20px;
}



/** this increases the space between the goal text and the footer ***/
.container.home .row.goal .col-2.home.text {
  
   padding-bottom: 40px;
}


/**********All the text including the duplicate text is displayed by default, but this rule removes ALL the text from the home page *************/
/**Ideally we only wanted to remove the duplicate text for the top row, so we can display the mobile version of the top text because we want it to appear after the main image, but because each row has the same class names, then ALL the entire text on the home page gets removed including the goal text. ********/
/****** Note that this rule includes both the main text in the top row and goal at the bottom*******/
/***** This rule removes ALL the text on the home page for the main top row and the goal row ************/
.container.home .row .col-2.home.text.main {

    display: none;
}


/********Because ALL the text on the home page has been removed, we can now choose the text we want to appear, which is the mobile version of the main text, and the same goal text that we will use for the mobile and desktop version *************/
/********* this rule displays the main text in the top row and the goal version. The reason we don't have a mobile version of the goal text is because we are using the same text for the mobile and desktop version because we are not positioning the goal text above the image. It remains in the same order as in the desktop version, which is the text comes first before the image, whereas with the top text, the image goes before the text, so we have to write two different versions of the text in the main top row ************/
/* the reason we have to display the goal again here is because the above rule removes all the text in the main row and goal row including the ones in the mobile version **************/
.container.home .row .col-2.home.text.main.mobile, .container.home .row.goal .col-2.home.text.main {

  display: block;

}


/********* this gives you responsive text or font size ************/
/******this is the font size of the title on the home page for the main ttile and goal title **************/
.container.home .row .col-2.home.text.main .title {

    /*font-size: 25px;*/
     font-size: 4.7vw;
     /*font-weight: 600;*/
     padding: 20px 0;
}


/********* this gives you responsive text or font size ************/
/******this is the font size of the title on the home page for the main tile and goal title in the mobile version **************/
.container.home .row .col-2.home.text.main .subtitle {

    /*font-size: 25px;*/
     font-size: 4.2vw;
}



/* shop now button on main page*/
.container.home .row .col-2.home .btn{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
} 


    /**** on button hover we change the background color **************/
    .container.home .row .col-2.home .btn:hover{
       background: #563434;
    }



/************ The end of the container that houses the main row that contains the main text, subtext and image on the home page. This also includes all of the main text, subtext and image in the goal section at the bottom of the home page ******************/






/************ This is the beginning of the categories section that displays the categories including the featured title *****************/





  /***** the categories div contains the entire category content *****************/
  /******* this applies to the entire category section in the desktop version. We create a space between the category images and text above  it. We don't need to increase the space at the bottom of the category  */
    .categories.home{
        margin-top: 0px;
       /* border: 1px solid black;  */ 
    }


/********** this also contains the categories section excluding the featured title. This is the div that creates a space(padding) between the images and the small-container parent div *************/
    .categories.home .small-container.home{
       
        margin: auto;
        padding-left: 25px;
        padding-right: 25px;
       /* border:2px solid black; */
    }

     /**** this is for the 3 columns named col-3. This sets a space at the bottom between the images and the text. The minimum size is 250px ***/
    .categories.home .small-container.home .row.home .col-3.home {          
        min-width: 250px;
        margin-bottom: 30px;
        }
        
      /*** by making the image size 100% the image fills the entire width of the containing div ****************/
      .categories.home .small-container.home .row.home .col-3.home img {
        width: 100%;
        }

        /************category title *******************/
        .categories.home .title{
            text-align: center;
            margin: 0px auto 30px; /*** there will be 30px space from the bottom ****/
            position: relative;
            line-height: 60px;
           /* color: #707070;*/
            font-size: 22px;
            font-weight: 400;

        }
        .categories.home .title::after{
            content: '';
            background: #e6d4a9; /*********category title underline *******************/
            width: 80px;
            height: 5px;
            border-radius: 5px;
            position: absolute;
            bottom: 0; /*** the underline will be at the bottom ******/
            left: 50%; /******* this will be positioned in the middle of the page ***/
            transform: translateX(-50%);
        }

        /***this is the titles for the shampoos, conditioners and moisturisers products on the home page *********/
        .categories.home .small-container.home .row.home .col-3.home h4 {
            font-size: 18px; 
            text-transform: capitalize;
            color: #000000;
            text-decoration: none;
            font-weight: normal;
        }






/************ This is the end of the categories section that displays the categories *****************/






/******************************* product catalog *******************************/


/*****This contains the title and the description in the product category. This creates space between the catalog div and the menu *******/
.row.catalogue{
   padding-top: 20px;
  /* border: 1px solid black;*/
}

/*****This is the title of the product in the product category **************/
.row.catalogue  .list-categories-title{
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    line-height: 60px;
    font-size:22px;
    font-weight: normal;
   /* border: 1px solid red;*/

}


/*****This is the underline under the title in the product category **************/
.row.catalogue  .list-categories-title::after{
    content: '';
    background: #e6d4a9; /*********category title underline *******************/
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


/*****This is the description of each product category in the product catalogue **************/
.list-categories-description {
  margin: 0px auto 50px;
  position: relative;
  line-height: 20px;
  padding-left: 20px;
  padding-right: 20px;

}



/************this is the row in the product category *********************/
.row-catalogue{
    margin-top: 40px;
    margin-bottom: 40px;  
  }


/***** each column in the product catalogue with have the following padding dimensions **/
.col-catalogue {
    padding: 0 10px 40px 10px;
}


/******* each image will fill out the container div***********************/
.col-catalogue img{
    width: 100%;
    padding-bottom: 10px; /* space under each image */
}


/******** this is the product catalog name and price on the home page *************/
.col-catalogue h4{
    font-weight: normal;
    padding-bottom: 5px;/** this gives space between the product name and price ****/
    font-size: 16px;
   /* border:  1px solid black;*/
}

/*********************** end of product catalog **************************************/





/*******************************single product details page *****************************************************/



.small-container.single-product {
   /* width: 90%;*/
   margin: 20px 0;
   
   /* border: 1px solid black;*/
}



.small-container.single-product .col-2 {

    
    min-width: 300px;
    padding: 10px; /***** creates the space between the screen and the image ***********/
  /*  border: 1px solid red; */
}

.small-container.single-product .col-2 img {

   max-width: 100%;
   
}

/************ small images underneath ******************/
.small-img-row{
    display: flex;
    justify-content: space-between;
    margin-top: 5px; /* this gives space between the top 4 small images and the main image */
}


.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}




/******title *************/
.single-product h2, h4{
    
    font-size: 22px;
    font-weight: normal;
    padding-bottom: 3px;
}



/* this is for the dropdown. Makes them fatter *****/
.single-product select{
    display: inline-block;
    padding: 5px;
    font-size: 13px;
  
}

.single-product input{
    width: 60px;
    height: 40px;
    padding-left: 10px;
    /*font-size: 20px;*/
    margin-bottom: 5px;
   /* border: 1px solid #ff523b;*/
}



.single-product-color {
    display: inline-block;
   /* border: 1px solid red;*/
    padding-bottom: 30px;
   /* padding-left: 20px;*/
    
}

/********* this is the dropdown size menu *******************/
.single-product-size {
    display: inline-block;
   /* border: 1px solid red;*/
    padding-bottom: 30px;
    padding-right: 7px;
    
}


input:focus{
    outline: none;
}


/* shop now button on main page*/
.col-2 > p > .btn{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
} 






/******************************* end of single product details page *****************************************************/



/**************************cart page and wishlist page ****************************************/



.cart-page{
    
    font-size: 15px;
   /*padding: 0px 2px;*/
   padding-left: 2px;
   padding-right: 2px;
   padding-bottom: 70px;
    /*border:1px solid black;*/
}



.cart-page h2 {
    
    
    padding-top: 25px;
    padding-bottom: 40px;
    font-weight: normal;
    text-align: center;
}


.cart-page p {
    
    
    padding-top: 10px;
}



table{
    width: 100%;
    border-collapse: collapse;
}



.cart-info{
    display: flex;
    flex-wrap: wrap;
    align-items: center; /****this centers the product name next to the image *********/
}


th{
    text-align: left;
    padding: 5px;
   /* color: #00000;*/
    background: #f7f5ee;
    font-weight: normal;
}



td{
    padding: 10px 5px;

}


td input{
    width: 40px;
    height: 30px;
    padding: 5px;
}


td a{
    display:inline-block; /******** this is an inline link  element so to behave like a block level element, you have to display inline block. This creates a space between the move to wishlist and remove from cart links ***************/
    color: #000000;
    font-size: 12px;
    padding-top: 5px;
  padding-bottom: 5px;
}

td img{
    width: 80px;
    height: 80px;
    margin-right: 10px; 
}

.total-price{
    display: flex;
    justify-content: flex-end;
    
}

.total-price table{
    border-top: 3px solid #000000;
    width: 100%;
    max-width: 350px;
}


td:last-child{
    text-align: right;
   /* padding-top: 0px;*/
}
th:last-child{
    text-align: right;
     padding-right:4px /*********this pushes the options label to the left ***********/
}


.table-row{
    border: 1px solid black;
}

/* shop now button on main page*/
.btn-checkout, .btn-update{
    display: inline-block;
   
     color: #4d4f55;
    background: #be7c54;;
    color: #fff;
    padding: 7px 15px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 10px 0;
    border-radius: 30px;
    transition: background 0.5s;
    border: none;
    cursor:pointer;
} 



.btn-checkout:hover, .btn-update:hover{

   
background:#c1b872;
color: #000000;

}


/********* this removes the grey padding from the table header in the cart form **/
#cart-form th {
    background: #fff;
    
}

/**************************end of cart page and wishlist page ****************************************/





/**************************checkout page ****************************************/


.small-container.checkout {
    padding-left:10px;
    padding-right: 10px;
}


.small-container.checkout .row { 
  
  width: 100%;
 
  align-items:normal;
  
  background: white;
  
 font-size: 15px;
}


.small-container.checkout .col-1{
       min-width: 300px;
    transition: transform 0.5s;
    margin-bottom: 20px;
     padding-left: 15px;
    padding-right: 15px;
    padding-top: 25px;
    /*background-color: #F8F8F8;*/
  /*  padding-left: 60px;*/
  /* border: 1px solid green;*/
 

   
}


.small-container.checkout h2 {
    font-weight: normal;
}





/* this prevents the main image in the homepage from creatinng a space between the bottom **/

.small-container.checkout .col-2{
      /* min-width: 300px;*/
    transition: transform 0.5s;
    font-size: 13px;
    /*background-color: #F8F8F8;*/
    margin-bottom: 30px;
   /* padding-left: 5px;
   /* border:  1px solid #555;*/
    /*color: #555;*/
    border: none;
    font-size: 15px;
     padding-left: 15px;
    padding-right: 1px;
   /* border: 1px solid red;*/ 
    
}




td:last-child{
    text-align: right; /*****pushes the move to wishlist to the end of the cart table ****/
}



th{
    text-align: left;
    padding: 5px;
   /* color: #00000;*/
   /* background: #f7f5ee;*/
    background: white;
    font-weight: normal;
}









/* shop now button on main page*/
.btn-billing{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
    cursor: pointer;
    border: none; /**********removes border outline from button **********/

} 



    /**** on button hover we change the background color **************/
    .btn-billing:hover{
       background: #563434;

    }





/***************checkout form ********************************/
/*form input{
    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   
}*/
form input:focus{
    outline: none;
}



#checkout-form input{

    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   

}


#checkout-form input[type=checkbox] {
    position:relative;
    width: 20px;
    height: 20px;
    left: 210px;
    top: -29px;
     
}



/**************************end of checkout page ****************************************/



/************************** billing page ****************************************/



.small-container.billing {
    padding-left:10px;
    padding-right: 10px;
}


.small-container.billing .row { 
  
  width: 100%;
 
  align-items:normal;
  
  background: white;
  
 font-size: 15px;
}




.small-container.billing .col-1{
       min-width: 300px;
    transition: transform 0.5s;
    margin-bottom: 20px;
     padding-left: 15px;
    padding-right: 15px;
    /*background-color: #F8F8F8;*/
  /*  padding-left: 60px;*/
  /* border: 1px solid green;*/
 

   
}


.small-container.billing h2 {
    font-weight: normal;
}





/* this prevents the main image in the homepage from creatinng a space between the bottom **/

.small-container.billing .col-2{
      /* min-width: 300px;*/
    transition: transform 0.5s;
    font-size: 13px;
    /*background-color: #F8F8F8;*/
    margin-bottom: 30px;
   /* padding-left: 5px;
   /* border:  1px solid #555;*/
    /*color: #555;*/
    border: none;
    font-size: 15px;
     padding-left: 15px;
    padding-right: 15px;
   /* border: 1px solid red;*/ 
    
}





td:last-child{
    text-align: right; /*****pushes the move to wishlist to the end of the cart table ****/
}



th{
    text-align: left;
    padding: 5px;
   /* color: #00000;*/
   /* background: #f7f5ee;*/
    background: white;
    font-weight: normal;
}









/* shop now button on main page*/
.btn-billing{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
    cursor: pointer;
    border: none; /**********removes border outline from button **********/

} 



    /**** on button hover we change the background color **************/
    .btn-billing:hover{
       background: #563434;

    }




   
/***************billing form ********************************/
/*form input{
    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   
}*/
form input:focus{
    outline: none;
}



#billing_form input{

    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   

}





/**************************end of billing page ****************************************/


/*******************final *********************************/

#final {
   
  /*  border: 1px solid green; */
    width: 100%%;
    padding: 40px 60px;
    margin: auto;
    text-align: center;
    margin-bottom: 80px;
}



#final h2 {
    
    font-weight: normal;
    padding-bottom: 25px;
}


#final p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************final *********************************/




/*******************empty shopping cart *********************************/

#emptycart {
   
   /* border: 1px solid green; */
    width: 100%;
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 40px;
}



#emptycart h2 {
    
    font-weight: normal;
    padding-bottom: 25px;
}


#emptycart p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************end of empty shopping cart *********************************/




/*************** wishlist page **********************************************/

/* shop now button on main page*/
.btn-wishlist{
    display: inline-block;
   
     color: #4d4f55;
    background: #be7c54;;
    color: #fff;
    padding: 7px 15px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 10px 0;
    border-radius: 30px;
    transition: background 0.5s;
    border: none;
    cursor:pointer;
} 



.btn-wishlist:hover{

   
background:#c1b872;
color: #000000;

}


/*************** end of wishlist page **********************************************/



/*******************empty whishlist cart *********************************/

#emptywishlist {
   
   /* border: 1px solid green; */
    width: 100%;
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 40px;
}



#emptywishlist h2 {
    
    font-weight: normal;
    padding-bottom: 25px;
}


#emptywishlist p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************end of empty shopping cart *********************************/




/* button on the product details page shows SOLD OUT*/
.btn-noItems{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
    border: none; /**********removes border outline from button **********/

} 


/*this applies to the cart. When stock is low or zero, this shows*/
    
 .low-stock  td:last-child {
   
    text-align: left;
    color: red;
    padding-bottom: 60px;
  }
        

/******************************************************************************************************/
/****************************************tablet version *********************************************/
@media only screen and (min-width: 793px) {



/************ This is the beginning of the container that houses the main row that contains the main text, subtext and image on the home page. This also includes all of the main text, subtext and image in the goal section at the bottom of the home page ******************/
  
            
        /***** we remove the main text at the top of the page for the mobile version, otherwise duplicate text will appear in the desktop version. We don't need to remove one for the goal text because we are still using the same text in the mobile and desktop versions. **************/      
        .container.home .row .col-2.home.text.main.mobile {

           display:none;

        }   

         /******* This displays the main text on the home page for the main text at the top of the page. We don't need to display for the goal because we haven't removed it, because we use the same text in the mobile and desktop version. ***********************/
        .container.home .row .col-2.home.text.main{

           display: block;
         }

        /** we didn't need to use flex in the mobile version because we want the text and images to appear on top of each other and not side by side ************/
        /**this applies to the main row and the goal row on the home page. They both have the following rules in common ***/
        .container.home .row{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
            background: radial-gradient(859px at 10% 20%, rgb(245, 220, 154) 0%, rgb(164, 78, 51) 90%);
        }



        /**this applies to the main goal row and colors this a different color from the orginal row above *****/
        .container.home .row.goal{
            background: repeating-radial-gradient(#fff, #cdb38b);
        }


          /* the left and right div take up 50% of the page*****/
        .col-2.home {
            flex-basis: 50%;
            min-width: 300px;
        }

        .col-2.home  img{
            max-width: 100%;
          /*  vertical-align:top; /***this rule removes the gap at the bottom of the image inside a flexbox div****/
            display:block; /***this rule removes the gap at the bottom of the image inside a flexbox div****/
        }




        /*********This rule targets the whole content in the col-2 divs that contain the text only in the left divs. This includes the ***/
        /** heading, sub heading and button, including all the text in the goal section. We do
         * this because we don't want to have any padding in the right images. We want the images to completely fill up the div containers ****/
        .container.home .row .col-2.home.text, .container.home .row.goal .col-2.home.text { 

            
            text-align:initial; /**** this sets the text to its default position in the tablet view *******/
           /* border: 1px solid green; */
             
        }
        
        /********* this gives you responsive text or font size ************/
        /**** this targets the title text only (no paragraph text) on the main page including the main goal title text. *****/
        /*** this makes the title text responsive so it resizes with the image, so the title doesnt remain a fixed size while the image gets smaller or bigger *****/
        .container.home .row .col-2.home.text.main .title, .container.home .row.goal .col-2.home.text.main .title { 

            
                  font-size: 3vw;
                  font-weight: 600;
        }


        /********* this gives you responsive text or font size ************/
       /******this is the font size of the subtitle on the home page for the main subtitle and goal subtitle **************/
        .container.home .row .col-2.home.text.main .subtitle {

            /*font-size: 25px;*/
             font-size: 1.6vw;
        }



/************ The end of the container that houses the main row that contains the main text, subtext and image on the home page. This also includes all of the main text, subtext and image in the goal section at the bottom of the home page ******************/






/************ This is the beginning of the categories section that displays the categories *****************/

       /***** the categories div contains the entire category content *****************/
  /******* this applies to the entire category section. We create a space between the category images and the row containing the goal below it. In the mobile version we didnt need any bottom margin, but we do need some for the larger screens  */
    .categories.home{
        margin: 70px 0;
       /* border: 1px solid black;  */
    }


           
      /** what this does is make the row 90% in width from the screen, and creates padding between the left and right images and the small container parent div *******/
      .categories.home  .small-container {
            width: 90%;
            margin: auto;
            padding-left: 25px;
            padding-right: 25px;
          /*  border:2px solid red;  */
        }


         /** this makes the row inside the categories container a flexbox ********/
        /***** this applies to the main categories row on the home page. The row has a white background and that's why we have to differentiate it from the other rows that have different background colors**************/
        .categories.home .row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-around;
           }

       
       /***** this rule applies to the col-3 columns in the categories section on the home page **********/
       /********** Each columns/image will occupy 30% space ********/
       .categories.home .small-container.home .row.home .col-3.home {
            flex-basis: 30%;
            min-width: 250px;
            margin-bottom: 30px;
        }



        /***** this rule applies to the col-3 columns in the categories section on the home page **********/
       .categories.home .small-container.home .row.home .col-3.home img{
            width: 100%;
        }

/************ This is the end of the categories section that displays the categories *****************/







/************ This is the beginnig of the product catalogue section *****************/

     
/************this is the row in the product catalogue *********************/


 /** what this does is make the row 90% in width from the screen, and creates padding between the left and right images and the small container parent div *******/
      .small-container .catalogue {
           /* width: 90%;*/
            margin: auto;
            padding-left: 20px;
            padding-right: 20px;
          /*  border:2px solid red;  */
        }



.row-catalogue{
    margin-top: 40px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;  
    align-items: flex-start;
    justify-content: flex-start;
    padding-bottom: 100px; /**** creates a space between the product images and the footer ************/
    
  }


/************these are the individual columns in the list category. 4 images in a row *********************/
.col-catalogue{
    flex-basis: 25%; /* all the columns will occupy 25% of space of the page/container */
    padding: 10px;
    transition: transform 0.5s;
}


/******* each image will fill out the container div***********************/
.col-catalogue img{
    width: 100%;
    padding-bottom: 10px; /* space under each image */
}


.col-catalogue:hover{
    transform: translateY(-5px);
}


/*****This is the description in the list category **************/
.list-categories-description {
 /* text-align: center;*/
  margin: 0px auto 50px;
  position: relative;
  line-height: 20px;
  width: 50%;

}


/*******************end of product catalogue ******************************/




/*******************************single product details page *****************************************************/

/********* this creates space between the whole single product div and the menu and footer **********/
.small-container.single-product {
   width: 90%;
   margin: 30px 80px 120px auto;
   
}


/********* the row is a flex box which allow the two columns to line up horizontally alongside each other **************/
.small-container.single-product .row {

    display: flex;
    align-items: normal; /** this aligns both columns vertically **/
    flex-wrap: wrap;
    justify-content: space-around;
}



.small-container.single-product .col-2 {

    flex-basis: 50%; /******** in the desktop version we want each column to occupy 50% of the row ***************/
    min-width: 300px;
    padding: 20px;
    font-size: 15px;
  /*  border: 1px solid red; */
}





.col-2 > p > .btn:hover{
    background: #563434;
}


/**************************End of product details page ****************************************/




/**************************cart page ****************************************/

 .small-container.cart-page{
            width: 90%;
            margin: 30px 80px 120px auto;
            font-size: 15px;
           /* padding-left: 20px;
            padding-right: 20px;*/
           /*border:2px solid red;  */
        }



td a{
        
    
}



td a{
      font-size: 15px;
      padding-top: 2px;
      padding-bottom: 2px;
}



/************************** end of cart page ****************************************/





/**************************checkout page ****************************************/



.small-container.checkout {

    /*border: 1px solid red;*/
    width: 100%;
    padding-left: 20px;

}

.small-container.checkout .col-2{


   /* border: 1px solid green;*/
    padding-left: 30px;
  
    
}




.small-container.checkout .row { 
  display: flex;
  width: 100%;
  margin: auto;
  align-items:normal;
 /* padding-top: 20px;*/
  background: white;
 /* border: 1px solid red; */
 font-size: 15px;
}



.small-container.checkout .col-1{
    flex-basis: 40%; /* all the columns will occupy 25% of space of the page/container */
    min-width: 300px;
    transition: transform 0.5s;
    /*margin-bottom: 20px;*/
    /*background-color: #F8F8F8;*/
    /*padding-left: 60px;*/
  /* border: 1px solid green;*/
 /* border-right: 1px solid #000000;*/

   
}



/****** this adjusts the 'Your shipping information title' and makes it unbold */
.small-container.checkout .col-1 h2{
    font-weight: normal;

   
}


/* this prevents the main image in the homepage from creatinng a space between the bottom **/

.small-container.checkout .col-2{
    flex-basis: 60%; /* all the columns will occupy 25% of space of the page/container */
   /* min-width: 300px;*/
    transition: transform 0.5s;
    /*font-size: 13px;*/
    background-color: #F8F8F8;
   /* margin-bottom: 20px;*/
    padding-left: 15px;
   /* border:  1px solid #555;*/
   /* color: #555;*/
    border-left: 1px solid #000000;
    border: none;
    font-size: 15px;
     margin-bottom: 0px; /*** this closes the gap between the col-2 and the footer when in desktop mode **/
   border-left: 1px solid #A8A8A8;
    
}




td:last-child{
    text-align: right; /*****pushes the move to wishlist to the end of the cart table ****/
}



th{
    text-align: left;
    padding: 5px;
   /* color: #00000;*/
   /* background: #f7f5ee;*/
   /* background: white;*/
    /*font-weight: bold;*/
    background-color: #F8F8F8; /*** this is the background for the table header row ***/
    font-weight: normal;
}

/* shop now button on main page*/
.btn-billing{
    display: inline-block;
    background: #ff523b;
    color: #fff;
    padding: 7px 25px 5px; /* top: 7px, left and right: 25px, bottom: 5px ***/
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
    cursor: pointer;
    border: none; /**********removes border outline from button **********/

} 



    /**** on button hover we change the background color **************/
    .btn-billing:hover{
       background: #563434;

    }


/************************** end of checkout page ****************************************/



/************************** billing page ****************************************/




    
.small-container.billing {

    /*border: 1px solid red;*/
    width: 100%;
    padding-left: 20px;

}


.small-container.billing .row { 
  display: flex;
  width: 100%;
  margin: auto;
  align-items:normal;
 /* padding-top: 20px;*/
  background: white;
 /* border: 1px solid red; */
 font-size: 15px;
}





   .small-container.billing .row .col-1{
    flex-basis: 50%;
    min-width: 300px;
    /*border: 1px solid black;*/
}






/* this prevents the main image in the homepage from creatinng a space between the bottom **/

.small-container.billing .col-2{
    flex-basis: 60%; /* all the columns will occupy 25% of space of the page/container */
   /* min-width: 300px;*/
    transition: transform 0.5s;
    /*font-size: 13px;*/
    background-color: #F8F8F8;
   /* margin-bottom: 20px;*/
    padding-left: 15px;
   /* border:  1px solid #555;*/
   /* color: #555;*/
    border: none;
    font-size: 15px;
   border-left: 1px solid #A8A8A8;
   margin-bottom: 0px;
    
}




/****** this adjusts the 'Your shipping information title' and makes it unbold */
.small-container.billing .col-1 h2{
    font-weight: normal;

   
}






   
/***************billing form ********************************/
/*form input{
    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   
}*/
form input:focus{
    outline: none;
}



#billing_form input{

    width:300px;
    height: 30px;
    margin: 10px 0;
    padding: 0 10px;
    border: 1px solid #ccc;
    border-radius: 5px;   

}






/************************** end of billing page ****************************************/

/*******************final *********************************/

#final {
   
    /*border: 1px solid green;*/
    width: 60%;
    padding: 40px 60px;
    margin: auto;
    text-align: center;
    margin-bottom: 80px;
}



#final h2 {
    
    font-weight: normal;
    padding-bottom: 25px;
}


#final p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************final *********************************/




/*******************empty shopping cart *********************************/

#emptycart {
   
   /* border: 1px solid red; */
    width: 100%;
    padding: 0px 60px;
    margin: auto; /** this centers the div in the middle of the page*/
    text-align: center;
    margin-bottom: 80px;
}



#emptycart h2 {
    
    font-weight: normal;
    
}


#emptycart p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************end of empty shopping cart *********************************/












/*******************empty wishlist *********************************/

#emptywishlist {
   
   /* border: 1px solid red; */
    width: 100%;
    padding: 0px 60px;
    margin: auto; /** this centers the div in the middle of the page*/
    text-align: center;
    margin-bottom: 80px;
}



#emptywishlist h2 {
    
    font-weight: normal;
    
}


#emptywishlist p {
    
     
    /*padding: 0px 120px;*/
    line-height: 25px;
    /*border: 1px solid green;*/
}


/*******************end of empty shopping cart *********************************/








    
} /*************end of tablet ***************************************************************************/