:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 200;
	--wd-text-color: rgb(51,51,51);
	--wd-text-font-size: 16px;
	--wd-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: rgb(17,17,17);
	--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: rgb(17,17,17);
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: rgb(17,17,17);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 400;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 16px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(17,17,17);
	--wd-alternative-color: rgb(217,178,111);
	--btn-default-font-family: "Inter", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 400;
	--btn-default-font-size: 14px;
	--btn-default-bgcolor: rgb(110,18,32);
	--btn-default-bgcolor-hover: rgb(153,24,24);
	--btn-accented-bgcolor: rgb(32,53,242);
	--btn-accented-bgcolor-hover: rgb(29,48,220);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: rgb(32,53,242);
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 900px;
	--wd-popup-padding: 0px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(17,17,17);
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(248,247,245);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}



.wd-page-title {
background-color: #0a0a0a;
}

/*FOR LANDING PAGE======================================================================================================*/
.forminator-custom-form-37029 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	margin: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Targets laptops and desktops (1024px and wider) */
@media screen and (min-width: 1024px) {
  .forminator-custom-form-37029 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 20px;
		align-items: flex-start;
		padding-bottom: 0 !important;
	}
	
	.forminator-response-message {
		padding-top: 52px !important;
	}
	
	.forminator-row {
		flex-grow: 1 !important;
		margin-bottom: 0 !important;
	}
	
	.forminator-row.forminator-row-last {
		flex-grow: 0 !important;
	}
	
	.forminator-response-message {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
	}
	
	.welcome-section-2 {
		/*height: 100vh;*/
	}
}


/*FOR SECOND STAGE OF LANDING PAGE=======================================================================================================*/
/*Controls the delay slide up for the share-your-story box*/
:root {
  /* ====================================
     TIMING & ANIMATION CONTROLS
     ==================================== */
  --anim-duration: 0.8s; /* Duration for both movements */
  --anim-delay: 4s;      /* Pause before animation kicks in */
  --hero-offset: 70%;   /* How far down hero shifts to sit dead-center initially */
  --story-offset: 100px; /* How far below screen story div starts */
}

/* 1. Hero text rests centered on page load */
.hero-text {
  transform: translateY(var(--hero-offset));
  animation: heroShiftUp var(--anim-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay) forwards;
}

/* 2. Story div starts hidden further down */
.share-your-story {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(var(--story-offset));
  animation: storySlideUp var(--anim-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay) forwards;
}

/* ====================================
   SYNCHRONIZED KEYFRAMES
   ==================================== */

/* Moves Hero text UP into its final top position */
@keyframes heroShiftUp {
  to {
    transform: translateY(0);
  }
}

/* Fades in and slides Story div UP into the newly created room */
@keyframes storySlideUp {
  to {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.forminator-custom-form-37044 {
	margin: 0px !important;
}


.skip-for-now-response {
	display: none;
	transition: 0.3s ease-in-out;
}

/*For header nav bar */
.cta-header-button {
	padding: 12px 20px !important;
}


/*====================================== HOMEPAGE HERO SECTION Glowing Aurora Background==================================================*/
/* CSS for Glowing Aurora Background */
.wave-bg-hero {
    position: relative;
    overflow: hidden;
    background-color: #f8f7f5; /* Dynamic base color */
}

/* Ensure content sits above the background waves */
/* CSS for Glowing Aurora Background */
.wave-bg-hero {
    position: relative;
    overflow: hidden;
    background-color: #f8f7f5; /* Dynamic base color */
}

/* Ensure content sits above the background waves */
.wave-bg-hero > *:not(.wave-container) {
    position: relative;
    z-index: 10;
}

.wave-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Vertical scanline texture overlay with dynamic top fade */
.wave-texture {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.8) 2px, rgba(0,0,0,0.8) 3px);
    opacity: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    z-index: 4;
}

.wave-layer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 50% 100%;
    transform-origin: bottom center;
    animation: wave-move linear infinite;
    filter: blur(60px); /* Creates the glowing visual */
}

.wave-layer-1 {
    height: 105%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C50%20C150%2C100%20350%2C0%20500%2C50%20C650%2C100%20850%2C0%201000%2C50%20L1000%2C100%20L0%2C100%20Z%22%20fill%3D%22%23d9b26f%22%2F%3E%3C%2Fsvg%3E");
    animation-duration: 20s;
    z-index: 1;
}

.wave-layer-2 {
    height: 70%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C50%20C150%2C100%20350%2C0%20500%2C50%20C650%2C100%20850%2C0%201000%2C50%20L1000%2C100%20L0%2C100%20Z%22%20fill%3D%22%236e1220%22%2F%3E%3C%2Fsvg%3E");
    animation-duration: 15s;
    background-position: 25% 100%; /* Offsets phase for chaos */
    z-index: 2;
}

.wave-layer-3 {
    height: 31%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201000%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C50%20C150%2C100%20350%2C0%20500%2C50%20C650%2C100%20850%2C0%201000%2C50%20L1000%2C100%20L0%2C100%20Z%22%20fill%3D%22%23121212%22%2F%3E%3C%2Fsvg%3E");
    animation-duration: 10s;
    background-position: 50% 100%; /* Offsets phase for chaos */
    z-index: 3;
}

@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}



/*=============================================================HERO IMAGE TILT EFFECT=============================================*/
.floating-tilt {
  --float-distance: 14px;
  --float-duration: 4.5s;
  --perspective: 1200px;
  --tilt-ease: 0.2s;
  --tilt-x: 0deg;
  --tilt-y: 0deg;

  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--tilt-ease) cubic-bezier(0.25, 1, 0.5, 1);
  animation: floatLoop var(--float-duration) ease-in-out infinite alternate;
}

@keyframes floatLoop {
  0% {
    transform: 
      perspective(var(--perspective)) 
      translateY(calc(-1 * var(--float-distance))) 
      rotateX(var(--tilt-x)) 
      rotateY(var(--tilt-y));
  }
  100% {
    transform: 
      perspective(var(--perspective)) 
      translateY(var(--float-distance)) 
      rotateX(var(--tilt-x)) 
      rotateY(var(--tilt-y));
  }
}





/*=============================================================STICKY SCROLL EFFECT FOR TOP SECTION=============================================*/
/* 1. The main wrapper that creates the scrollable space */
        .gb-scroll-track {
            /* 300vh means it takes 3 full viewport heights of scrolling to complete the animation */
            height: 300vh; 
            position: relative;
            /* Default variables (updated by JS) */
            --image-progress: 0;
            --text-progress: 0;
        }

        /* 2. The container that pins to the screen */
        .gb-scroll-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            /*width: 100%;*/
            overflow: hidden;
            /*display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
            color: white;*/
        }

        /* 3. The initial content that sticks first */
        .gb-scroll-section-1 {
            position: absolute;
            z-index: 10;
            /*text-align: center;
            width: 100%;*/
            padding: 0 20px;
            /* Fades out and moves up as the image comes in */
            opacity: calc(1 - var(--image-progress) * 2);
            transform: translateY(calc(var(--image-progress) * -50px));
            pointer-events: auto;
        }

        /* 4. The image wrapper and image */
        .gb-scroll-image-wrap {
            position: absolute;
            z-index: 20;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none; /* Let clicks pass through if image isn't full */
            /* Container slides up from the bottom (100vh) to the center (0vh) */
            transform: translateY(calc((1 - var(--image-progress)) * 100vh));
        }

        .gb-scroll-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* Image scales up from 50% to 100% as it slides up */
            transform: scale(calc(0.5 + (var(--image-progress) * 0.5)));
            /* Rounded corners that straighten out to 0px as it fills the screen */
            border-radius: calc((1 - var(--image-progress)) * 100px);
            /*box-shadow: 0 -10px 50px rgba(0,0,0,0.5);*/
            /* Performance optimizations */
            will-change: transform, border-radius;
        }

        /* 5. The final text overlay that appears above the image */
        .gb-scroll-text-overlay {
            position: absolute;
						top: 50%;
            z-index: 30;
            /*text-align: center;
            width: 100%;*/
            /*padding: 0 20px;*/
            /* Fades in and slides up slightly */
            opacity: var(--text-progress);
            transform: translateY(calc((1 - var(--text-progress)) * 100px));
            /*color: white;*/
            pointer-events: none; /* Prevent blocking clicks when invisible */
        }
        
        /* Make links clickable once text is visible 
        .gb-scroll-track.text-is-active .gb-scroll-text-overlay {
            pointer-events: auto;
        }*/


/*==========================================FLOAT & INTERACTIVE EFFECT FOR ORGANISATIONS WE WORK WITH SECTION=================================================*/
.interactive-float {
            /* 1. Mouse Reaction Effect (Uses independent translate property) */
            /* The variables --mouse-x and --mouse-y are injected by our JavaScript */
            translate: var(--mouse-x, 0px) var(--mouse-y, 0px);
            transition: translate 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            
            /* 2. Floating Effect */
            animation: floatUpDown 6s ease-in-out infinite;
            will-change: translate, transform;
            cursor: pointer;
        }

        /* Create slightly different float timings so they don't all move identically */
        .interactive-float:nth-child(even) {
            animation-duration: 7s;
            animation-delay: -2s;
        }
        .interactive-float:nth-child(3n) {
            animation-duration: 5s;
            animation-delay: -4s;
        }

        /* The Keyframe for the vertical floating motion */
        @keyframes floatUpDown {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-16px);
            }
        }