:root{

	scroll-behavior: smooth;
	scroll-padding-top: 8rem;

	--primary-font:'Noto Serif', serif;
	--secondary-font:'Roboto Slab', serif;
	--always-white-font: #FCFCFC;

	--font-clr-light: #865d6f;
	--font-clr2-light: #ffffff;
	--primary-clr-light: #08D9D6;
	--secondary-clr-light: #068481;
	--accent-clr-light: #E60058; 
	--background-clr-light: #ffffff;
	--bg-clr2-light:#ffffff;
	--bg-clr3-light:#F6F6F6;
	--card-border-light: #A0A0A0;
	--circle-clr-light:#E1E1E1;
	--border-clr1-light:#e3e3e3;
	--box-shadow-light: 0px 5px 15px 0px rgba(0,0,0,0.1);
	--border-only-light: 0;
	--border-bottom-light: inherit;
	--bottom-shadow-light: 0px 12px 18px -11px #e3e3e3;
	--black-white-light: hsl(218, 15%, 10%);
	--dblack-darkwhite-light: #ffffff;
	--logo-font-clr-light:#865d6f;
	--bgdark-clr-light:#f4f4f4;
	--crumb-bg-clr-light:#e6e6e6;
	

	--font-clr-dark: hsl(217, 54.2%, 88%);
	--primary-clr-dark: #08D9D6;
	--secondary-clr-dark: #08D9D6;
	--accent-clr-dark: #FF2E63;
	--background-clr-dark: hsl(218, 15%, 10%);
	--font-clr2-dark: #ffffff;
	--border-clr1-dark:hsl(218, 14.7%, 18.7%);
	--bg-clr2-dark:hsl(218, 14.7%, 18.7%);
	--bg-clr3-dark:hsl(218, 14.7%, 18.7%);
	--card-border-dark: var(--accent-clr);
	--circle-clr-dark: var(--accent-clr);
	--border-clr1-dark: hsl(218, 14.7%, 18.7%);
	--box-shadow-dark: 	0 -15px 15px rgba(255,255,255,0.05);
	--border-only-dark: 3px solid #e3e3e3;
	--border-bottom-dark: 5px solid var(--accent-clr);
	--bottom-shadow-dark: 0px 12px 18px -11px #3f3f3f;
	--black-white-dark: #e3e3e3;
	--dblack-darkwhite-dark:#010101;
	--logo-font-clr-dark:#9F757D;
	--bgdark-clr-dark:#191b21;
	--crumb-bg-clr-dark:#292E37;
	
}

@media(prefers-color-scheme: dark){
	:root {
		--font-clr: var(--font-clr-dark);
		--primary-clr: var(--primary-clr-dark);
		--secondary-clr: var(--secondary-clr-dark);
		--accent-clr: var(--accent-clr-dark);
		--background-clr: var(--background-clr-dark);
		--bg-clr2: var(--bg-clr2-dark);
		--bg-clr3: var(--bg-clr3-dark);
		--card-border: var(--card-border-dark);
		--circle-clr: var(--circle-clr-dark);
		--font-clr2: var(--font-clr2-dark);
		--border-clr1: var(--border-clr1-dark);
		--box-shadow: var(--box-shadow-dark);
		--border-only: var(--border-only-dark);
		--border-bottom: var(--border-bottom-dark);
		--black-white: var(--black-white-dark);
		--bottom-shadow: var(--bottom-shadow-dark);
		--dblack-darkwhite: var(--dblack-darkwhite-dark);
		--logo-font-clr: var(--logo-font-clr-dark);
		--bgdark-clr:var(--bgdark-clr-dark);
		--crumb-bg-clr: var(--crumb-bg-clr-dark);
		
	}
}

@media(prefers-color-scheme: light){
	:root{
		--font-clr: var(--font-clr-light);
		--primary-clr: var(--primary-clr-light);
		--secondary-clr: var(--secondary-clr-light);
		--accent-clr: var(--accent-clr-light);
		--background-clr: var(--background-clr-light);
		--bg-clr2: var(--bg-clr2-light);
		--bg-clr3: var(--bg-clr3-light);
		--card-border: var(--card-border-light);
		--circle-clr: var(--circle-clr-light);
		--font-clr2: var(--font-clr2-light);
		--border-clr1: var(--border-clr1-light);
		--box-shadow: var(--box-shadow-light);
		--border-only: var(--border-only-light);
		--border-bottom: var(--border-bottom-light);
		--black-white: var(--black-white-light);
		--bottom-shadow: var(--bottom-shadow-light);
		--dblack-darkwhite: var(--dblack-darkwhite-light);
		--logo-font-clr: var(--logo-font-clr-light);
		--bgdark-clr: var(--bgdark-clr-light);
		--crumb-bg-clr: var(--crumb-bg-clr-light);
		
		
	}

}

[color-scheme="dark"]{
	--font-clr: var(--font-clr-dark);
	--primary-clr: var(--primary-clr-dark);
	--secondary-clr: var(--secondary-clr-dark);
	--accent-clr: var(--accent-clr-dark);
	--background-clr: var(--background-clr-dark);
	--bg-clr2: var(--bg-clr2-dark);
	--bg-clr3: var(--bg-clr3-dark);
	--card-border: var(--card-border-dark);
	--circle-clr: var(--circle-clr-dark);
	--font-clr2: var(--font-clr2-dark);
	--border-clr1: var(--border-clr1-dark);
	--box-shadow: var(--box-shadow-dark);
	--border-only: var(--border-only-dark);
	--border-bottom: var(--border-bottom-dark);
	--bottom-shadow: var(--bottom-shadow-dark);
	--black-white: var(--black-white-dark);
	--dblack-darkwhite: var(--dblack-darkwhite-dark);
	--logo-font-clr: var(--logo-font-clr-dark);
	--bgdark-clr:var(--bgdark-clr-dark);
	--crumb-bg-clr: var(--crumb-bg-clr-dark);
}

[color-scheme="light"]{
	--font-clr: var(--font-clr-light);
	--primary-clr: var(--primary-clr-light);
	--secondary-clr: var(--secondary-clr-light);
	--accent-clr: var(--accent-clr-light);
	--background-clr: var(--background-clr-light);
	--bg-clr2: var(--bg-clr2-light);
	--bg-clr3: var(--bg-clr3-light);
	--card-border: var(--card-border-light);
	--circle-clr: var(--circle-clr-light);
	--font-clr2: var(--font-clr2-light);
	--border-clr1: var(--border-clr1-light);
	--box-shadow: var(--box-shadow-light);
	--border-only: var(--border-only-light);
	--border-bottom: var(--border-bottom-light);
	--bottom-shadow: var(--box-shadow-light);
	--black-white: var(--black-white-light);
	--dblack-darkwhite: var(--dblack-darkwhite-light);
	--logo-font-clr: var(--logo-font-clr-light);
	--bgdark-clr: var(--bgdark-clr-light);
	--crumb-bg-clr: var(--crumb-bg-clr-light);

}



*{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	display:-ms-grid;
	display:grid;
	justify-items: center;
	font-size: 15px;
	font-family: var(--secondary-font);
	font-weight: 400;
	color: var(--font-clr);
	width: 100%;
	overflow-x: hidden;
	margin: 0;
	background-color: var(--background-clr);
	word-wrap: break-word;
}

h1,h2,h3,h4,h5,h6{
	margin:0rem;
	padding:1em 1em 0rem;
	font-family: var(--primary-font);
	text-transform: capitalize;
	position: relative;
}
h1, h2,h3{
	font-weight: 600;
	color: var(--accent-clr);
}
p{
	margin: 0rem;
	padding: 1em 1em 0rem;
}
.container{
    width:100%;
	padding: 0 2.5%;
	position: relative;
}

.container-first{
	width:100%;
	padding: 0 2.5%;
	position: relative;
	z-index: 30;
	margin-top: -450px;
}

/*Hero banner for posts Global*/



@media only screen and (max-width:597px){


	.container-first{
		margin-top: -350px !important;
	}

	.banner-hero #desktopbackgroundsvg{
		display: none;
	}

	.banner-hero{
		width: 100%;
		overflow: hidden;
		margin-top: 9vw;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		height: 180vw;
		max-height: 1100px;
		will-change: transform;
	}

	.blob-container-hero{
		width: 100%;
		height: auto;
		position: absolute;
		top:0;
		left:0;
	}

	.blob-container-hero #mobilebackgroundsvg{
		width: 100vw;
		height: auto;
	}

	.hero-grid{
		position: absolute;
		z-index: 10;
		display: -ms-grid;
		display: grid;
		width: 100vw;
		height: 100%;
		overflow: hidden;
		grid-template-columns: repeat(11, 1fr);
		grid-template-rows: repeat(15, 1fr);
	}

	.hero-grid h1{
		color:#EAEAEA;
		max-width: 550px;
		place-self: start;
		grid-column: 3/10;
		grid-row: 4/12;
		font-size: 11vw;
		line-height: 1.5em;
		text-align: center;
		padding: 2% 0 0 ;
	}

	.hero-grid .item-blob, .hero-grid .item-blob img{
		width: 100%;
		height: auto;

	}
	.hero-grid .item-blob{
		-webkit-filter: drop-shadow(3px 12px 7px rgba(0,0,0,.15));
		        filter: drop-shadow(3px 12px 7px rgba(0,0,0,.15));
				grid-column: 8/12;
				grid-row: 11/15;
	}

	#banner-border-mb{
		width: 100%;
		z-index: 20;
		position: relative;
		top:-110px;
		will-change: transform;
	}

	#banner-border-dk{
		display: none;
	}

}


@media only screen and (min-width:598px){

	.banner-hero{
		width: 100%;
		position:relative; 
		margin-top:4rem;
		overflow: hidden;
		height: clamp(404px,67vw,700px);
		will-change: transform;

	}

	.banner-hero #mobilebackgroundsvg{
		display: none;
	}

	.blob-container-hero #desktopbackgroundsvg{
		width: 100%;
		height: auto;
		max-width: 1000px;
		margin-bottom: 0;
		margin-left: auto;
		margin-right: auto;
	}

	.blob-container-hero, .hero-item-wrapper{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		display: block;
	}

	.hero-grid{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		display: -ms-grid;
		display: grid;
		position: absolute;
		z-index: 2;
		height: 100%;
		overflow: hidden;
		top: 0;
		grid-template-columns: repeat(14, minmax(0, 1fr));
		grid-template-rows: repeat(14, minmax(0, 1fr));
	}

	.hero-grid h1{
		z-index: 10;
		font-size: clamp(2rem, 6.5vw ,65px);
		color:#EAEAEA;
		align-self: start;
		justify-self: center;
		text-align:left;
		grid-column: 5/12;
		grid-row: 4/10;
		padding: 0% 7% 0 2%;
		line-height: 1.1em;
	}

	.hero-grid .item-blob, .hero-grid .item-blob img{
		width: 100%;
		height: auto;

	}
	.hero-grid .item-blob{
		-webkit-filter: drop-shadow(3px 12px 7px rgba(0,0,0,.1));
		        filter: drop-shadow(3px 12px 7px rgba(0,0,0,.1));
		will-change: transform;
		grid-column: 10/13;
		grid-row: 8/13;
	}

	#banner-border-dk{
		width: 100%;
		z-index: 20;
		position: relative;
		top:-260px;
		will-change: transform;
	}

	#banner-border-mb{
		display: none;
	}

}

/*social media buttons*/

.social-icons{
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.social-icons .icon{
	margin: 1rem 1rem;
	text-align: center;
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	position: relative;
	z-index: 2;
}
.social-icons .icon span{
	display: block;
	height: 3rem;
	width: 3rem;
	background: var(--primary-clr);
	fill: #292929;
	border-radius: 50%;
	position: relative;
	z-index: 2;
	display: -ms-grid;
	display: grid;
	place-content: center;
}

.social-icons .icon:hover span{
	fill: #fff;
}

.social-icons .facebook:hover span{
	background: #3B5999;
}
.social-icons .twitter:hover span{
	background: #46C1F6;
}
.social-icons .pinterest:hover span{
	background: #DF0022;
}
.social-icons .whatsapp:hover span{
	background: #4DC85A;
}

/*Theme Button*/

.theme {
	background-color: var(--black-white);
	width: min(12vw,2.7rem);
	height: min(12vw,2.7rem);
	border-radius: 50%;
	right:0;
	border: 3px solid var(--background-clr);
	cursor: pointer;
	display: -ms-grid;
	display: grid;
	place-items: center;
  }
  
  .theme:is(:hover){
	background-color: var(--accent-clr);
	opacity: .8;
  }

/*Navigation Menu V2*/

.new-navigation{
	background-color: var(--background-clr);
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	height: clamp(3.5rem, 9vw, 4.5rem);
	-ms-flex-line-pack: center;
	    align-content: center;
	min-height: 2.5rem;
	position: fixed;
	border-bottom: 1px solid var(--bg-clr2);
	-webkit-box-shadow: var(--bottom-shadow);
	        box-shadow: var(--bottom-shadow);
	z-index: 500;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.nav-wrapper{
	width: 100%;
	max-width: 1200px;
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	-ms-grid-rows: 1fr;
	grid-template-rows: 1fr;
	position: relative;
	margin: 0 auto;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.nav-wrapper .logo-svg{
	max-width: 350px;
	height: clamp(2rem, 7vw, 3rem);
	width: 100%;
	margin-top: 3%;
}

.logo-anchor{
	-ms-grid-column: 1;
	-ms-grid-column-span: 10;
	grid-column: 1/11;
	-ms-grid-row: 1;
	grid-row: 1/1;
	-ms-grid-row-align: center;
	    align-self: center;
	-ms-grid-column-align: center;
	    justify-self: center;
	top: -4%;
	position: relative;
}

.colorswitch{
	-ms-grid-column: 9;
	-ms-grid-column-span: 2;
	grid-column: 9/11;
	-ms-grid-row: 1;
	grid-row: 1/1;
	-ms-grid-row-align: center;
	    align-self: center;
	-ms-grid-column-align: center;
	    justify-self: center;
}
@media only screen and (max-width:499px){
	.logo-anchor{
		-ms-grid-column: 1;
		-ms-grid-column-span: 9;
		grid-column: 1/10;
		-ms-grid-row: 1;
		grid-row: 1/1;
		-ms-grid-row-align: center;
		    align-self: center;
		-ms-grid-column-align: center;
		    justify-self: center;
	}

	.colorswitch{
		-ms-grid-column: 9;
		-ms-grid-column-span: 2;
		grid-column: 9/11;
		-ms-grid-row: 1;
		grid-row: 1/1;
		-ms-grid-row-align: center;
		    align-self: center;
		-ms-grid-column-align: center;
		    justify-self: center;
	}
}

#idea{
	fill: #FF2E63;
}


a{
	color: var(--accent-clr);
	text-decoration: none;
}

p a:hover, ul a:hover{
	border-bottom: 2px solid var(--accent-clr);
}

.darkbg{
	background-color:var(--bgdark-clr) ;
}

/*manual product grid*/
.grid-products{
	-webkit-column-count:4;
	-moz-column-count:4;
	column-count:4;
	margin: 0 auto;
}

.grid-three{
	-webkit-column-count:3;
	-moz-column-count:3;
	column-count:3;
	margin: 0 auto;
}

.wrap-product{
	-webkit-column-break-inside: avoid;
  	page-break-inside: avoid;
  	-moz-column-break-inside: avoid;
	break-inside: avoid;
	display: inline-block;
  	width: 100%;
	max-width:350px;
	border: 1px solid var(--border-clr1);
	border-radius: 1rem;
	box-shadow: var(--box-shadow);
  	background: var(--bg-clr2);
	overflow:hidden;
	margin: 0px 25px 25px;
	position: relative;
	border-bottom: var(--border-bottom);
}

.wrap-product img{
	width:100%;
	height: auto;
	margin:0px;
	padding:0px;
	display:block;
}

.wrap-product-content{
	position: relative;
	padding:0.8rem 1rem;
	text-align:center;
	font-size:14px;
	z-index: 4;
}
.wrap-product-content h4{
	color:var(--font-clr);
	font-family: var(--primary-font);
	font-size: 22px;
	text-transform: capitalize;
	font-weight: 600;
	padding:0.5rem 0.2rem;
	line-height: 1.3em;
}

/*media queries*/

@media only screen and (max-width: 351px) {
	.grid-products, .grid-three{
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.wrap-product-content{
		padding:0.6rem 0.7rem;
	}
	.wrap-product{
		margin: 0px 5px 12px 0px;
	}
	p{
		padding:0;
	}
}
@media only screen and (min-width: 351px) {
	.grid-products, .grid-three{
		-webkit-column-count:2;
		-moz-column-count:2;
		column-count:2;
		width: 90vw;
	}
	.wrap-product-content{
		padding:0.6rem 0.7rem;
	}
	.wrap-product{
		margin: 0px 5px 12px 0px;
		border-radius: 0.5rem;
	}
	.wrap-product p{
		padding: 10px 0;
	}

}
@media only screen and (min-width: 500px) {
	.wrap-product{
		margin: 0px 5px 15px 0px;
		border-radius: 0.5rem;
	}
}
@media only screen and (max-width: 550px){
	p{
		font-size: 13px;
	}


}
@media only screen and (min-width: 750px) {
	.grid-products, .grid-three{
		-webkit-column-count:3;
		-moz-column-count:3;
		column-count:3;
	}
	p{
		padding:0.5em;
	}
}
@media only screen and (max-width: 750px){

	.grid-products .wrap-product a.only-amazon, .grid-products .wrap-product a.only-amazon:visited, .grid-products .wrap-product a.amazon-ali-amazon, .grid-products .wrap-product a.amazon-ali-amazon:visited, .grid-products .wrap-product a.amazon-ebay-amazon, .grid-products .wrap-product a.amazon-ebay-amazon:visited, .grid-products .wrap-product a.aea-amazon, .grid-products .wrap-product a.aea-amazon:visited,.grid-products .wrap-product a.only-ebay, .grid-products .wrap-product a.only-ebay:visited, .grid-products .wrap-product a.amazon-ebay-ebay, .grid-products .wrap-product a.amazon-ebay-ebay:visited, .grid-products .wrap-product a.ebay-ali-ebay, .grid-products .wrap-product a.ebay-ali-ebay:visited, .grid-products .wrap-product a.aea-ebay, .grid-products .wrap-product a.aea-ebay:visited,.grid-products .wrap-product a.only-ali, .grid-products .wrap-product a.only-ali:visited, .grid-products .wrap-product a.amazon-ali-ali, .grid-products .wrap-product a.amazon-ali-ali:visited, .grid-products .wrap-product a.ebay-ali-ali, .grid-products .wrap-product a.ebay-ali-ali:visited, .grid-products .wrap-product a.aea-ali, .grid-products .wrap-product a.aea-ali:visited{
	padding: 0.4em 0.5em !important;
	}

	.wrap-product-content p{
		padding: 0.3rem 0;
	}

	.post-intro h2{
		margin-bottom: 0 !important;
	}

	p{
		padding: 1em 0.5em 0em;
	}

}

@media only screen and (min-width: 1000px) {
	.grid-products{
		-webkit-column-count:4;
		-moz-column-count:4;
		column-count:4;
		width: 100%;
		max-width: 1200px;
	}

	.grid-three{
		width: 100%;
		max-width: 1000px;
	}

	.grid-three > .wrap-product{
		margin: 0.85rem 0.85rem 1.5rem !important;
		width: initial;
	}
}
/*css for buttons on manual grid*/

.grid-products .wrap-product p + a, .grid-products .wrap-product p + a:visited,.grid-three .wrap-product p + a, .grid-three .wrap-product p + a:visited{
	background-color: var(--accent-clr);
	border: 2px solid var(--accent-clr);
	border-radius: 40px;
	cursor: pointer;
	margin: 10px 6px;
	padding: 0.6em 0.5em;
	position: relative;
	text-align: center;
	font-weight: 400;
	text-decoration:none;
	font-size: 15px;
	display:block;
	color:var(--dblack-darkwhite);
	-webkit-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	-o-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
}

.grid-products .wrap-product p + a:hover,.grid-three .wrap-product p + a:hover{
	border: 2px solid var(--accent-clr);
	border-radius: 10px;
	background-color: var(--bg-clr2);
	color:var(--accent-clr);
}

.grid-products .wrap-product p + a + a, .grid-products .wrap-product p + a + a:visited,.grid-three .wrap-product p + a + a, .grid-three .wrap-product p + a + a:visited{
	background-color: #08D9D6;
	border: 2px solid #08D9D6;
	border-radius: 40px;
	cursor: pointer;
	margin: 10px 6px;
	padding: 0.6em 0.5em;
	font-weight: 400;
	position: relative;
	text-align: center;
	text-decoration:none;
	font-size: 15px;
	display:block;
	color:#252A34;
	-webkit-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	-o-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
}

.grid-products .wrap-product p + a + a:hover,.grid-three .wrap-product p + a + a:hover{
	background-color: var(--bg-clr2);
	border: 2px solid var(--secondary-clr);
	color: var(--secondary-clr);
	border-radius: 10px;
}

.grid-products .wrap-product p + a + a + a, .grid-products .wrap-product p + a + a + a:visited,.grid-three .wrap-product p + a + a + a, .grid-three .wrap-product p + a + a + a:visited{
	background-color: var(--black-white);
	border: 2px solid var(--black-white);
	border-radius: 40px;
	cursor: pointer;
	margin: 10px 6px;
	padding: 0.6em 0.5em;
	position: relative;
	text-align: center;
	font-weight: 400;
	text-decoration:none;
	font-size: 15px;
	display:block;
	color:var(--dblack-darkwhite);
	-webkit-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	-o-transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
	transition: all 250ms cubic-bezier(0.000, 0.025, 0.000, 1.010);
}

.grid-products .wrap-product p + a + a + a:hover,.grid-three .wrap-product p + a + a + a:hover{
	border: 2px solid var(--black-white);
	border-radius: 10px;
	background-color: var(--bg-clr2);
	color:var(--black-white);
}

.post-intro{
	width: min(100%, 700px);
	margin: 2rem auto 2rem;
	padding: 0.5rem;
}

.post-intro h2{
	margin: 1.5rem auto 1rem;
	padding: 0;
	font-size: 1.7rem;
	max-width: 700px;
	text-align: center;
	background: linear-gradient(90deg, rgba(255,0,65,1) 0%, rgba(255,46,99,1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


.post-intro p{
	line-height: 2.1rem;
	font-size: 1.05rem;
	max-width: 700px;
	margin: 0 auto;
}

.post-intro ul{
	max-width: 700px;
	margin: 0 auto;
}

/*LInk decoration of external and internal*/
.onpage-link{
	text-decoration: none;
	color:var(--accent-clr);
}

.onpage-link:hover{
	border-bottom: 2px solid;
	border-color: var(--accent-clr);

}

/*colored list*/
.topic-list li{
	color: var(--accent-clr);
}

.topic-list p{
	padding-top: 0;
	margin-top: 0;
}

li{
	line-height: 2rem;
	font-size: 1.05rem;
	padding: 0.5em;
}

/*pinterst image*/

.pin-post, .pin-post-wrapper{
	display: block;
	margin: 1rem auto;
  position: relative;
}

.pin-post img{
	width: 100%;
	height: auto;
	max-width: 400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 10px;
	box-shadow: var(bottom-shadow);
}

.pin-post-icon{
	position: absolute;
	top: 1%;
	right: clamp(30px,calc(1% + 9vw),160px);
	transition: 200ms ease-in-out;
  }
  
  .pin-post-icon svg{
	scale: 1.2;
  }
  .pin-post-icon:hover{
	scale: 1.1;
  }

@media only screen and (min-width: 500px){
	.pin-post-icon{
		right: min(18vw,121px);
	  }
}

@media only screen and (min-width: 700px){
	.pin-post{
		float: right; margin: 1rem 0 0 1rem;
	}
	.pin-post img{
		display: inline-block;
	}
	.pin-post-icon{
		top: 20px;
		right: 20px;
	  }
}


/*Animation Blur-in*/

.blur-in{
	animation-name: blurin;
	animation-duration: 500ms;
}

@keyframes blurin{
	from{
		/*filter: blur(4px);*/
		opacity: 0.2;
	}

	to{ 
		/*filter:blur(0);*/
		opacity: 1;
	}
}

/*numbering with before*/

@media only screen and (min-width: 900px){
	
	.number1::before, .number2::before, .number3::before{
		position: absolute;
		left: -2.5em;
		top: 0.4em;
		color: var(--accent-clr);
		border: 3.5px solid var(--accent-clr);
		width: 1.7em;
		height: 1.7em;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.number1::before{
		content: '1';

	}

	.number2::before{
		content: '2';

	}

	.number3::before{
		content: '3';
	}
}




/*Page Links Cards*/

.pagecards-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem auto 2.5rem;
	max-width: 850px;
	align-items: end;
}

@media only screen and (min-width:599px){
	.pagecards-wrapper{
		margin: 2rem auto 4rem;
	}
}

.pagecards-wrapper > *{
	flex-basis: 250px
}

.page-details-wrapper{
	background-color: var(--bg-clr3);
	border: 2px solid var(--card-border);
	border-radius: 20px;
	padding: 1.3rem;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	justify-items: center;
	align-items: center;
	position: relative;
	width: 250px;
	box-shadow: 3px 6px 14px -5px rgba(0,0,0,.25);
}
.pagecards-individual{
	transition: all 150ms ease-in-out;
	will-change: transform;
	margin: 0.75rem;
}

.pagecards-individual img{
	grid-row: 1/2;
	grid-column: 1/2;
	z-index: 1;
	position: relative;

}

.pagecards-individual .circle{
	height: 55px;
	width: 55px;
	fill: var(--circle-clr);
	grid-row: 1/2;
	grid-column: 1/2;
	position: relative;

}

.pagecards-individual h4{
	font-size: 16px;
 	grid-row: 2/3;
	padding: 0.8rem 0 0;
	font-weight: 400;
	text-align: center;
	
}

.pagecards-individual a{
	text-decoration: none;
	color: var(--font-clr);
}

.pagecards-individual:hover{
	-webkit-transform: translate(0, -8px);
	    -ms-transform: translate(0, -8px);
	        transform: translate(0, -8px);
}

.pagecards-wrapper .active-card h4{
	color: var(--always-white-font);
}

.pagecards-wrapper .active-card{
	background-color: var(--accent-clr);
	border: 2px solid var(--accent-clr);
}

.pagecards-wrapper .active-card-wrapper:hover{
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}

.active-card-wrapper{
	top:-100%;
}

.youarehere{
	position: relative;
	left: 50%;
	width: 150px;
	-webkit-transform: translate(-50%);
	    -ms-transform: translate(-50%);
	        transform: translate(-50%);
}

/*HOmepage Cards*/

.homepage-cards{
	width: 100%;
	max-width: 1200px;
	margin-top: 2rem;
	margin-bottom: 2rem;
	margin-left: min(2rem, 5%);
	margin-right: min(2rem,5%);
	position: relative;
	z-index: 11;
}

.homecards-wrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2rem auto 2.5rem;
	max-width: 1200px;
	align-items: end;
}

@media only screen and (min-width:599px){
	.homecards-wrapper{
		margin: 2rem auto 4rem;
	}
}

.homecards-wrapper > *{
	flex-basis: 250px
}

.home-details-wrapper{
	background-color: var(--bg-clr3);
	border: 2px solid var(--card-border);
	border-radius: 20px;
	padding: 1.3rem;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	justify-items: center;
	align-items: center;
	position: relative;
	width: 250px;
	box-shadow: 3px 6px 14px -5px rgba(0,0,0,.25);
}
.homecards-individual{
	transition: all 150ms ease-in-out;
	will-change: transform;
	margin: 0.75rem;
}

.homecards-individual img{
	grid-row: 1/2;
	grid-column: 1/2;
	z-index: 1;
	position: relative;

}

.homecards-individual .circle{
	height: 55px;
	width: 55px;
	fill: var(--circle-clr);
	grid-row: 1/2;
	grid-column: 1/2;
	position: relative;

}

.homecards-individual h4{
	font-size: 16px;
 	grid-row: 2/3;
	padding: 0.8rem 0 0;
	font-weight: 400;
	text-align: center;
}

.homecards-individual a{
	text-decoration: none;
	color: var(--font-clr);
}

.homecards-individual:hover{
	transform: translate(0, -8px);
}

/*section dividers*/

.spacer-top {
	position: relative;
	background: var(--bgdark-clr);
	z-index: 1;
  }
  
  .spacer-top::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 44px 44px 0 44px;
	border-color: var(--bgdark-clr) transparent transparent transparent;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
  }

  .spacer-bottom {
	position: relative;
	background: var(--background-clr);
	z-index: 1;
  }
  
  .spacer-bottom::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 44px 44px 0 44px;
	border-color:  var(--background-clr) transparent transparent transparent;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
  }

  .hop{
	  animation: hopping 4s ease-in-out infinite;
  }

  @keyframes hopping{
	  0%{
		 transform: translateY(-5%);
	  }
	  50%{
		transform: translateY(6%);
	}
	100%{
		transform: translateY(-5%);
	}
  }

/*Content Table links*/

.content-list a{
	text-decoration: none;
	color: var(--accent-clr);
}

.content-list a:hover{
	border-bottom: 2px solid;
	border-color: var(--accent-clr);
}

/*footer*/

.footer{
	height: 530px;
	width: 100%;
	background-color: var(--primary-clr);
	overflow: hidden;
	position: relative;
}

.ft-wrapper{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: grid;
	justify-items: center;
}

#ft-background{
	max-width: 1200px;
	width: 100%;
	justify-self: center;

}

.ft-above-text{
	position: absolute;
	top: 90px;
	width: 100%;
	height: 100%;
	left: 0;
	z-index: 10;
}

#ft-logo{
	display: block;
	margin: 0 auto;
	width: clamp(250px, 80vw, 460px);

}

.footer p{
	display: block;
	width: fit-content;
	color: #fff;
	margin: 0 auto 2rem;
	font-size: 16px;
}

.footer p, .footer a{
	text-align: center;
}

.footer .ft-link{
	display: block;
	font-size: 16px;
	color: #fff;
	width: fit-content;
	margin: auto auto 0.8rem;
	border-bottom: 3px solid #FF2E63;
	transition: all 150ms;
	text-decoration: none;
}

.footer .ft-link:hover{
	border-bottom: 3px solid #252A34;
	color: #252A34;
}



.ft-social{
	display: flex;
	margin: 2.5rem auto;
	justify-content: center;
	align-items: center;
}

.ft-social a{
	margin-right: 1rem;
}

.ft-social svg:hover{
	fill: #252A34;
}


@media only screen and (max-width: 1200px){
	#ft-background{
		display: none;
	}

	.footer{
		background-color: #FF2E63;
	}

	.ft-above-text{
		position: relative;
	}	
}

@media only screen and (max-width: 500px){

	.ft-above-text{
		display: grid;
		align-content: center;
		top: 3rem;
	}

}

.footer-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
	z-index: 5;
}

.footer-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.darkfill {
    fill: var(--bgdark-clr);
}

.lightfill{
	fill: var(--background-clr);
}

/*Homepage Banner*/

.home-banner{
	background-color: var(--primary-clr);
	width: 100%;
	position: relative;
}

.hb-wrapper{
	margin: 4rem auto 0;
	display: grid;
	position: relative;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(10,1fr);
}

#hb-bg-tab, #hb-bg-desktop, #hb-bg-mobile{
	grid-column: 1/-1;
	grid-row: 1/-1;
	max-width: 100%;
	position: relative;
	z-index: 1;
}

.hb-text{
	grid-column: 4/8;
	grid-row: 2/7;
	justify-self: center;
	position: relative;
	top: 25%;
	z-index: 2;

}

#hb-logo{
	width: 100%;
	height: auto;
	fill: #FFEDF2;
}

.home-banner p{
	color: #FFEDF2;
	font-family: var(--primary-font);
}

#whatisthis{
	padding-top: 0;
	text-align: center;
	width: 90%;
	font-size: clamp(12px, 2vw, 18px);
	margin: 5% auto 0;
}

#hb-buttom{
	font-size: clamp(12px, 2vw, 16px);
	justify-self: center;
	align-self: center;
	background-color: #ffedf2;
	padding: 3% 3.5%;
	border-radius: 10px;
	display: block;
	margin: 8% auto 0;
	width: fit-content;
	border: 2px solid #FF2E63;
	color: var(--accent-clr);
	text-decoration: none;
}

#hb-buttom:hover{
	background-color: #FF2E63;
	color: #fff;
	border: 2px solid #fff;
}

#hb-cart{
	grid-column: 8/11;
	grid-row: 7/14 ;
}

.hb-spacer{
	width: 100%;
	height: 100px;
}

.custom-shape-divider-bottom-1644184523 {
    position: absolute;
	z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.custom-shape-divider-bottom-1644184523 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 90px;
}

.custom-shape-divider-bottom-1644184523 .shape-fill {
    fill: var(--background-clr);
}

@media only screen and (max-width:597px){
	#hb-bg-tab{
		display: none;
	}

	#hb-bg-mobile{
		display: initial;
	}

	#hb-bg-desktop{
		display: none;
	}

	.hb-text{
		grid-column: 3/9;
		grid-row: 5/9;
		top: 0;
		left: 2%;
	}

	#hb-logo{
		display: none;
	}

	#whatisthis{
		font-size: 4vw;
		line-height: 1.7em;
		width: 100%;
		margin: 1.5em 0;
	}

	#hb-buttom{
		max-width: 80%;
		text-align: center;
		font-size: 3.5vw;
		padding: 1em;
	}

	.hb-wrapper{
		position: relative;
		top: -3vw;
	}

	.hb-spacer{
		height: 10vw;
	}

	#hb-clock{
		-webkit-animation: hopping-lite 4s ease-in-out infinite;
		        animation: hopping-lite 4s ease-in-out infinite;
	  }

	@-webkit-keyframes hopping-lite{
		0%{
		   -webkit-transform: translateY(-3%);
		           transform: translateY(-3%);
		}
		50%{
		  -webkit-transform: translateY(4%);
		          transform: translateY(4%);
		}
		100%{
			-webkit-transform: translateY(-3%);
			        transform: translateY(-3%);
		}
	}
	
	@keyframes hopping-lite{
		0%{
		   -webkit-transform: translateY(-3%);
		           transform: translateY(-3%);
		}
		50%{
		  -webkit-transform: translateY(4%);
		          transform: translateY(4%);
		}
		100%{
			-webkit-transform: translateY(-3%);
			        transform: translateY(-3%);
		}
	}
}

@media only screen and (min-width: 598px){

	#hb-bg-desktop{
		display: none;
	}

	#hb-bg-mobile{
		display: none;
	}

	#hb-bg-tab{
		display: initial;
	}

	#hp-poster-right, #hb-right-picture, #hb-vase{
		will-change: transform;
	}

}

@media only screen and (min-width: 1301px){
	.hb-wrapper{
		max-width: 1200px;
	}
	#hb-bg-tab{
		display: none;
	}

	#hb-bg-mobile{
		display: none;
	}

	#hb-bg-desktop{
		display: initial;
	}

	.hb-text{
		width: 80%;
		top: 20%;
	}
}

/*Breadcrumbs*/

.crumb-wrapper{
	display: grid;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
		justify-content: center;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	background-color: var(--crumb-bg-clr);
	margin: 0 auto;
	padding: 0.2rem 1rem;
	border-radius: 10px;
	border: 2px solid var(--card-border);
}

.crumb-wrapper > *{
	display: inline-block;
	grid-row: 1/2;
	align-self: center;
	color: var(--font-clr);
	
}

.crumb-wrapper > p{
	padding-top: 0;
	padding-bottom: 2px;
}

.crumbs {
	margin-top: 2rem;
	background-color: var(--background-clr);
}
.crumbs > p{
	font-size: 1rem;
	text-align: center;
	margin-bottom: 1rem;
}


.crumb-wrapper a{
	border-bottom: 2px solid var(--crumb-bg-clr);
}
.crumb-wrapper a:hover{
	border-bottom: 2px solid var(--font-clr);
}