/******************************************
** PARFVM SCIENCE CUSTOM STYLESHEET
** version 1.0.0
** by shanehleng
**
** Last Updated: November 2025
******************************************/

@import url('../css/fonts.css');


/*** GENERAL ***/
:root {
    --color-primary: #000;
    --color-secondary: #F2F2F2;
    --color-accent: #DAAA9C;
}

/*Scrollbar*/
::-webkit-scrollbar-track {
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
	background-color: #fff;
}
::-webkit-scrollbar {
	width: 3px;
	height: 3px;
	background-color: var(--color-primary);
}
::-webkit-scrollbar-thumb {
	background-color: var(--color-primary);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: var(--color-accent);
}

/* ::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: var(--color-primary);
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: var(--color-primary);
    border-left: 2px solid white;
    border-right: 2px solid white;
}
::-webkit-scrollbar-thumb {
	background-color: var(--color-primary);
    border-radius: 0;
    border-left: 1px solid var(--color-primary);
    border-right: 1px solid var(--color-primary);
}
::-webkit-scrollbar-thumb:window-inactive {
	background-color: #4b39a1;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
} */


/* html {
    overflow-y: hidden;
    height: 100vh;
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y proximity;
}
html.scroll {
    overflow-y: scroll !important;
    height: auto !important;
} */
.loading-screen {
	width: 100%;
	height: 100vh;  
	position: fixed;
	z-index: 999;
	background: var(--color-primary);
	display: flex;
	justify-content: center;
	align-items: center;
    overflow: hidden;
}
.lds-ripple {
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-ripple div {
	position: absolute;
	border: 4px solid #fff;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}
@keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 0;
	}
	4.9% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 0;
	}
	5% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 72px;
		height: 72px;
		opacity: 0;
	}
} 

/*Slide Animation Effect*/
@-webkit-keyframes slide {
    0% { transform: translate(0, -50%)  }
    50% { transform: translate(-10px, -50%) }
    100% { transform: translate(0, -50%) }
}
@keyframes slide {
    0% { transform: translate(0, -50%)  }
    50% { transform: translate(-10px, -50%) }
    100% { transform: translate(0, -50%) }
}

/*Beat Animation Effect*/
@-webkit-keyframes beat {
    0% { transform: scale(1)  }
    50% { transform: scale(0.97) }
    100% { transform: scale(1) }
}
@keyframes beat {
    0% { transform: scale(1)  }
    50% { transform: scale(0.97) }
    100% { transform: scale(1) }
}

/*Fade Up Animation*/
.animation-fadeinup {
	animation: 1.5s fadeinup;
}
@keyframes fadeinup {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

/*Marquee Animation*/
.marquee {
	position: relative;
}
.marquee .el-item {
	display: block;
	/* width: 200%; */
	height: 40px;
	line-height: 40px;
	position: absolute;
	overflow: hidden;
	animation: marquee 6s linear infinite;
}
@keyframes marquee {
	0% { left: 0; }
	100% { left: -100%; }
}


/*Entrance Animation*/
body section.section-hidden {
	opacity: 0;
	transition: opacity 3s ease 0s;
}
section.section-hidden.show-animation {
	opacity: 1;
}
.section-snap-container {
	scroll-snap-align: start;
}

/*** UTILITIES ***/	
	/*Fonts*/
	.uk-font-degular,
	.uk-font-degular > * {
		font-family: 'Degular' !important;
	}
	.uk-font-degular-semibold,
	.uk-font-degular-semibold > * {
		font-family: 'Degular Semibold' !important;
	}
	.uk-font-satoshi,
	.uk-font-satoshi > * {
		font-family: 'Satoshi' !important;
	}
	.uk-font-satoshi-medium,
	.uk-font-satoshi-medium > * {
		font-family: 'Satoshi Medium' !important;
	}
	.uk-font-satoshi-semibold,
	.uk-font-satoshi-semibold > *  {
		font-family: 'Satoshi Semibold' !important;
	}
	.uk-font-satoshi-bold,
	.uk-font-satoshi-bold > * {
		font-family: 'Satoshi Bold' !important;
	}

	/*Text*/
	.uk-text-large {
		font-family: 'Satoshi';
	}
	.uk-text-body {
		font-size: 1.25rem;
		line-height: 1.45;
	}
	.tm-heading {
		letter-spacing: -2px;
		line-height: 1.23;
	}

	/*Spacer*/
	.uk-spacer {
		height: 50px;
	}

	/*Button*/
	.btn-wide .uk-button {
		padding-left: 44px;
		padding-right: 44px;
	}


/*Toolbar*/
.toolbar-text-left {
	font-family: 'Bebas Neue';
	font-weight: 700;
	font-size: 1rem;
	color: #929292;
}
.toolbar-text-left .uk-active {
	color: #fff;
}
.toolbar-text-left .divider {
	width: 1px;
	height: 22px;
	display: inline-block;
	position: relative;
	background-color: #fff;
	margin: 0 13px;
	top: 5px;
}
.toolbar-text-right {
	font-size: 1.25rem;
	line-height: 1.2;
}

/*Header*/
.header-items-right {
	display: flex;
	align-items: center;
	/* justify-content: center; */
	gap: 27px;
}
.btn-login .uk-button {
	padding-left: 65px;
	padding-right: 65px;
	border-radius: 26px;
}

/*Navbar*/
.uk-navbar-sticky {
	box-shadow: 1px 2px 2px 0px #f6f6f6;
}
.uk-navbar-nav > li {
	position: relative;
	display: inline-block;
}
.uk-navbar-nav > li:not(.uk-active)::before,
.uk-navbar-nav > li:not(.uk-active)::after {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	border-bottom: 1px dotted #515151;
	opacity: 0;
	transition: 0.3s all ease-in-out;
}
.uk-navbar-nav > li::before {
	top: 50%;
}
.uk-navbar-nav > li::after {
	bottom: 50%;
}
.uk-navbar-nav > li:hover::before {
	top: 22%;
}
.uk-navbar-nav > li:hover::after {
	bottom: 22%;
}
.uk-navbar-nav > li:hover::before,
.uk-navbar-nav > li:hover::after {
	opacity: 1;
	transition: 0.5s all ease-in-out;
}
.uk-navbar-nav > li > a {
	display: inline-block;
	text-align: center;
	width: 100%;
	line-height: 69px;
}
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li.uk-active > a {
	font-family: 'Satoshi Bold';
}
.uk-navbar-nav > li > a::before {
	content: attr(title);
	display: block;
	font-family: 'Satoshi Bold';
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	height: 0;
	overflow: hidden;
	visibility: hidden;
}

/*Footer*/
.tm-footer.uk-section {
	padding-top: 81px;
	padding-bottom: 72px;
}
.uk-text-copyright {
	font-size: 1.25rem;
}
.footer-links .el-title {
	font-family: 'Satoshi Bold';
	line-height: 2.35;
	margin-top: 16px !important;
	margin-bottom: 32px !important;
}
.footer-links .el-content {
	line-height: 2.35;
}
.footer-links .el-content p {
	margin: 0;
}
.footer-links .el-content a {
	position: relative;
	left: 0;
	transition: 0.2s all ease-out;
}
.footer-links .el-content a:hover {
	text-decoration: none;
	left: 5px;
	opacity: 0.5;
	transition: 0.4s all ease-out;
}
.footer-contact .el-item {
	margin-top: 0;
}
.footer-contact .el-item > .uk-grid {
	margin-left: -30px;
}
.footer-contact .el-item > .uk-grid > * {
	padding-left: 30px;
}
.footer-contact .el-content {
	line-height: 2.35;
}
.footer-contact .el-content a {
	transition: 0.2s all ease-out;
}
.footer-contact .el-content a:hover {
	text-decoration: none;
	opacity: 0.5;
}

/*Home*/
	/*Hero Banner*/
	/* .tm-hero-home-banner .uk-slider-items {
		transform: ;
	} */
	.tm-hero-home-banner {
		overflow: visible;
	}
	/* .tm-hero-home-banner [class*=uk-animation-] {
		animation: .10s ease-out both;
	} */
	.tm-hero-home-banner .item-hidden {
		opacity: 0;
	}
	.tm-hero-home-banner .el-item > .uk-grid > :last-child {
		background-color: #f2f2f2;
		border-radius: 0 0 250px 0;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-first-column > * {
		/* max-width: 800px; */
		margin-right: auto;
		left: 170px;
		position: relative;
		padding-top: 125px;
		padding-bottom: 172px;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l {
		/* display: flex;
		flex-direction: column;
		justify-content: flex-end; */
		position: relative;
		width: 45.5%;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::before {
		content: '';
		background: url('../img/bg-flower.png') no-repeat top center;
		background-size: contain;
		width: 440px;
		height: 464px;
		display: block;
		position: relative;
		top: 60px;
		left: 75px;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::after {
		content: '';
		position: absolute;
		top: 50px;
		right: 60px;
	}
	.tm-hero-home-banner .el-item.orca > .uk-grid > .uk-flex-last\@l::after {
		width: 167px;
		height: 47px;
		background: url('../img/orca-logo.png') no-repeat center center;
		background-size: contain;
	}
	.tm-hero-home-banner .el-item.dekode > .uk-grid > .uk-flex-last\@l::after {
		width: 195px;
		height: 102px;
		background: url('../img/dekode-logo.png') no-repeat center center;
		background-size: contain;
	}
	.tm-hero-home-banner .el-title {
		max-width: 610px;
		margin-top: 30px !important;
	}
	.tm-hero-home-banner .el-meta {
		font-family: 'Bebas Neue';
		font-size: 1.25rem;
		line-height: 45px;
		color: #fff;
		background-color: #eee;
		align-self: flex-start;
		padding: 0 25px;
		border-radius: 6px;
	}
	.tm-hero-home-banner .orca .el-meta {
		background: #DAAA9C;
	}
	.tm-hero-home-banner .dekode .el-meta {
		background: #A6B3C5;
	}
	.tm-hero-home-banner .el-content {
		line-height: 1.45;
		max-width: 481px;
	}
	.tm-hero-home-banner .el-content strong {
		font-family: 'Satoshi Bold';
	}
	.tm-hero-home-banner .el-image {
		position: absolute;
		left: -140px;
		z-index: 10;
		transition: all 0.4s ease-out;
	}
	.tm-hero-home-banner .el-image:hover {
		transform: scale(1.015);
		transition: all 0.4s ease-out;
	}
	.tm-hero-home-banner .uk-slider-items .el-item > .uk-grid > .uk-first-column > *,
	.tm-hero-home-banner .uk-slider-items .el-image {
		opacity: 0;
	}
	.tm-hero-home-banner .uk-slider-items > :nth-child(1) .el-image {
		bottom: -20px;
	}
	.tm-hero-home-banner .uk-slider-items > :nth-child(2) .el-image {
		bottom: -120px;
	}
	.tm-hero-home-banner .el-link {
		background-image: linear-gradient(90deg, #f2f2f2 50%, #000 50%);
	}
	.tm-hero-home-banner .el-link:hover {
		background-color: #f2f2f2;
		background-image: linear-gradient(90deg, #f2f2f2 50%, #000 50%);
	}
	.tm-hero-home-banner .dekode .highlight {
		color: #A6B3C5;
	}
	.tm-hero-home-banner .uk-slidenav-container {
		position: relative;
		right: 30px;
	}
	.tm-hero-home-banner .el-slidenav::before {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 57px;
		height: 57px;
		z-index: 10;
	}
	.tm-hero-home-banner .el-slidenav:hover::before {
		filter: invert(95%) sepia(0%) saturate(4%) hue-rotate(236deg) brightness(94%) contrast(92%);
		transition: 0.3s all ease;
	}
	.tm-hero-home-banner .el-slidenav svg {
		display: none;
	}
	.tm-hero-home-banner .uk-slidenav-next::before {
		background: url('../img/arrow-right.png') no-repeat center center;
		background-size: contain;
		animation: slide 2s ease infinite;
	}
	.tm-hero-home-banner .uk-slidenav-previous::before {
		background: url('../img/arrow-right.png') no-repeat center center;
		background-size: contain;
		transform: rotate(180deg);
		animation: slide 2s ease infinite;
	}

	/*Featured*/
	.tm-featured-products .uk-tile-default {
		border: 1px solid #ccc;
		border-radius: 7px;
		transition: 0.4s all ease;
	}
	.tm-featured-products .el-item:hover .uk-tile-default {
		border: 1px solid #000;
		background-color: #fafafa;
		transition: 0.4s all ease;
	}
	.tm-featured-products .el-item > .uk-panel {
		padding: 18px 45px;
	}
	.tm-featured-products .el-title {
		font-family: 'Bebas Neue';
	}
	.tm-featured-products .el-content {
		line-height: 1;
	}

	/*Encounters*/
	.tm-image-encounters .el-image,
	.tm-image-encounters .uk-inline-clip {
		width: 100%;
	}
	.tm-column-encounters .uk-tile {
		padding-top: 0;
		padding-bottom: 0;
	}
	.tm-column-encounters .uk-tile {
		max-width: 725px;
	}
	.tm-meta-encounters {
		line-height: 3.95;
	}
	.tm-text-encounters {
		max-width: 585px;
	}

	/*Bestsellers*/
	.tm-grid-slider-bestseller .el-meta {
		color: #919191;
		font-size: 0.813rem;
		line-height: 1.54;
	}


/*About Us*/
.tm-about-text {
	max-width: 1156px;
	margin: 0 auto;
}
.tm-about-orca {
	border-bottom: 1px solid #5b5b5b;
}


/*** MEDIA QUERIES ***/
@media (min-width: 960px) {
	.tm-footer-row > .uk-first-column {
		width: 250px;
	}
	.uk-text-copyright {
		margin-right: 30px;
	}
}
@media (min-width: 1200px) {
	.tm-footer-row > .uk-first-column {
		width: 300px;
	}
	.footer-links > .uk-grid {
		justify-content: center;
		gap: 100px;
	}
	.footer-links > .uk-grid > * {
		width: auto;
	}
}

@media (max-width: 1800px) {
	.tm-hero-home-banner .el-item > .uk-grid > .uk-first-column > * {
		left: 110px;
	}
}
@media (max-width: 1700px) {
	.tm-hero-home-banner .el-item > .uk-grid > .uk-first-column > * {
		left: 50px;
	}
}
@media (max-width: 1600px) {
	.tm-hero-home-banner .el-item > .uk-grid > .uk-first-column > * {
		left: 0;
	}
}
@media (max-width: 1366px) {
	.uk-navbar-nav {
		gap: 50px;
	}
}
@media (max-width: 1250px) {
	.uk-navbar-nav {
		gap: 40px;
	}
}
@media (max-width: 1200px) {
	.footer-links .el-title {
		line-height: 1;
		margin-top: 0 !important;
	}
}
@media (max-width: 1199px) {
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l {
		width: 100%;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::before {
		position: absolute;
	}
	.tm-hero-home-banner .el-item > .uk-grid > :last-child {
		border-radius: 0;
		flex: 0;
	}
	.tm-hero-home-banner .el-image {
		position: relative;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-first-column > * {
		width: auto;
		margin-left: auto;
		padding-top: 220px;
		padding-bottom: 80px;
	}
	.tm-hero-home-banner .el-title,
	.tm-hero-home-banner .el-content {
		max-width: 100%;
	}
	.tm-hero-home-banner .el-meta {
		align-self: center;
	}
	.tm-hero-home-banner .el-image {
		padding-right: 40px;
		padding-left: 40px;
	}
	.tm-hero-home-banner .uk-slider-items > :nth-child(1) .el-image {
		bottom: -170px;
	}
	.tm-hero-home-banner .uk-slider-items > :nth-child(2) .el-image {
		bottom: -210px;
	}
}
@media (max-width: 1199px) and (min-width: 960px) {
	.uk-navbar-center:not(:only-child) {
		position: relative;
		top: 0;
		left: 8%;
		transform: none;
	}
	.uk-navbar-nav {
		gap: 50px;
	}
	.footer-logo .el-image {
		width: auto;
		height: 60px;
	}
}
@media (max-width: 1100px) and (min-width: 960px) {
	.uk-navbar-center:not(:only-child) {
		left: 5%;
	}
	.uk-navbar-nav {
		gap: 45px;
	}
}
@media (max-width: 1020px) and (min-width: 960px) {
	.uk-navbar-nav {
		gap: 30px;
	}
}
@media (max-width: 960px) {
	.footer-contact {
		width: 220px;
	}
	.mobile-icon-cart .el-image {
		width: auto;
		height: 35px;
	}
	.tm-column-encounters .uk-tile,
	.tm-text-encounters {
        margin: 0 auto;
    }
}
@media (max-width: 640px) {
    .uk-h1, h1 {
        font-size: 3.2rem;
    }
    .uk-h5, h5 {
        font-size: 1.5rem;
    }
    .uk-heading-large {
        font-size: 3.8rem;
    }
    .uk-heading-small {
        font-size: 4rem;
    }
    .tm-heading {
        line-height: 1.1;
    }
	.footer-logo .el-image {
		width: auto;
		height: 65px;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::after {
		top: 10px;
		right: 20px;
	}
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::before {
		width: 380px;
		height: 300px;
	}
	.tm-hero-home-banner .el-item.dekode > .uk-grid > .uk-flex-last\@l::after {
		width: 134px;
		height: 70px;
	}
	.tm-hero-home-banner .el-item.orca > .uk-grid > .uk-flex-last\@l::after {
		width: 134px;
		height: 39px;
	}
	.footer-contact {
	    margin-top: 20px !important; 
	    margin-bottom: 20px !important;
	}
	.follow {
	    margin-top: 20px !important;
	}
	.featured-perfume {
	    margin-left: 50px;
	    margin-right: 50px;
	}
}
@media (max-width: 520px) {
	.uk-text-lead {
		font-size: 1.125rem;
	}
	.tm-footer.uk-section {
		padding-top: 50px;
		padding-bottom: 30px;
	}
	.tm-footer .uk-h4,
	.uk-text-copyright {
		font-size: 1rem;
	}
	.footer-links .el-title {
		margin-bottom: 0 !important;
	}
	.footer-links .el-content {
		margin-top: 10px !important;
	}
}
@media (max-width: 460px) {
	.tm-hero-home-banner .el-item > .uk-grid > .uk-flex-last\@l::before {
		left: 0;
		/* width: 300px;
		height: 200px; */
	}
	.footer-links .el-content {
		line-height: 2;
	}
}