/* MAIN THEME 
*
* -rgb is needed to use our colors as bs5 uses rgb
*
*/

:root {
	--bs-primary: #eae4da; /* brown */
	--bs-primary-rgb: 234, 228, 218; /* brown */
	--bs-secondary: #cfecda; /* light green */
	--bs-secondary-rgb: 207, 236, 218; /* light green */
	--bs-success: #0aba4c; /* bright green */
	--bs-success-rgb: 10, 186, 76; /* bright green */
	--bs-warning: #febc3d; /* gold */
	--bs-warning-rgb: 254, 188, 61; /* gold */
	--bs-dark: #303030; /* text */
	--bs-dark-rgb: 48, 48, 48; /* text */
	--bs-info: #56766b; /* button green dark */
	--bs-info-rgb: 86, 118, 107; /* button green dark */
	--bs-danger: #e60000; /* red */
	--bs-danger-rgb: 230, 0, 0; /* red */
	/* others */
	--bs-danger-light: #ed5168; /* light red (fb)*/
	--bs-info-light-blue: #5e91ff; /* fb blue */
	--bs-info-blue: dodgerblue;
	--bs-info-grey: #65676b;
	--bs-info-lightgrey: #f0f2f5;
	--bs-info-green: #56766b;
	--bs-light-brown: #fcfbf3;
	--bs-info-yellow: #ffff00;
	--bs-info-highlight: rgba(255, 254, 0, 0.3);
	--bs-light-white: #ffffff;
	--bs-dark-black: #000000;
	--bs-table: #71bba0;
	--bs-table-rgb: 113, 187, 160;

	/* Font Size Offset */
	--bs-font-size-root: 16px;
	/* Main Font */
	--bs-font-sans-serif: 'Roboto', sans-serif;
}

/* START */
.logo {
	font-family: 'DM Serif Text', sans-serif;
}
.e2e.container-fluid {
	padding-left: 0;
	padding-right: 0;
}

/* colors */
.text-light-white {
	color: var(--bs-light-white);
}
.text-light-yellow {
	color: var(--bs-info-yellow);
}
.text-dark-black {
	color: var(--bs-dark-black);
}
.text-green {
	color: var(--bs-table);
}
.text-blue {
	color: var(--bs-info-blue);
}
/* bg colors */
.bg-dark-black {
	background-color: var(--bs-dark-black) !important;
}
.bg-light-brown {
	background-color: var(--bs-light-brown) !important;
}
.bg-light-grey {
	background-color: var(--bs-info-lightgrey) !important;
}
.bg-yellow {
	background-color: var(--bs-info-yellow) !important;
}
.bg-highlight {
	background-color: var(--bs-info-highlight) !important;
}
.bg-highlight-cart {
	background-color: var(--bs-info-highlight);
}
.bg-table {
	background-color: var(--bs-table) !important;
	color: var(--bs-light-white) !important;
	vertical-align: middle;
	font-weight: normal;
}
.bg-fb-red {
	background-color: var(--bs-danger-light);
}
.bg-fb-blue {
	background-color: var(--bs-info-light-blue);
}
/* highlight */
em,
.highlight {
	background-image: linear-gradient(-100deg, rgba(255, 224, 0, 0.3), rgba(255, 224, 0, 0.7) 95%, rgba(255, 224, 0, 0.1));
	font-style: normal;
	font-weight: bold;
}
strong {
	font-weight: 700 !important;
}

/* Custom Buttons */
.btn-cta {
	color: var(--bs-light-white);
	background: var(--bs-info);
}
.btn-discount {
	color: var(--bs-light-white);
	background: var(--bs-table);
}
.btn-discount:hover,
.btn-discount:active {
	color: var(--bs-light-white) !important;
	background: rgba(var(--bs-table-rgb), 0.8) !important;
	border: 1px solid transparent !important;
}
.hover-buy {
	text-decoration: none;
	color: initial !important;
}
.hover-buy:hover {
	background-color: var(--bs-secondary);
	transition: 1s;
}
.btn-cta:hover,
.btn-cta:active {
	color: var(--bs-light-white) !important;
	background: rgba(var(--bs-info-rgb), 0.8) !important;
	border: 1px solid transparent !important;
}
.btn-xl {
	--bs-btn-padding-y: 0.75rem;
	--bs-btn-padding-x: 1.5rem;
	--bs-btn-font-size: 1.4rem;
	--bs-btn-border-radius: var(--bs-border-radius-lg);
}
.accordion-button:focus {
	box-shadow: none;
	border-color: rgba(0, 0, 0, 0.125);
	outline: 0;
}
.accordion-button:not(.collapsed) {
	color: initial;
}
.accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-icon);
}
/* swoosh CTA */
.swoosh-button {
	color: white;
	background-color: #0ba33a;
	border: none;
	cursor: pointer;
	outline: none;
	position: relative;
	overflow: hidden;
	transition: background-color 0.3s;
}
.swoosh-button:hover {
	background-color: #0056b3;
}
.swoosh-button:active {
	background-color: #004085;
}
.swoosh-button::before {
	content: '';
	position: absolute;
	left: -100%;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	animation: swoosh-animation 5s linear infinite;
}
@keyframes swoosh-animation {
	0% {
		left: -100%;
	}
	100% {
		left: 100%;
	}
}

/* Tooltip */
.tooltip-inner {
	max-width: 90%;
	margin: 0.15rem 0.15rem 0.15rem auto;
	padding: 1rem 1rem 0.5rem 0.5rem;
	color: var(--bs-dark);
	text-align: left;
	background-color: rgb(249 249 249);
	border-radius: var(--bs-tooltip-border-radius);
	border: 1px solid var(--bs-dark);
}
.tooltip.show {
	opacity: 1 !important;
}
.tooltip .btn-close {
	font-size: 0.75rem;
	color: var(--bs-dark-black);
	padding: 0.4rem;
}

/* Custom Circle */
.number-circle {
	background-color: var(--bs-info-green);
	width: 2rem;
	height: 2rem;
}

/* Custom img widths */
.satisfaction {
	max-width: 115px;
}
.kit-img {
	width: 900px;
}
.desktop-image-height-xl {
	height: 1024px;
}
.desktop-image-height {
	height: 1130px;
}

/* Custom Widths */
.container-900 {
	max-width: 900px;
}
.w-80 {
	width: 80% !important;
}
.w-90 {
	width: 90% !important;
}

/* Custom Font Size */
.fs-10 {
	font-size: 10px !important;
}
.smaller {
	font-size: 0.8em !important;
}

/* Basic Rotation */
.rotate-15 {
	transform: rotate(15deg);
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-45 {
	transform: rotate(45deg);
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-90 {
	transform: rotate(90deg);
}

/* COUNTDOWN */
.countdown {
	font-family: Montserrat;
}
.mw-coundown {
	max-width: 650px;
}

/* KEEP FOOTER AT BOTTOM */
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
footer {
	margin-top: auto;
}