/**********  CSS Default Template by nesbconsultants.com - Revised: 03-23-25 - Start **********/


/* Importing Google Font - Poppins */
@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");

/* Importing Google Font - Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Importing Google Font - Playfair */
@import url("https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap");

/* Importing Google Font - Oswald */
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

/* Importing Google Font - Belleza */
@import url("https://fonts.googleapis.com/css?family=Belleza&display=swap");

/* Importing Google Font - Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* Importing Google Font - Raleway */
@import url("https://fonts.googleapis.com/css?family=Raleway:400");

/* Importing Google Font - Slabo */
@import url('https://fonts.googleapis.com/css2?family=Slabo+27px&display=swap');


:root {
	/* Clamp(min, preferred, max) based on 16px HTML Font */
	--step--5: clamp(0.3686rem, 0.6197rem + -0.324vi, 0.5549rem);
	--step--4: clamp(0.4608rem, 0.6812rem + -0.2843vi, 0.6243rem);
	--step--3: clamp(0.576rem, 0.7463rem + -0.2197vi, 0.7023rem);
	--step--2: clamp(0.72rem, 0.8145rem + -0.122vi, 0.7901rem);
	--step--1: clamp(0.8889rem, 0.885rem + 0.0193vi, 0.9rem);
	--step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
	--step-1: clamp(1.125rem, 1.0272rem + 0.4891vi, 1.4063rem);
	--step-2: clamp(1.2656rem, 1.0944rem + 0.856vi, 1.7578rem);
	--step-3: clamp(1.4238rem, 1.1548rem + 1.3451vi, 2.1973rem);
	--step-4: clamp(1.6018rem, 1.2036rem + 1.9909vi, 2.7466rem);
	--step-5: clamp(1.802rem, 1.2347rem + 2.8369vi, 3.4332rem);
	--step-6: clamp(2.0273rem, 1.2397rem + 3.9378vi, 4.2915rem);
	--step-7: clamp(2.2807rem, 1.2081rem + 5.363vi, 5.3644rem);
	--step-8: clamp(2.5658rem, 1.1259rem + 7.1995vi, 6.7055rem);
	--spacer: clamp(0.1843rem, 0.30985rem + -0.162vi, 0.27745rem);
}

:root {
	/* Set color pallette variables */
	/*--primary: #212121;*/
	/*--secondary: #515151;*/
	--accent: #b1c252;
     --accent-dark: #89b55b;
     --accent-light: #e9eda5;
     --contrast: #80b721;
     --headings: #18200d;
     --text: #616161;
	/*--bkgrd: #0d0808;*/

	--white: #ffffff;
	--black: #000000;

	/* Colors */
	--creamy-vanilla: #f5f5f5;
	--chocolate-glaze: #6b3e26;
	--strawberry-frosting: #d8416c;
	--blueberry-filling: #4b0082;
	--sweet-tooth: #6f6f6f;
	--semi-sweet-tooth: #b3b3b3;
}

/********** Web Browser Resets **********/

*,
*:before,
*:after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
}

/* Create a root stacking context */
#root,
#__next {
	isolation: isolate;
}

html {
	box-sizing: border-box; /* Makes box sizing predictable */
	font-size: 16px; /* Sets a base font size for rem units */
	scroll-behavior: smooth; /* Enables smooth scrolling for anchor links */
}

*,
*::before,
*::after {
	box-sizing: inherit; /* Inherits box-sizing from html */
}

/********** CSS Default Style **********/

html,
body {
	height: auto; /* Ensure height is auto */
	overflow: visible; /* Or auto, which is the default */
	font-family: Arial, sans-serif, "Salbo", "Oswald", "Belleza", "Roboto", "Raleway"; /* Sets Default Font */
	font-size: 15px; /* default font size is base for variable calculations */
	line-height: 1.25; /* computes to (font-size * line-height) */
	padding: var(--spacer);
}

/********** Typography - Start **********/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
	margin-top: calc(8px + 1.5625vw);
	margin-right: 2.5%;
	margin-bottom: calc(8px + 1.5625vw);
	margin-left: 2.5%;
	padding: 2.5%;
}

h1 {
	font-size: var(--step-5);
}

h2 {
	font-size: var(--step-4);
}

h3 {
	font-size: var(--step-3);
}

h4 {
	font-size: var(--step-2);
}

h5 {
	font-size: var(--step-1);
}

h6 {
	font-size: var(--step-0);
}

p {
	font-size: var(--step-0);
	text-align: left;
	margin: 1.2rem;
}

large {
	font-size: var(--step-5);
}

small {
	font-size: var(--step--2);
}

tiny {
	font-size: var(--step--3);
}

em {
	font-weight: bold;
	font-style: normal;
}

i {
	color: lightgrey;
	font-weight: 300;
	font-style: italic;
}

ul {
	list-style-position: inside;
  	padding-left: 0;
}

ul.unstyled {
	list-style-type: none; /* Remove bullets */
}

.transparent {
	color: rgba(0, 0, 0, 0);
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
	font: inherit;
}

hr {
	height: 0;
	border: 0;
	border-top: 3px solid #eee;
	border-color: #866542;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	margin-right: 25px;
	margin-left: 25px;
}

/********** Typography - End **********/


/********** Borders - Start **********/

/* Red border */
hr .red1 {
	border-top: 1px solid red;
}

/* Dashed red border */
hr .red2 {
	border-top: 1px dashed red;
}

/* Dotted red border */
hr .red3 {
	border-top: 1px dotted red;
}

/* Thick red border */
hr .red4 {
	border: 1px solid red;
}

/* Large rounded red border */
hr .red5 {
	border: 10px solid red;
	border-radius: 5px;
}

/********** Borders - End **********/


/********** Link & Button Behavior - Start **********/

a {
	color: inherit;
	background-color: transparent;
	text-decoration: none;
}

a:active,
a:hover {
	outline: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-weight: inherit;
}

input,
button {
	-webkit-transition: all ease 0.2s;
	-moz-transition: all ease 0.2s;
	-o-transition: all ease 0.2s;
	transition: all ease 0.2s;
}

button {
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
}

button:focus {
	background: #808080;
	color: #000;
}


/* Base (All) Button Styling - Start */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	font-size: clamp(14px, 2vw, 18px);
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
	margin: 5px;
	white-space: nowrap;
}
/* Base (All) Button Styling - End */


/* Button Border Options - Start */
.btn-border-thin {
	border: 1px solid #ccc;
}
 
.btn-border-thick {
	border: 3px solid #666;
}
 
.btn-border-dashed {
	border: 2px dashed #999;
}
 
.btn-border-rounded {
	border-radius: 20px;
}
 
.btn-border-custom {
	border: 2px solid #f8e6c2;
}
/* Button Border Options - End */
 
 
/* Button Size Options - Start */
.btn-small {
	padding: 8px 16px;
	font-size: clamp(12px, 1.5vw, 14px);
	max-width: 150px;
}
   
.btn-large {
	padding: 12px 24px;
	font-size: clamp(16px, 2.5vw, 18px);
	max-width: 300px;
}
/* Button Size Options - End */
 
 
/** Button Shape Options - Start **/

/* Square Button */
.btn-square {
	border-radius: 0;
}

/* Radius Corner Button */
.btn-radius {
	border-radius: 15px;
}

/* Pill (Oval) Button */
.btn-oval {
	border-radius: 50px; /* Set border-radius greater than the button's height */
}
/** Button Shape Options - End **/


/** Button Color Options - Start **/

/* Dark to light gradient background options */
.btn-dark-light-gradient {
	background: radial-gradient(circle, var(--dark-orange), var(--lt-orange));
	color: var(--text-color);
	border: 2px solid var(--border-dark-color);
}

/* Hover effect for dark to light gradient button */
.btn-dark-light-gradient:hover {
	transform: scale(1.05);
	box-shadow: 0 0 5px var(--dark-orange), 0 0 10px var(--dark-orange), 0 0 15px var(--lt-orange);
}

/* Light to dark gradient background options */
.btn-light-dark-gradient {
	background: radial-gradient(circle, var(--lt-orange), var(--dark-orange));
	color: var(--text-color);
	border: 2px solid var(--border-light-color);
}

/* Hover effect for light to dark gradient button */
.btn-light-dark-gradient:hover {
	transform: scale(1.05);
	box-shadow: 0 0 5px var(--lt-orange), 0 0 10px var(--lt-orange), 0 0 15px var(--dark-orange);
}

.btn-orange-gradient {
	background: linear-gradient(180deg, #f5b026, #f48423); /* Initial orange gradient */
	color: #000;
	text-shadow: 0 1px 1px #b85300;
}
   
.btn-orange-gradient:hover {
	background: linear-gradient(180deg, #ffbb33, #eb7b1a); /* Brighter orange on hover */
}
   
.btn-green-gradient {
	background: linear-gradient(180deg, #78c800, #56a600);
	color: #fff;
	text-shadow: 0 1px 1px #254601;
}
   
.btn-green-gradient:hover {
	background: linear-gradient(180deg, #a6f000, #78c800);
}

/** Button Color Options - End **/


/** Button Effects - Start **/

/* Neon (Halo) Effect */
.btn-neon {
	position: relative;
}
 
.btn-neon::before {
	content: "";
	position: absolute;
	inset: -1px;  /* Positive values (e.g., inset: 5px;), the pseudo-element will be positioned inside the button. Negative values (e.g., inset: -5px;) position outside */
	background: transparent;
	border-radius: 35%; /* Increase or decrease border-radius to most closely mirror button element's shape. */
	transition: box-shadow 0.3s ease;
	pointer-events: none;
	z-index: -1;
}
 
.btn-neon:hover::before {
	box-shadow: 0 0 50px 30px rgba(248, 230, 194, 0.7); /* Exaggerated box-shadow match lightest shade in button's color pallette */
}

/* Shadow Effect */
.btn-shadow {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
	transition: box-shadow 0.3s ease;
}
   
.btn-shadow:hover {
	box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.7);
}
 
/* Zoom Effect */
.btn-zoom {
	transition: transform 0.3s ease; /* Smooth transition */
}
 
.btn-zoom:hover {
	transform: scale(1.05); /* Adjust scale for desired zoom */
}
 
/** Button Effects - End **/


/********** Link & Button Behavior - End **********/


/********** Forms - Start **********/

label {
	font-weight: 600;
}

fieldset,
textarea,
input {
	min-height: 2rem;
	border: 0.5px groove lightgrey;
}

select {
	width: 100%; /* Takes up the full width of parent container */
	max-width: 100%; /* Prevents element from exceeding its natural width */
	box-sizing: border-box;
}

select:required:invalid {
	color: gray;
}

option[value=""][disabled] {
	display: none;
}

option {
	color: black;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
textarea,
input[type="checkbox"] {
	width: 100%;
	box-sizing: border-box;
	margin: 0.5em;
	padding: 0.5em;
}

input:user-valid {
	border: 2px solid green; /* Input must be required */
}

input:user-invalid {
	border: 2px solid red; /* Input must be required */
}

/********** Forms - End **********/


/********** Headings - Start **********/

.page__title {
	font-weight: bold;
	font-stretch: 200%;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.column_heading {
	margin-top: 60px;
	padding-bottom: 5px;
	border-bottom: 3px groove #866542;
}

/***** Headings - End *****/


/***** Images - Start *****/

img {
	/* width: 100%; /* Makes image 100% responsive */
	max-width: 100%; /* Makes above image 100% responsive but never scale up larger than original size */
	height: auto;
	object-fit: contain; /* Ensures the image fits within its container */
	display: block;
}

.responsive {
	max-width: 100%; /* Makes above image 100% responsive but never scale up larger than original size */
}

.responsive_max-size {
	max-width: 400px; /* Makes above image 100% responsive but never scale up larger than designated size */
}

/***** Images - End *****/


/***** Animations - Start *****/

*:not(a) {
	animation: 3s ease-out 0s 1 fadeIn;
}

/**section img {
	view-timeline: --item;
	animation: item-reveal both ease-in;
	animation-timeline: --item;
	animation-delay: cover 10%;
	animation-end-delay: cover 35%;
	animation-range: cover 10% cover 35%;
}

section img {
	--y: 0;
}
section p {
	--x: 0;
	--y: 50%;
	view-timeline: --item;
	animation: item-reveal both ease-out;
	animation-timeline: --item;
	animation-delay: cover 35%;
	animation-end-delay: cover 50%;
	animation-range: cover 35% cover 50%;
	position: sticky;
	bottom: 40%;
}**/

.slide-left {
	animation: slideInFromLeft 10s infinite;
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-130%);
	}
	100% {
		transform: translateX(0);
	}
}

.slide-right {
	animation: slideInFromRight 10s infinite;
}

@keyframes slideInFromRight {
	0% {
		transform: translateX(300%);
	}
	100% {
		transform: translateX(0);
	}
}

.slide-bottom {
	animation: slideInFromBottom 10s infinite;
}

@keyframes slideInFromBottom {
	0% {
		opacity: 0;
		margin-top: -100%;
	}
	100% {
		opacity: 1;
	}
}

.slide-top {
	animation: slideInFromTop 10s infinite;
}

@keyframes slideInFromTop {
	0% {
		opacity: 0;
		margin-bottom: -100%;
	}
	100% {
		opacity: 1;
	}
}

.fade-in {
	animation: fadeIn 10s infinite;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.fade-out {
	animation: fadeOut 10s infinite;
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.item-reveal {
	animation: itemReveal 10s infinite;
}

@keyframes itemReveal {
	0% {
		opacity: 0;
		translate: var(--x, 0) var(--y, 0);
	}
}

/***** Scroll Animations *****/

.scroll-slide-left {
	animation: slideInFromLeft linear both;
	animation-timeline: view();
	animation-range: entry 50% cover 50%;
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-130%);
	}
	100% {
		transform: translateX(0);
	}
}

.scroll-slide-right {
	animation: slideInFromRight linear both;
	animation-timeline: view();
	animation-range: entry 50% cover 50%;
}

@keyframes slideInFromRight {
	0% {
		transform: translateX(300%);
	}
	100% {
		transform: translateX(0);
	}
}

.scroll-fade-in {
	/**animation: fadeIn 3s ease both;**/
	animation: fadeIn linear both;
	animation-timeline: view(); /* attaches to viewport */
	/**animation-timeline: scroll();  /* attaches to scroller */
	animation-range: entry 25% cover 25%;
}

.scroll-reveal {
	animation: revealOnScroll linear;
	animation-timeline: view();
	animation-range: entry 0% cover 40%;
}

@keyframes revealOnScroll {
	from {
		opacity: 0;
		clip-path: inset(100% 100% 0 0);
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

.image-reveal {
	view-timeline-name: --image-reveal;
	view-timeline-axis: block;
	animation: linear imageRevealOnScroll both;
	animation-timeline: --image-reveal;
	animation-range: entry 25% cover 50%;
}

@keyframes imageRevealOnScroll {
	from {
		opacity: 0;
		clip-path: inset(45% 20% 45% 20%);
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

/***** Hover Animations *****/

.hover-rotate:hover {
	animation-name: rotateOnHover;
	animation-duration: 0.7s;
	animation-iteration-count: 10;
}

@keyframes rotateOnHover {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

/***** Animations - End *****/

.clr {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Revert CSS style of target element and its children */
.reset-style,
.reset-style * {
	all: revert;
}

.hidden {
	display: none;
}

/* Alignment */
.container_left {
	float: left;
}

.container_right {
	float: right;
}

.flex-center {  /* Apply style to parent container to center child elements within */
	display: flex;
    	justify-content: center; /* Centers horizontally */
    	align-items: center;    /* Centers vertically */
    	/*height: 100vh;          /* Optional - Ensures the container is centered within the viewport */
}

.center {
	text-align: center;
}

/**********  CSS Default Style Template by nesbconsultants.com - End **********/