:root {
	--yl:#F5C842;--yd:#C9960C;--yn:#E0AA1A;
	--nl:#000066;--nd:#00004D;
	--nn:#0F1F3D;
	--input-bg:#F7F3EB;
}

/* Application animation  */
.animate-all{
    opacity:0;
    transform:translateY(40px);
    transition: all 0.8s ease;
}
.animate-all.active{
    opacity:1;
    transform:translateY(0);
}
.animate-all.delay-1 {
	transition-delay: 0s;
}
.animate-all.delay-2 {
	transition-delay: 0.3s;
}
.animate-all.delay-3 {
	transition-delay: 0.7s;
}
.animate-all.delay-4 {
	transition-delay: 1.1s;
}
@media (max-width: 768px) {
.animate-all.delay-3, .animate-all.delay-2, .animate-all.delay-1, .animate-all.delay-4 {
	transition-delay: 0.2s !important;
	}
}

h1, h2, h3 {
	color: var(--nd);
}

/* Navbar section */
li.menu-item-11042 a {
	color: white !important;
	height: 2.3rem !important;
	background-color: var(--yd);
	border-radius: 0.2rem;
}
li.menu-item-11042 a:hover {
	color: var(--yd) !important;
	background-color: white !important;
}

/*Product style*/
a.ct-media-container {
    width: 100% !important;
    max-height: 200px;
    position: relative !important;
    padding: 0 auto !important;
}
.ct-media-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Change to contain if image gets cropped */
}

li.product, li.product .ct-woo-card-actions {
    text-align: center !important;
    align-items: center !important;
}

li.product {
    box-shadow: 4px 8px 16px var(--input-bg);
    transform: translateY(0px);
    transition: transform 0.2s ease-in-out;
}

li.product:hover {
    transform: translateY(-5px);
}
.meta-categories a {
	font-size: 10px;
}


/*Add shop by colors styling for mobile and also for page*/
/* Shop by color section */

.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow {
    position: relative;
}

.wp-block-buttons.colors-container {
    position: relative;
    margin: auto 0 !important;
}

.wp-block-buttons.colors-container .wp-block-button a {
	display: flex !important;
	width: 95px;
	aspect-ratio: 1;
	border: 5px solid white;
	position: relative;
	color: transparent;
}
.color-all-btn a {
	background-color: transparent !important;
	color: white !important;
	font-weight: 700;
	padding: 0.4rem !important;
	width: 120px !important;
}
.wp-block-buttons.colours-container-page .wp-block-button a {
	display: flex !important;
color: var(--nd);
	display: inline-block !important;
	flex-wrap: wrap !important;
	width: 150px;
	aspect-ratio: 1;
	margin: 0.5rem 3rem;
}
.wp-block-buttons.colors-container, .wp-block-buttons.colours-container-page {	
		width: 100% !important;
		flex-wrap: wrap;
		margin: 4rem;
}

/*Mobile Responsiveness*/

@media (max-width: 768px) {
    
/* Colors section for mobile to overflow */

.wp-block-buttons.colors-container .wp-block-button a, 
	.colours-container-page a{
	width: 50px !important;
	border: 2px solid white;
	}
.color-all-btn a {
		min-width: 70px !important;
		padding: 0.2rem !important;
		font-size: 12px;
	}
.wp-block-stackable-columns.alignwide.stk-block-columns.stk-block.stk-ca63b6d.stk-block-background  {
	margin: 0 !important;
	padding: 0!important;
	width: 100%;
	}
	.wp-block-buttons.colours-container-page {
		display: flex;
		justify-content: center;
		margin: 2rem 0;
		gap: 16px;
	}
	.colours-container-page .wp-block-button {
		padding: 0px !important;
		margin: 0px !important;

	}
	.colours-container-page a {
		width: 100px !important;
		font-size: 12px;
		margin: 0px !important;
	}
	.wp-block-buttons.colors-container {
		width: 100% !important;
		margin: 0px !important;
		padding: 0px !important;
	}
	
}