/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root{
     /* container width */
	
	--container : 1280px;
	
	
/* 	Body background color */
	
	--body: #f8f8f8;
	
/* 	colors */
	

  --primary-color: #D62828;        /* Dominant header/nav/buttons */
  --secondary-color: #444444;      /* Alerts / Emergency highlights */
  --tertiary-color: #F5F5F5;       /* Section backgrounds / contrast areas */
  --quaternary-color: #FFFFFF;     /* Main background and content contrast */
  --headline-color: #F4D35E;       /* Headline and accent text */
  --action-color: #2EA8D9;         /* Link / Button hover / interactive states */
  --border-color: #FFC800;         /* Borders, highlights */
  --base-color: #151515;           /* Dark footer / base backgrounds */
  --charcoal-color: #202020;       /* Slightly lighter dark sections */
  --grey-color: #f0f0f0;           /* Light backgrounds / dividers */
  --snow-color: #f8f8f8;           /* Very light section backgrounds */
  --white-color: #FFFFFF;          /* General white usage */


	
/* 	Fluid Typography */
	
	--heading-h1 :clamp(4.2rem, 3.496rem + 1.957vw, 6rem);
	--heading-h2 : clamp(4.5rem, 3.939rem + 1.22vw, 5.5rem);
	--heading-h3 : clamp(3.2rem, 2.751rem + 0.976vw, 4rem);
	--heading-h4 : clamp(2.6rem, 2.263rem + 0.732vw, 3.2rem);
	--heading-h5 : clamp(2rem, 1.72rem + 0.61vw, 2.5rem);
	--heading-h6 : 2rem;		
	--text-base : clamp(1.4rem, 1.288rem + 0.244vw, 1.6rem);
    --text-s : 1.4rem;
    --text-xs : 1.2rem;
	
/* 	Fluid Section Padding  */
	
	--section-pad-y :clamp(11rem, 9.311rem + 4.444vw, 15rem);
	--section-pad-x : 2rem;
		
/* 	Spacing	 */	
	--space-xs : 1rem;
	--space-s : 2rem;
	--space-m : 3rem;
	--space-l : 4rem;
	--space-xl : 5rem;
		
/* 	Logo - Header Spacing	 */
    --logo-w : clamp(30rem, 25.512rem + 9.756vw, 38rem);
	     
	
	
	    /*  Extra Variables    */
	  --hero-height : clamp(35rem, 21.446rem + 30.12vw, 60rem);
      --hero-img-h : clamp(35rem, 10.602rem + 54.217vw, 80rem);
	  --img-height : clamp(30rem, 24.578rem + 12.048vw, 40rem);
      --arrow-space : clamp(1rem, -41.667rem + 33.333vw, 5rem);
      --scale : clamp(0.5rem, -1.222rem + 1.736vw, 1rem);
      --card-w: clamp(17rem, 12.663rem + 9.639vw, 25rem);
      --extended-pad-x : clamp(2rem, -40.667rem + 33.333vw, 10rem);
	
	    /* 	Responsive Mobile Image (after 992px) */
	    --m-img-height: clamp(30rem, 13.7349rem + 36.1446vw, 60rem);
	
	
	   /*   Button Spacing   */
	    --btn-pad-x : 2rem;
	    --btn-pad-y : 1.5rem;
	    --btn-clr: #DD2D11;
	    --btn-text : clamp(1.8rem, 0.976rem + 0.488vw, 1.2rem);
	
	 
}

.brxe-section {
	padding : var(--section-pad-y) var(--section-pad-x);
}
.brxe-container {
	width : var(--container);
}


h1 {
	font-size : var(--heading-h1);
}
h2 {
	font-size : var(--heading-h2);
}
h3 {
	font-size : var(--heading-h3);
}
h4 {
	font-size : var(--heading-h4);
}
h5 {
	font-size : var(--heading-h5);
}

.bricks-button {
	padding : var(--btn-pad-y) var(--btn-pad-x);
	font-size : var(--btn-text);
	background-color : transparent;
	border : 1px solid var(--primary-color);
	border-radius : 10px;
	font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
	transition : 0.35s;
	border-radius : 50px;
	cursor : pointer;
}


.bricks-background-primary {
	color: var(--snow-color);
    border-color: var(--primary-color);
	background : var(--primary-color);
}
.bricks-background-secondary {
	background-color : transparent;
	color: var(--snow-color) !important;
    border-color: var(--snow-color);
}
.bricks-background-primary:hover {
	background-color: transparent;
	border-color: var(--primary-color);
	color: var(--primary-color) !important;
}

.bricks-background-secondary:hover {
	background-color: var(--primary-color);
	color : var(--snow-color) !important;
	border-color: var(--primary-color);
}