/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


:root {
 --padding-small: 2.5rem;
 --padding-medium: 3.5rem;
 --padding-large: 7rem;
 --max-content-width: 84vw;
 --content-width: 1280px;
 --side-padding: calc((100vw - var(--max-content-width)) / 2);
}

@media only screen and (max-width: 1024px) {
	:root {
	 --padding-small: 1.5rem;
	 --padding-medium: 2rem;
	 --padding-large: 4rem;
	}
}

@media only screen and (max-width: 767px) {
	:root {
	 --padding-small: 1rem;
	 --padding-medium: 1.5rem;
	 --padding-large: 2.5rem;
	}
}

/* spacing */
.e-con>.e-con-inner {
    width: var(--max-content-width);
    max-width: var(--content-width);
}

.wide.e-con>.e-con-inner {
    width: var(--content-width);
}

/* padding */
.pt-lg {
	padding-top: var(--padding-large);
}

.pt-md {
	padding-top: var(--padding-medium);
}

.pt-sm {
	padding-top: var(--padding-small);
}

.pb-lg {
	padding-bottom: var(--padding-large);
}

.pb-md {
	padding-bottom: var(--padding-medium);
}

.pb-sm {
	padding-bottom: var(--padding-small);
}

@media only screen and (max-width: 1024px) {
	.pt-none-md {
		padding-bottom: 0;
	}
	.pb-none-md {
		padding-bottom: 0;
	}
}

@media only screen and (max-width: 767px) {
	.pt-none-sm {
		padding-bottom: 0;
	}
	.pb-none-sm {
		padding-bottom: 0;
	}
}



/* =========================================
   1. THE BASE CLASS (The Heavy Lifting)
   ========================================= */
.grainy-background {
  /* Default fallback colors (Orange) */
  --bg-color: #D16E11;
  --noise-color: #D15000;
  
  background-color: var(--bg-color);
  position: relative;
  z-index: 0;
}

.grainy-background > * {
  position: relative;
  z-index: 1;
}

.grainy-background::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--noise-color);
  
  /* The single SVG Mask - you only ever need this written once! */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='black' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='luminanceToAlpha'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='black' filter='url(%23n)'/%3E%3C/svg%3E");
  
  -webkit-mask-size: 300px 300px;
  mask-size: 300px 300px;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: -1; 
}

/* =========================================
   2. THE COLOR VARIATIONS
   ========================================= */

/* Orange (Matches your original) */
.grainy-orange {
  --bg-color: #D16E11;
  --noise-color: #D15000;
}

/* Red (Replace with your exact hex codes) */
.grainy-red {
  --bg-color: #C82A2A; 
  --noise-color: #9E1B1B; 
}

/* Blue (Replace with your exact hex codes) */
.grainy-blue {
  --bg-color: #2A6BB1; 
  --noise-color: #1B4B82; 
}

/* Brown (Replace with your exact hex codes) */
.grainy-brown {
  --bg-color: #8B5A2B; 
  --noise-color: #5C3A18; 
}