/* GOOGLE FONTS */

/* ROBOTO */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
/* POPPINS */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');






/* BRAND STYLE */

:root{
	--color-black:  #000;
    --color-white:  #fff;
	--color-offwhite: #F3F5F6;

	--font-heading: 'Roboto', sans-serif;
	--font-body-text: 'Poppins', sans-serif;

	--color-neutral-light: #CFCFCF;
    --color-neutral-medium: #A0A0A0;
    --color-neutral-dark: #606060;

    --color-primary-light: #1474C9;
    --color-primary-medium: #00539C;
    --color-primary-dark: #003A6D;

	--color-secondary-light: #FDDC15;
    --color-secondary-medium: #FD9815;
    --color-secondary-dark: #FD5315;

	--color-tertiary-light: #F3F5F6;
    --color-tertiary-medium: #DAE8F0;
    --color-tertiary-dark: #C2D9E6;
    
    --color-overlay: #cccecc99 ;
    --color-box-shadow: #cccecc99;


    --color-overlay:  #003A6D44;
    --color-box-shadow:  #818c7fCC;
}





/* GENERAL SETTING */
body {
	width: 100vw;
	min-height: 100vh;
	background-color: var(--color-offwhite);
	font-family: var(--font-body-text) ;
	color: var(--color-primary-dark);
	overflow-x: hidden;
}
.disableScroll{
	height: 100%; 
	overflow-y: hidden !important;
}

.is-menu-open {
	overflow-y: hidden;
	height: 100vh;
	max-height: 100vh;
	position: fixed;
}


h1,h2,h3,h4,h5,h6{
	font-family: var(--font-heading);
	color: var(--color-primary-dark);
}

ul, ol, li {
	list-style: none;
	padding: 0;
	margin: 0;
}

a: hover {
	text-decoration: none;
}

.bgImage, #twitter, #instagram, #facebook, #footerLogo {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
fieldset {
	border: 10px solid red;
}


/* NAVIGATION */
#navigation {
	width: 100vw;
	height: 80px;
	background-color: var(--color);
	border-bottom: 2px solid var(--color-primary-dark);
	margin-bottom: 2em;
}

#navigation > nav,
#burger > a > img,
#logo > a > img {
	width: 100%;
	height: 100%;
}
#navList{
	width: 30%;
}

#navList > ul{
width: 100%;
justify-content: space-between;
}

#navListBurger {
	width: 100vw;
	height: 100vh;
	background-color: var(--color-primary-dark);
	color: var(--color-white);

	position: fixed;
	left: 100vw;
	top: 0;
	z-index: 2000;
	transition: all 0.3s ease-in-out;

	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: none;

}
#navListBurger.slide {

	transform: translateX(-100vw);
}


#navListBurger > ul {
	width: 50%;
	height: 40%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2em;
}
#storeIcons {
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
}
#burger, 
#logo, 
#twitter,
#instagram,
#facebook,
#burger, 
#close,
#burgerLogo
 {
	width: 50px;
	height: 50px;
}
#logo, #close {
	z-index: 2100;
}



#burger, #close {
	margin-right: 10px;
	display: none;
}

#burger a {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
}

#logo img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* HERO IMAGE */
main {
	width: 100vw;
	flex-direction: row;
	min-height: 70%;
    min-height: -webkit-calc(100vh - 300px);
    min-height: -moz-calc(100vh - 300px);
    min-height: calc(100vh - 300px);
}

#feature, #mission, #footer {
	width: 65vw;
	height: auto;
}

#hero {
	width: 65vw;
	height: auto;
	overflow: hidden;
	position: relative;
}
#hero img {
	width: 100%;
}


@media screen and (max-width: 550px){
	body{
		width: 100vw;
		overflow-x: hidden;
	}
	#hero {
		width: 100vw;
		height: 50vh;
		overflow: hidden;
		position: relative;
	}
	#hero img {
		width :100%;
		height: 100%;
		object-fit: cover;
		object-position: 25% 0;
	}
	#burger{
		display: block;
	}
	#navList{
		display: none;
	}

}

/* FEATURE PRODUCTS */

#feature {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* MISSION SECTION */
#mission {
	background-color: var(--color-primary-dark);
	color: var(--color-white);
	margin-bottom: 20px;
}

#mission h2 {
	color: var(--color-white);
}

.navbar {
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    line-height: var(--header-height);
}
    .navbar h1 {
        font-size: 1em;
        margin: 0;
        font-family: var(--font-sans);
    }
    .navbar a {
        padding: 0 0.5em;
    }
ul, ol, li {
	list-style: none;
}

/* FOOOTER */
#footer{
	width: 100vw;
	height: auto;
	background-color: var(--color-white);
	color: var(--color-primary-dark);
	line-height: var(--header-height);
	border-top: 2px solid var(--color-primary-dark);
	margin: 0;
	margin-top: 2em;
	padding: 0;
	flex-direction: column;
	align-items: center;
}
#footer > ul {
	margin: 0;
	width: 65vw;
	height: 90px;
}
#footer > ul > li:first-child {
	width: 20vw;
	height: 100%;
}

#footer > ul:first-child {
	margin-top: 5px;
	border-bottom: 1px solid var(--color-primary-dark);
	justify-content: flex-start;
	align-items: center;
}

#footer > ul > li:nth-child(2) {
	width: 50vw;
	height: 100%;
	justify-content: center;
	align-items: center;
}

#footer > ul > li > form, 
#footer > ul > li > form > ul {
	width: 100%;
	height: 100%;
	justify-content: flex-end;
	align-items: center;
}
#footer > ul > li > form > ul {
	align-items: baseline;
}
#footer > ul > li > form > ul > li:first-child {
	width: 50%;
}
#footer > ul > li > form > ul > li:nth-child(2) {
	width: 20%;
}
#footer > ul > li > form > ul > li:nth-child(2) form{
	justify-content: flex-end ;
	align-items: center;
}
#footer > ul > li > form > ul > li:nth-child(2) ul{
	justify-content: flex-end ;
	align-items: baseline;
}
#footer > ul:nth-child(2) {
	align-items: center;
}
#footer > ul:nth-child(2) >li:nth-child(1){
	justify-content: flex-start;
	align-items: center;
}
#footer > ul:nth-child(2) >li:nth-child(2){
	justify-content: flex-end;
	align-items: center;
}
#footer > ul:nth-child(2) > ul {

	flex-direction: row;
	justify-content: end;
	align-items: center;
	gap:  1em;
}
#footerLogo {
	width: 150px;
	height: 50px;
}

#footer .form-label-animated {
    font-size: 1.2em;
    color: var(--color-primary-dark);
    display: block;
    width: 100%;
    position: relative;
    top: -2.8em;
    transition: all 0.3s ease-in-out;
    cursor: text;
}
#footer .form-label-motion {
    font-size: 0.3em;
    top: -4.5em;
}

	#footer > ul:nth-child(2) > li:first-child,
	#footer > ul:nth-child(2) > li:first-child a,
	#footerLogo  {
		width: 150px;
		height: 50px;
	}

@media screen and (max-width: 1000px){
	
	#footer > ul {
		margin: 0;
		width: 65vw;
		height: auto;
	}


	#footer > ul:first-child {
		width: 65vw;
		flex-direction: column;
		margin: 0;
	}

	#footer > ul:first-child > li:nth-child(2) {
		width: 100%;
		height: 90px;
		justify-content: center;
		align-items: center;

	}
	#footer > ul:first-child > li:nth-child(2) ul {
		width:100%;
		height: 90px;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul{
		flex-direction: row;
		justify-content: space-between;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul > li:first-child {
		width: 60%;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul > li:nth-child(2){
		width: 30%;
		text-align: center;
	}
	#footer > ul > li:first-child {
		width: 100%;
		height: 100%;
	}
	#footer > ul > li:first-child > ul {
		width: 60%;
		height: 100%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
	}

	#footer > ul:nth-child(2) {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 1em auto;
	}
	#footer > ul:nth-child(2) > li:first-child,
	#footer > ul:nth-child(2) > li:first-child a,
	#footerLogo  {
		width: 150px;
		height: 35px;

	}

}
@media screen and (max-width: 550px){
	#footer > ul:nth-child(2) {
		margin: 1em auto;
		height: auto;
		gap: 0.5em;
		flex-direction: column-reverse;
		justify-content: center;
		align-items: center;
	}
	#footer > ul:nth-child(2) >li:nth-child(2){
		justify-content: center;
	}
	#footer > ul:first-child > li:nth-child(2),
	#footer > ul:first-child > li:nth-child(2) > form,
	#footer > ul:first-child > li:nth-child(2) > form > ul {
		height: auto;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul > li:first-child {
		height: 40px;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul{

		flex-direction: column;
		align-items: center;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul > li:first-child {
		width: 100%;
	}
	#footer > ul:first-child > li:nth-child(2) > form > ul > li:nth-child(2){
		width: 100%;
		text-align: center;
	}
		#footer > ul > li:first-child > ul {
		width: 100%;

	}

}
@media screen and (min-width: 550px){
	flex-wrap: wrap;
}

/* NEED TO WORK ON THE MEDIA QUARY FOR THE FOOTER ON SMALL SCREEN DEVICE */


.productlist a {
	text-decoration: none;
	font-weight: initial;
}

/* FAVOURITE HEART */

.favourite label {
	transition: all 0.3s ease-in-out;
	display: inline-block;
	color: var(--color-neutral-medium);
	transform: scale(1);
}
.favourite input:checked + label {
	color: var(--color-primary-dark);
	transform: scale(1.3);
}

@media (max-width:  400px) {
	.navbar .display-flex {
		display: block;
	}
	.navbar .nav li {
		line-height: 2em;
	}
}
@media (max-width:  800px) {
	.container {
		padding-left: 1em;
		padding-right: 1em;
	}
	.navbar h1 {
		padding-left: 0.5em;
	}
}

/* NavBar */
#test .nav-matrial a {
	color: var(--color-neutral-medium);
}
#test .nav-matrial a:hover{
    background-color: transparent;
}
#test .nav-matrial a::after{
    height: 2px;
    
    background-color: var(--color-neutral-medium);
    transform: scaleX(0);
    transform-origin: left;
}
#test .nav-matrial a:hover::after{
	transform: scaleX(1);
}
#test .nav-matrial .active a::after{
	transform: scaleX(1);
	background-color: var(--color-primary-dark);
}
#test .nav-matrial .active a {
	color: var(--color-primary-dark);
}

/* Table */

.table.striped tbody tr:nth-child(odd){
    background-color: var(--color-secondary-light);
    color: var(--color-primary-dark);
}

.table.lined.all th:not(:first-child),
.table.lined.all td:not(:first-child),
.table.lined.vertical th:not(:first-child),
.table.lined.vertical td:not(:first-child) {
    border-left: 1px solid var(--color-neutral-medium );
}

.table.lined.all tbody tr ,
.table.lined.horizontal tbody tr {
    border-top: 1px solid var(--color-neutral-medium );
}

.table.lined.all,
.table.lined.border {
    border: 1px solid var(--color-neutral-medium );
}

/* Figure */
#bottom .product-overlay figcaption {
    background-color: var(--color-overlay);
}

#bottom .product-overlay .caption-body{
    background-color: white;
    border-radius: 0;
    transform: translateY(50%);
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#bottom  .product-overlay:hover .caption-body{
 	transform: translateY(0);   
}

@media (max-width: 600px){
   #bottom .product-overlay figcaption {
    box-sizing: border-box;
    padding: 0;
	}

   #bottom .product-overlay figcaption div:nth-child(2) {
   	padding: 0 16px;
   }
      #bottom .product-overlay figcaption div:first-child {
   	padding: 4px 16px;
   }
	#bottom .product-overlay .caption-body{
	    background-color: white;
	    border-radius: 0;
	    transform: translateY(0);  
	    transition: all 0.3s ease-in-out;
	    position: absolute;
	    bottom: 0;
	    width: 100%;
	}


	#bottom  .product-overlay:hover .caption-body{
	 	 
	}
}

/* Form Label */
.form-label-animated {
    font-size: 1.2em;
    color: var(--color-primary-dark);
    display: block;
    width: 100%;
    position: relative;
    top: -2em;
    transition: all 0.3s ease-in-out;
    cursor: text;
}
.form-label-motion {
    font-size: 0.8em;
    top: -4em;
}
#product-search .form-control,
#checkout-form .form-control{
	position: relative;
}
#checkout-form .form-control,
#checkout-form {
	padding: 0.3em 0;
}
.form-button{
	padding: 0.6em 1em;	
}
#checkout-form h3 {
	margin-bottom: 1.5em;
}
#checkout-form h3:not(h3:first-child),
#checkout-form .form-button
{
	margin-top: 3em;
}
#filterProducts{
	margin-top: 1.5em;	
}
#productListTitle, #filterProducts{
	margin-bottom: 2em;
}
input[type="text"]
{
    font-size:1.2em;
    padding: 0;
}

.images-main {
	width: 42vh;
	height: 44vh;
	object-fit: contain;
}
.images-main img {
	width: 100%;
}
.images-thumbs img {
	width: 9em;
	height: 9em;
	object-fit: contain;
}
.images-thumbs-mini img {
	width: 5em;
	height: 5em;
	object-fit: contain;
}
.images-thumbs img:not(img:last-child){
	margin-right:1em;
} 

.checked {
  color: orange;
}

.product-price span,
.product-sku span,
.product-size span{
	font-weight: bold;
}
h3.product-name{
	margin: 0;
}
h4.product-benefits,
h4.product-description{
	margin-bottom: 0;
}
.product-amount span {
	margin-right:1em ;
}

form > h4 {
	margin-bottom: 0.3em;
}
.form-select > select{
	background-color: #fff;
	border: 1px solid var(--color-primary-dark);
	transition: all 0.3 ease-in-out;
}
.form-select > select:hover{
	background-color: var(--color-primary-dark);
	color: #fff;

}
@media (max-width: 600px){
   
	.product_item_footer,
	.cart_footer,
	.confirm_footer,
	.to_cart_footer {
	position: relative;
}

}
.cart_body{
	width: 100vw;
	height: 100vh;
}
.card-section,
.card-product-section{
	padding: 1em;
}
.card-section~.card-section{
	border-top: 1px solid var(--color-neutral-light);
}

#checkout_btn{
	padding: 0 1em;
}
span.badge:not(:empty){
	width: 20px;
	height: 20px;
	background-color: var(--color-primary-dark);
	border-radius: 2.5px;
	color: var(--color-white);
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	font-size: 0.8em;
}
#mission {
	padding: 2em 1em;
}
#mission li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: justify; text-align-last: center;
	font-size: 0.8em;
	padding: 0 2em;
}

#filterProducts .form-button {
	padding:  0.5em 1em;
}
#sort{
	margin:0 ;
	align-self: center;
}



/* Product Item */
#productBenefits {
	width : 100%;
	height:  auto;
}

#productBenefits > div:first-child {
	height: 350px;
	padding: 2em;
	background-color: var(--color-primary-dark);
	color: var(--color-white);
}
#productBenefits > div  > h4 {
	margin: 0;
	color: var(--color-white);
	padding-bottom: 1.3em;
}
#productBenefits > figure {
	width: 100%;
	height: 350px;
	margin: 0;
	overflow: hidden;
}

#productBenefits > figure > img {
	width : 100%;
	height: auto;
}


#product-edit {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
#product-edit > form {
	flex: 1;
	border: 1px solid var(--color-primary-dark);
	background-color: #003A6D06;
	padding: 2em 2em 0 2em;
	margin-bottom: 0;

}
textarea{
	min-height: 100px;
}
#product-edit > ul {
	flex: 2;
	padding:2em 3em 0 2em ;
	border: 1px solid var(--color-primary-dark);
	background-color: #003A6D06;

}
@media screen and (max-width: 600px){
	#product-edit {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
	#product-edit > form,#product-edit > ul{
		flex: 1;
	}
}
}
.prodict-edit-list {
	width: 380px;
}
.prodict-edit-list-container{
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}
.individual-product-edit{
	width: 100%;
	padding-left:16px ;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.product-item{
	margin-bottom: 1em;
}

.product-item-form, .product-item-images, .cart-info{
	width: 100%;
	height: 100%;
	background-color: var(--color-white);
	padding: 1em;
}
.product-item-images{
	justify-content: center;
	gap: 1em;
}
.product-item-images  > div {
	width: 100%;
	height: auto;
}
.cart-info{
	padding: 2em;
}
.cart-recommentation {
	margin-top: 4em;
}

.form-indicator{
	color: var(--color-secondary-dark);
}
.form-legal{
	padding: 0;
	margin-top: 0;

}
.form-legend{
	margin-bottom: 0;
}

.images-thumbs-mini > ul, .images-thumbs-mini > div, .images-thumbs-mini li {
	margin: 0;
	padding: 0;
}
#summaryTotal > div:first-child {
	   border-radius: 0;
       box-shadow:  none ;
}
.checkOutSummary, .checkOutForm{
	background-color: var(--color-white);
	padding: 1em;	
}

#adminProductSubmit{
	text-transform: uppercase;
}


#cart_delete_btn {
	margin-top: 1em;
}
@media screen and (max-width: 550px){
	#cartMain >div > div> div> div> div {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}	
		#cartMain >div > div> div> div> div:nth-child(3){
			order: 2;
		}
	#cartMain >div > div> div> div> div div,
	#cartMain >div > div> div> div> div form,
	#cartMain >div > div> div> div> div input {
		width: 100%;
	}
	#cartMain .cart-product-price {
		order:  2;
		width: 100%;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-top: 0;
		padding-bottom: 2em;
	}
	#cartMain .cart-product-price > div,
	#cartMain .cart-product-price > strong {
		width: auto;
	}
	#cartMain .images-thumbs div img{
		width: 100%;
		height: auto;
		object-fit: cover;
	}

	#cartMain .card-product-section:nth-child(2) form:nth-child(2){
		margin-top :1em;
	}

	#cartMain .card-product-section:nth-child(2) form:nth-child(3){
		margin-top :1em;
	}
	#productBenefits > figure {
		height: auto;
	}
}