/* :: 1.0 Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Savate:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Agu+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Denk+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ga+Maamli&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Luckiest+Guy&family=Smooch+Sans:wght@100..900&family=Story+Script&display=swap');
@font-face { font-family: 'Meaza'; src: url('../fonts/Meaza.ttf'); }
@font-face { font-family: 'Addis'; src: url('../fonts/Addis.ttf'); }
@font-face { font-family: 'Entoto'; src: url('../fonts/Entoto.ttf'); }

::selection { color: #FFE800; background: #C54041; }
::-webkit-selection { color: #FFE800; background: #C54041; }

*, html, body {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;    /* IE 10 and IE 11 */
  user-select: none;        /* Standard syntax */
}

.bd-placeholder-img {
	font-size: 1.125rem;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

@media (min-width: 768px) {
	.bd-placeholder-img-lg {
	font-size: 3.5rem;
	}
}

.b-example-divider {
	width: 100%;
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
	flex-shrink: 0;
	width: 1.5rem;
	height: 100vh;
}

.bi {
	vertical-align: -.125em;
	fill: currentColor;
}

.nav-scroller {
	position: relative;
	z-index: 2;
	height: 2.75rem;
	overflow-y: hidden;
}

.nav-scroller .nav {
	display: flex;
	flex-wrap: nowrap;
	padding-bottom: 1rem;
	margin-top: -1px;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
	--bd-violet-bg: #712cf9;
	--bd-violet-rgb: 112.520718, 44.062154, 249.437846;

	--bs-btn-font-weight: 600;
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--bd-violet-bg);
	--bs-btn-border-color: var(--bd-violet-bg);
	--bs-btn-hover-color: var(--bs-white);
	--bs-btn-hover-bg: #6528e0;
	--bs-btn-hover-border-color: #6528e0;
	--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
	--bs-btn-active-color: var(--bs-btn-hover-color);
	--bs-btn-active-bg: #5a23c8;
	--bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
	z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
	display: block !important;
}

.background-fixed {
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.background-fixed-center {
	background-attachment: fixed;
	background-size: center;
	background-position: center;
	background-repeat: no-repeat;
}

/* .navbar-brand {
	font-size: 1vw;
} */

.text-truncate-1 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
			line-clamp: 1; 
	-webkit-box-orient: vertical;
}

.text-truncate-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
			line-clamp: 2; 
	-webkit-box-orient: vertical;
}

.element-16-9 {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

.element-4-3 {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}

.element-3-4 {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
}

.element-1-1 {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

@media (min-aspect-ratio: 1/1) {
	/* Styles to apply when the viewport width is greater than or equal to its height */
	.canvas {
		width: 70vh;
		height: 70vh;
	}
}

@media (max-aspect-ratio: 1/1) {
	/* Styles to apply when the viewport height is greater than its width */
	.canvas {
		width: 90%;
		height: 90%;
	}
}

@media (aspect-ratio: 1/1) {
	/* Styles to apply when the viewport width and height are equal (square) */
	.canvas {
		width: 90%;
		height: 90vh;
	}
}

.custom-text-display {
	border: 1.5px solid;
	position: absolute;
	text-align: center;
	/* color:#262626; */
	min-width:5vmax;
	min-height:1vmax;
}

.custom-text-display:hover, .custom-text-display:focus, .custom-text-display:active {
	border-color: #C54041 !important;
}

.form-range::-moz-range-thumb {
	background-color: #C54041;
}

.page-container {
	padding-top: 100px;
	min-height: 80vh;
}

.engraving-showcase-carousel-list .owl-dots {
	/* background-color: rgba(197, 64, 65, 0.75); */
	border-radius: 10px;
	position: absolute;
	bottom: 5px; left: 0; right: 0;
	margin: auto;
}

.accordion-button {
	box-shadow: #FFE800;
}
.accordion-button::after {
	background-color: #C54041;
	display: none;
}
.accordion-button:not(.collapsed) {
  color: #FFFFFF;
  background-color: #C54041;
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(#FFE800);
}

.spinner-grow-lg {
  --bs-spinner-width: 25rem;
  --bs-spinner-height: 25rem;
  --bs-spinner-border-width: 0.75em;
}

.spinner-grow-side {
  --bs-spinner-width: 7rem;
  --bs-spinner-height: 7rem;
  --bs-spinner-border-width: 0.5em;
}
