*{
	margin: 0;
	padding: 0;
}
@font-face {
    font-family: 'SVN-Acherus';
    src: url('../fonts/SVN-AcherusBold.eot');
    src: url('../fonts/SVN-AcherusBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SVN-AcherusBold.woff2') format('woff2'),
        url('../fonts/SVN-AcherusBold.woff') format('woff'),
        url('../fonts/SVN-AcherusBold.ttf') format('truetype'),
        url('../fonts/SVN-AcherusBold.svg#SVN-AcherusBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Acherus';
    src: url('../fonts/SVN-AcherusLight.eot');
    src: url('../fonts/SVN-AcherusLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SVN-AcherusLight.woff2') format('woff2'),
        url('../fonts/SVN-AcherusLight.woff') format('woff'),
        url('../fonts/SVN-AcherusLight.ttf') format('truetype'),
        url('../fonts/SVN-AcherusLight.svg#SVN-AcherusLight') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Acherus';
    src: url('../fonts/SVN-Acherus.eot');
    src: url('../fonts/SVN-Acherus.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SVN-Acherus.woff2') format('woff2'),
        url('../fonts/SVN-Acherus.woff') format('woff'),
        url('../fonts/SVN-Acherus.ttf') format('truetype'),
        url('../fonts/SVN-Acherus.svg#SVN-Acherus') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: '1FTV VIP Carien';
    src: url('../fonts/1FTVVIPCarienRegular.eot');
    src: url('../fonts/1FTVVIPCarienRegular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/1FTVVIPCarienRegular.woff2') format('woff2'),
        url('../fonts/1FTVVIPCarienRegular.woff') format('woff'),
        url('../fonts/1FTVVIPCarienRegular.ttf') format('truetype'),
        url('../fonts/1FTVVIPCarienRegular.svg#1FTVVIPCarienRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Acherus';
    src: url('../fonts/SVN-AcherusThin.eot');
    src: url('../fonts/SVN-AcherusThin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SVN-AcherusThin.woff2') format('woff2'),
        url('../fonts/SVN-AcherusThin.woff') format('woff'),
        url('../fonts/SVN-AcherusThin.ttf') format('truetype'),
        url('../fonts/SVN-AcherusThin.svg#SVN-AcherusThin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Acherus';
    src: url('../fonts/SVN-AcherusMedium.eot');
    src: url('../fonts/SVN-AcherusMedium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/SVN-AcherusMedium.woff2') format('woff2'),
        url('../fonts/SVN-AcherusMedium.woff') format('woff'),
        url('../fonts/SVN-AcherusMedium.ttf') format('truetype'),
        url('../fonts/SVN-AcherusMedium.svg#SVN-AcherusMedium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root{
	--color-primary: #6C7233;
	--color-secondary: #EA869C;
	--container-width: 90%;
	--pd-container: calc(calc(100% - var(--container-width)) / 2);
	--font-title: '1FTV VIP Carien', 'Segoe UI', system-ui, sans-serif;
	--font-body: 'SVN-Acherus', 'Segoe UI', system-ui, sans-serif;
	--font-aptimaregular: 'SVN-Acherus', 'Segoe UI', system-ui, sans-serif;
	@media(max-width:767px){
		--container-width: calc(100vw - 32px);
	}
};

html,
body{
	font-family: 'SVN-Acherus', 'Segoe UI', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
	color:#474747;
}

button,
input,
textarea,
select,
option {
	font: inherit;
}

.font-title,
.segTitle,
.subTitle{
	font-family: var(--font-title);
	font-weight: 400;
}

.imgHover{
	position: relative;
	.img{
		overflow: hidden;
	}
	img{
		transition: all .5s ease-in-out;
	}
	&:hover{
		img{
			transform: scale(1.1);
		}
	}
}

.container-fluid{
	width: var(--container-width);
	display: block;
	margin: 0 auto;
}

.middle {
    z-index: 500;
    display: block;
    width: 100%;
    background: transparent;
}

@keyframes callring{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.15);
	}
}

.textHover{
	position: relative;
	&::after{
		content: '';
		position: absolute;
		top: calc(100% + 4px);
		left: 0;
		width: 0;
		height: 1px;
		background: #FFF;
		transition: all .3s ease-in-out;
	}
	&:hover{
		&::after{
			width: 100%;
		}
	}
}

header {
	position: fixed;
	top:0;
	left:0;
	z-index: 9999;
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	color: var(--color-primary);
	text-transform: uppercase;
	transition: transform .35s ease, padding .35s ease, background .35s ease, box-shadow .35s ease;
	.logo {
		position: absolute;
		top:12px;
		left:50%;
		transform: translate(-50%,0);
		height:80px;
		transition: all .3s ease-in-out;
		img{
			height: 100%;
			object-fit: contain;
		}
	}
	&.change{
		background: transparent;
		.logo{
			height: 60px;
			top: 50%;
			transform: translate(-50%,-50%);
		}
	}
	&.hide{
		transform: translateY(-100%);
	}
	.header{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.tabBar{
		gap:16px;
		cursor: pointer;
		display: flex;
		flex-flow: column;
		gap:8px;
		p{
			width: 40px;
			height: 1.5px;
			&:first-child{
				background: var(--color-primary);
			}
			&:nth-child(2){
				background: var(--color-primary);
			}
			&:nth-child(3){
				background: var(--color-primary);
			}
		}
	}
	.contact{
		cursor: pointer;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			top: calc(100% + 4px);
			left: 0;
			width: 0;
			height: 1px;
			background: var(--color-primary);
			transition: all .3s ease-in-out;
		}
		&:hover{
			&::after{
				width: 100%;
			}
		}
	}
}
.bg-header{
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter:blur(22px);
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	pointer-events: none;
	z-index: 98;
	transition: all .3s ease-in-out;
	&.active{
		opacity: 1;
		pointer-events: auto;
	}
}
.menu-header{
	position: fixed;
	top:0;
	left:0;
	z-index: 9999;
	height: 100vh;
	width: 450px;
	background: var(--color-primary);
	padding:0 80px;
	transform: translateX(-100%);
	transition: all .3s ease-in-out;
	display: flex;
	align-items: center;
	.menu{
		display: flex;
		flex-flow: column;
		justify-content: center;
		gap:16px; 
		list-style: none;
	}
	.partern{
		position: absolute;
		bottom: 0;
		right:0;
		width: 40%;
	}
	.contact{
		cursor: pointer;
	}
	.close{
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		aspect-ratio: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		background: #FFF;
		cursor: pointer;
		color: var(--color-primary);
		transition: all .3s ease-in-out;
		&:hover{
			transform: scale(0.9);
		}
	}
	&.active{
		transform: translateX(0);
	}
	a{
		color: #FFF;
		font-size: 28px;
		position: relative;
		text-transform: uppercase;
		text-decoration: none;
		position: relative;
		&::after{
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 1px;
			transition: all .3s ease-in-out;
		}
		&:hover{
			a{
				width: 100%;
			}
		}
	}
	@media(max-width:767px){
		padding:0;
		width: 100vw;
		justify-content: center;
		a{
			font-size: 20px;
		}
	}
}
.social {
	position: fixed;
	bottom:40px; 
	right:40px;
	z-index: 999;
	a {
		color: var(--color-primary);
	}

	.item {
		height: 38px;
		aspect-ratio: 1/1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;
		position: relative;
		cursor: pointer;
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(7px);
		box-shadow:0 0 10px 0 rgb(185 183 183 / 40%);
		i,
		img {
			transition: all .4s ease-out;
		}

		&:hover {
			i,
			img {
				transform: rotateY(180deg);
			}
		}

		&.call {
			margin-top: 2rem;

			&::after {
				content: '';
				height: 55px;
				width: 55px;
				position: absolute;
				background: #ffffff69;
				border-radius: 50px;
				animation: callring 1.3s infinite;
				pointer-events: none;
			}
		}
	}
	@media(max-width:767px){
		right:20px;
	}
}

.segTitle{
	font-size: 43px;
	font-family: var(--font-title);
	font-weight: 400;
	line-height: 1;
	@media(max-width:1360px){
		font-size: 37px;
	}
	@media(max-width:1279px){
		font-size: 32px;
	}
	@media(max-width:767px){
		font-size: 32px;
	}
}
.subTitle{
	font-size: 20px;
	font-family: var(--font-title);
	font-weight: 400;
	@media(max-width:1360px){
		font-size: 18px;
	}
	@media(max-width:1279px){
		font-size: 18px;
	}
	@media(max-width:767px){
		font-size: 18px;
	}
}
.color-secondary{
	color: var(--color-secondary);
}


.homeContact {
	position: relative;
	display: flex;
	background: var(--color-primary);
	font-family: var(--font-body);
	padding:120px 0;
	.container-fluid{
		display: flex;
		position: relative;
		z-index: 1;
	}
	.logo{
		height: 90px;
		display: flex;
		gap: 40px;
		img{
			height: 100%;
			object-fit: contain;
		}
	}
	.content_contact{
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 80%;
		margin: auto;
		gap:15%;
	}
	.left {
		position: relative;
		opacity: .9;
		color: #fff;
		flex: 0 0 60%;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
	.imgproduct{
		display: flex;
		gap:16px;
		align-items: center;
		font-size: 14px;
		img{
			height: 60px;
		}
		&.mb{
			display: none;
		}
	}
	.right {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		backdrop-filter: blur(5px);
	}
	.address {
		display: flex;
		flex-flow: column;
		margin-top: 16px;
		gap:8px;
		p {
			text-transform: none;
			span {
				text-transform: none;
			}
		}
		
		.item {
			color: #fff;
			text-decoration: none;
			display: flex;
			align-items: center;
			width: max-content;
			gap:8px;
			font-size: 14px;
			transition: all .3s ease-in-out;
			&:hover{
				color: var(--color-secondary);
			}
		}

		i{
			width: 20px;
		}
	}
	.note{
		font-size: 10px;
		opacity: .6;
	}
	.contact-info{
		.name{
			font-size: 18px;
			color: #FFF;
			text-transform: uppercase;
		}
	}
	.flower{
		position: absolute;
		bottom:0;
		right: 0;
		width: 25%;
		pointer-events: none;
		opacity: .2;
	}
	.form_contact {
		padding:40px;
		border:1px solid #FFF;
		text-align: center;
		.title {
			text-transform: uppercase;
			font-family: var(--font-title);
			font-size: 32px;
			font-weight: 400;
		}
		.note{
			color: #ffffff99;
		}
		.txt {
			color: #FFF;
			display: flex;
			flex-flow: column;
			gap:20px;
			p{
				font-size: 14px;
			}
		}

		.form {
			margin-top:32px ;

			input {
				background: none;
				border: none;
				border-bottom: 1px solid #ffffff6b;
				height: 48px;
				width: 100%;
				color: #fff;

				&::placeholder {
					color: #fff;
					opacity: .6;
				}

				&:focus {
					outline: none;
				}
			}

			button {
				height: 48px;
				width: 100%;
				background: #fff;
				border: none;
				margin-top:60px ;
				cursor: pointer;
				background: #F7D0DB;
				text-transform: uppercase;
				color:var(--color-primary);
				transition: all .3s ease-in-out;
				&:hover{
					transform: scale(.95);
					background: var(--color-secondary);
					color: #fff;
				}
				&:focus {
					outline: none;
				}
			}
		}
	}
	.separator {
		width: 60px;

		img {
			height: 100%;
		}
	}
	.wpcf7-response-output {
		display: none;
	}
	form.sent {
		.wpcf7-response-output {
			display: block;
			color: #46b450;
		}
		
	}
	@media(max-width:1279px){
		.content_contact{
			width: 85%;
		}
	}
	@media(max-width:767px){
		padding:80px 0;
		.content_contact{
			display: flex;
			flex-flow: column;
			width: 100%;
			gap:40px;
		}
		.form_contact{
			padding:24px;
			.title{
				font-size: 24px;
			}
		}
		.imgproduct{
			color: #FFF;
			&.pc{
				display: none;
			}
			&.mb{
				display: flex;
			}
		}
		.left{
			gap:32px;
		}
		.address{
			.item{
				font-size: 12px;
			}
		}
		.logo{
			height: 60px;
		}
		.flower{
			width: 50%;
		}
	}
}

.fancybox-content img{
	margin-top: 2rem;
}
.fancybox-caption{
	position: absolute;
	top: 0;
	height: max-content;
	background: none;
	font-size: 20px;
	text-transform: uppercase;
}

.loading{
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	background: var(--color-primary);
	overflow: hidden;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	animation: loadingHide .4s ease 8s forwards;
	.logo{
		height: 200px;
		width: auto;
		opacity: 0;
		transform: translate(-50%, -50%) scale(0);
		animation: loadingLogoInOut 4.3s ease forwards;
		transform-origin: center;
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
	}
	.text{
		display: flex;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		text-align: center;
		gap: 8px;
		transform: translate(-50%, -50%);
		opacity: 0;
		z-index: 2;
		animation:
			loadingTextWrapIn .01s linear 4.5s forwards,
			loadingTextWrapOut .01s linear 8s forwards;
		width: var(--container-width);
		display: flex;
		justify-content: center;
		.subTitle{
			color: #ffffff99;
			font-size: 20px;
			opacity: 0;
		}
		.subTitle--left{
			animation:
				loadingTextFromLeft .65s ease 4.5s forwards,
				loadingTextToLeft .65s ease 7.35s forwards;
		}
		.subTitle--right{
			margin-top: auto;
			padding-bottom: 4vh;
			animation:
				loadingTextFromRight .65s ease 4.5s forwards,
				loadingTextToRight .65s ease 7.35s forwards;
		}
		.vector{
			height: 22vh;
			width: auto;
			opacity: 0;
			animation:
				loadingVectorFromTop .65s ease 4.5s forwards,
				loadingVectorToTop .65s ease 7.35s forwards;
		}
	}
	@media(max-width:1360px){
		.text{
			.subTitle{
				font-size: 28px;
			}
			.vector{
				height: 26vh;
			}
		}
	}
	@media(max-width:769px){
		.text{
			flex-flow: column;
			gap: 8px;
			.subTitle{
				font-size: 18px;
			}
			.vector{
				height: 16vh;
			}
		}
	}
}

body.is-off-home .loading{
	display: none !important;
	animation: none !important;
}

html.is-loading-hold-text .loading,
body.is-loading-hold-text .loading{
	animation: none;
}
html.is-loading-hold-text .loading .logo,
body.is-loading-hold-text .loading .logo{
	animation: loadingLogoInOut 4.3s ease forwards;
}
html.is-loading-hold-text .loading .text,
body.is-loading-hold-text .loading .text{
	animation: loadingTextWrapIn .01s linear 4.5s forwards;
}
html.is-loading-hold-text .loading .text .subTitle--left,
body.is-loading-hold-text .loading .text .subTitle--left{
	animation: loadingTextFromLeft .65s ease 4.5s forwards;
}
html.is-loading-hold-text .loading .text .subTitle--right,
body.is-loading-hold-text .loading .text .subTitle--right{
	animation: loadingTextFromRight .65s ease 4.5s forwards;
}
html.is-loading-hold-text .loading .text .vector,
body.is-loading-hold-text .loading .text .vector{
	animation: loadingVectorFromTop .65s ease 4.5s forwards;
}

@keyframes loadingTextWrapIn{
	to{
		opacity: 1;
	}
}

@keyframes loadingTextWrapOut{
	to{
		opacity: 0;
	}
}

@keyframes loadingTextToLeft{
	0%{
		opacity: 1;
		transform: translateX(0);
	}
	100%{
		opacity: 0;
		transform: translateX(-56px);
	}
}

@keyframes loadingTextToRight{
	0%{
		opacity: 1;
		transform: translateX(0);
	}
	100%{
		opacity: 0;
		transform: translateX(56px);
	}
}

@keyframes loadingVectorToTop{
	0%{
		opacity: 1;
		transform: translateY(0);
	}
	100%{
		opacity: 0;
		transform: translateY(-48px);
	}
}

@keyframes loadingTextFromLeft{
	0%{
		opacity: 0;
		transform: translateX(-56px);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes loadingTextFromRight{
	0%{
		opacity: 0;
		transform: translateX(56px);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes loadingVectorFromTop{
	0%{
		opacity: 0;
		transform: translateY(-48px);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes loadingLogoInOut{
	0%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(0);
	}
	69.8%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	93%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes loadingHide{
	to{
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}