@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	scroll-behavior: smooth;
	font-family: 'Prompt', sans-serif;
}

.table td.fit,
.table th.fit {
	white-space: nowrap;
	width: 1%;
}

th,
td {
	vertical-align: middle !important;
}

.text-overflow {
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.overflow-2 {
	-webkit-line-clamp: 2;
}

.overflow-3 {
	-webkit-line-clamp: 3;
}

.overflow-4 {
	-webkit-line-clamp: 4;
}

.overflow-5 {
	-webkit-line-clamp: 5;
}

.f-shadow {
	text-shadow: 2px 2px 4px #000000;
}

a {
	text-decoration: none;
}

:root {
	--color-theme-main: #880608;
	--color-theme-sub: #fff6ef;
	--color-theme-gold: #b38e4c;
	--color-theme-gold-2: #cc927f;
}

.text-theme-main {
	color: var(--color-theme-main);
}

.btn-theme-main {
	background-color: var(--color-theme-main);
}

.btn-theme-main:hover {
	background-color: #a70003;
}

.bg-theme-main {
	background-color: var(--color-theme-main);
}

.text-theme-gold {
	color: var(--color-theme-gold);
}

.text-theme-gold-2 {
	color: var(--color-theme-gold-2);
}

.btn-theme-gold {
	background-color: var(--color-theme-gold);
}

.btn-theme-gold:hover {
	background-color: #dbad5d;
}

.bg-theme-gold {
	background-color: var(--color-theme-gold);
}

.text-theme-sub {
	color: var(--color-theme-sub);
}

.btn-theme-sub {
	background-color: var(--color-theme-sub);
}

.btn-theme-sub:hover {
	background-color: #fae0cd;
}

.bg-theme-sub {
	background-color: var(--color-theme-sub);
}

.obj-cover {
	object-fit: cover;
}

div.loading {
	height: 100vh;
	width: 100vw;
	background-color: var(--color-theme-main);
	color: white;
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.loading-logo {
	height: 100px;
}

.cta-button {
	cursor: pointer;
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	transition: all 0.3s;
	opacity: 1;
	height: 40px;
}

.cta-main {
	opacity: 0.7;
}

.cta-main:hover {
	transform: scale(1.1);
	opacity: 1;
}

.cta-order,
.cta-facebook,
.cta-line,
.cta-phone {
	opacity: 0;
}

.cta-order.active,
.cta-facebook.active,
.cta-line.active,
.cta-phone.active {
	opacity: 1;
}

.cta-order.active {
	bottom: 13.5rem;
}

.cta-facebook.active {
	bottom: 10.5rem;
}

.cta-line.active {
	bottom: 7.5rem;
}

.cta-phone.active {
	bottom: 4.5rem;
}

.cta-main.active {
	opacity: 1;
}

.facebook-embed {
	width: 100%;
	height: 300px;
}

p.slogan {
	font-size: 1.25rem;
}

header {
	border: solid var(--color-theme-gold) 3px;
	border-right: 0;
	border-left: 0;
	background-color: var(--color-theme-main);
}

.header-logo {
	height: 50px;
}

#NavbarHeader li.nav-item>a {
	font-weight: 300;
	transition: all 0.3s;
}

#NavbarHeader li.nav-item:hover>a,
#NavbarHeader li.nav-item>a.active {
	font-weight: bold;
}

.text-cert {
	font-size: 25px;
}

.img-cert {
	height: 80px;
}

.footer-logo {
	height: 100px;
}

.footer-icon {
	height: 35px;
}

.home-header-banner h1>i {
	font-size: 3rem;
}

.home-header-banner h2>i {
	font-size: 3rem;
}

.home-header-banner h5 {
	font-size: 1.6rem;
}

iframe.home-intro-video {
	height: calc(100vw / 1.7778);
	margin-bottom: -6px;
}

section.certificates {
	border-top: solid var(--color-theme-gold) 2.5rem;
	border-bottom: solid var(--color-theme-gold) 2.5rem;
	background-color: var(--color-theme-sub);
}

.i-bold {
	font-weight: 800;
	font-size: 1.5rem;
}

.dot-split {
	font-size: 0.8rem;
}

.contact-social-icon {
	height: 50px;
}

table.table-social-contact td {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.bg-star-red {
	background-image: url('./images/promotion-bg-1.png');
	background-size: cover;
	background-position: center;
}

.text-promotion-header>h1 {
	font-size: 3rem;
}

.text-promotion-header>h2 {
	font-size: 3.5rem;
}

.text-promotion-header>h3 {
	font-size: 5rem;
}

.text-promotion-header>h4 {
	font-size: 3rem;
}

.product-img {
	height: 250px;
	object-fit: contain;
	object-position: center;
}

.border-bottom-gold {
	border-bottom: solid var(--color-theme-gold) 3px !important;
}

.border-right-gold {
	border-right: solid var(--color-theme-gold) 3px !important;
}

.services-header-banner h1 {
	font-size: 3.5rem;
}

.services-header-banner h2 {
	font-size: 3rem;
	font-weight: normal;
}

.services-header-banner h5 {
	font-size: 1.6rem;
}

.promotion-details h3,
.service-details h3 {
	font-size: calc(1.325rem + .9vw);
	line-height: 40px;
}

.promotion-details h3>span,
.service-details h3>span {
	font-size: calc(0.5rem + .9vw);
}

.promotion-details p,
.service-details p {
	font-size: 1.5rem;
	line-height: 28px;
}

.promotion-details table,
.service-details table {
	font-size: 1.25rem;
}

.contact-map iframe {
	width: 100%;
	height: 30vw;
}

.contact-product-footer {
	margin-top: -4rem;
	z-index: 999;
}

.line-gold {
	height: auto;
}

.product-spec {
	background-image: url("./images/main-1-px.png");
	background-size: 100% 3px;
	background-position: center;
	background-repeat: no-repeat;
}

.product-spec p {
	border: solid var(--color-theme-main) 3px;
	background-color: #fff;
}

.icon-check {
	height: 20px;
}

.img-product {
	transition: ease 0.3s;
}

.img-product:hover {
	transform: scale(1.1);
	box-shadow: 0 0rem 1rem rgba(0, 0, 0, .75) !important;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
	width: 100%;
	height: 20vw;
	perspective: 1000px;
	/* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	/* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	background-color: var(--color-theme-main);
	border-radius: 2rem;
	padding: 2rem;
}

.flip-card-front>img {
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Style the back side */
.flip-card-back {
	background-color: white;
	padding: 2rem;
	border-radius: 2rem;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flip-card-back>h5 {
	color: var(--color-theme-main);
	font-size: 1.2rem;
}

.flip-card-back>p {
	font-size: 1rem;
}

.bg-gold-split {
	width: 100%;
}

.article-details h3 {
	font-size: calc(1.3rem + .6vw);
}

.article-details * {
	font-size: 1.25rem;
	font-family: 'Prompt', sans-serif !important;
	max-width: 100%;
}

.table-social-contact td>a {
	font-size: calc(1.375rem + 1.5vw);
}

address {
	font-size: calc(1.325rem + .9vw);
}

#SendMessage {
	position: relative;
	z-index: 9999;
}

@media only screen and (max-width: 1366px) {
	.text-promotion-header>h1 {
		font-size: 2.5rem;
	}

	.text-promotion-header>h2 {
		font-size: 3rem;
	}

	.text-promotion-header>h3 {
		font-size: 4rem;
	}

	.text-promotion-header>h4 {
		font-size: 2.2rem;
	}
}

@media only screen and (max-width: 767px) {
	.border-bottom-gold {
		border-bottom: solid var(--color-theme-gold) 1px !important;
	}

	.border-right-gold {
		border-right: solid var(--color-theme-gold) 1px !important;
	}

	.contact-map iframe {
		height: 30vw;
	}

	.table-social-contact td>a {
		font-size: 14px;
	}

	table.table-social-contact td {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.contact-social-icon {
		height: 25px;
	}

	.article-details h3 {
		font-size: 20px;
	}

	address {
		font-size: 10px;
	}

	p.slogan,
	p,
	.article-details * {
		font-size: 14px;
	}

	.promotion-details h3 {
		font-size: 10px;
		line-height: 12px;
	}

	.promotion-details h3>span {
		font-size: 8px;
	}

	.promotion-details p {
		font-size: 8px;
		line-height: 10px;
	}

	.promotion-details table {
		font-size: 10px;
	}

	.promotion-details table td {
		padding: 0;
	}

	.service-details h3 {
		font-size: 8px;
		line-height: 10px;
	}

	.service-details h3>span {
		font-size: 6px;
	}

	.service-details p {
		font-size: 6px;
		line-height: 8px;
	}

	.service-details table {
		font-size: 10px;
	}

	.service-details table td {
		padding: 0;
	}

	.flip-card-back>h5 {
		font-size: 0.8rem;
	}

	.flip-card-back>p {
		font-size: 0.4rem;
	}

	.text-cert {
		font-size: 13px;
	}

	.img-cert {
		height: 50px;
	}

	.header-logo {
		height: 50px;
	}

	.line-gold {
		height: 8px;
	}

	.contact-product-footer {
		margin-top: -2rem;
	}

	.flip-card {
		height: 45vw;
	}

	.flip-card-front {
		padding: 1rem;
	}

	.flip-card-back {
		padding: 1rem;
	}
}

@media only screen and (max-width: 375px) {
	.article-details h3 {
		font-size: 14px;
	}

	.article-details * {
		font-size: 12px;
	}
}