/*
 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
 CSS Author:   Vlatko Mitov
 Date: 06.01.2024
*/

/* 
 Sections naming on the web site
 Home page: 
	MAIN HERO Section
	.main-hero__
	PROJECTS Section
	.project__
	CONTACT Section
	.contact__
	CTA
	.cta__
 
 About us page:
	ABOUT HERO Section
	.about-hero__

 Contact page:
	CONTACT HERO Section
	.contact-hero__

 Projects page:
	PROJECTS HERO Section
	.project-hero__
 
*/

/*
 * VARIABLES
 * 
 * Root Font Size is 100%
 * 
 */

:root {

/* FONTS */
	
	/* Main Font Family */
	--body-font-family: "Fira Sans Extra Condensed", sans-serif;
	
	/* Headings Font Style */
	--heading-font-weight: 900;

	/* Titles Font Style */
	--h-title-font-weight: 700;

	
/* FONTS SIZE */

/* 
 * TEXT SIZE SCALE
 * https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=320&minRatio=1.125&maxFontSize=18&maxWidth=1280&maxRatio=1.2&steps=xs,s,m,l,xl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900 
 * 
 */

    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);


/*
 * HEADING SIZE SCALE
 * https://www.fluid-type-scale.com/calculate?minFontSize=20&minWidth=320&minRatio=1.25&maxFontSize=22&maxWidth=1280&maxRatio=1.333&steps=6,5,4,3,2,1,title&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=16&previewFont=Inter&previewText=Preview&previewWidth=900
 * 
 */

    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);

	
/*
 * MAIN HERO SIZE SCALE
 * 
 */
/*	--heading-xl: clamp(1.56rem, 9.28vw + -0.76rem, 6.67rem);*/

	--heading-xs: clamp(1.38rem, 4.93vi + 0.4rem, 4.34rem);
	--heading-s: clamp(1.56rem, 6.09vi + 0.34rem, 5.21rem);
	--heading-m: clamp(1.75rem, 5.42vi + 0.67rem, 5rem);
	--heading-l: clamp(1.97rem, 9.22vi + 0.13rem, 7.5rem);
	--heading-xl: clamp(2.21rem, 11.31vi + -0.05rem, 9rem);
/*
 * PAGE TITLES SCALE
 * 
 */
	
	--title-xs: clamp(0.89rem, 2.86vw + 0.32rem, 2.6rem);
	--title-s: clamp(1rem, 3.54vw + 0.29rem, 3.13rem);
	--title-m: clamp(1.13rem, 4.38vw + 0.25rem, 3.75rem);
	--title-l: clamp(1.27rem, 5.39vw + 0.19rem, 4.5rem);
	--title-xl: clamp(1.42rem, 6.63vw + 0.1rem, 5.4rem);

/* FONTS WEIGHT */

	--font-xlight_weight: 100;
	
	
	
/* --------------------------------------------------------------
 * BOX
 * 
/*

/* BOX Design Variables
 * GLOBAL Variables on website root - video PB101 L07
 * 
 */

	--radius: clamp(1rem, 1.042vw + 0.667rem, 2rem); /* Border radius for all elements 2rem max - 1rem min */ 
	--section-block-padding: clamp(5rem, 8.333vw + 3.333rem, 10rem); /* Section block padding */
	--section-inline-padding: clamp(0.9375rem, -2.25rem + 15vw, 9.375rem); /* Section inline padding */
	--container-block-padding: clamp(0.63rem, 1.11vi + 0.36rem, 1.25rem); /* Container block padding */
	--container-inline-padding: clamp(0.63rem, 1.11vi + 0.36rem, 1.25rem); /* Container block padding */
/*	
	--container-block-padding: clamp(1rem, 0.833vw + 0.833rem, 1.5rem); 
	--container-inline-padding: clamp(1rem, 0.833vw + 0.833rem, 1.5rem);
*/
	--container-width: 1366px; 
	--p-padding-top: clamp(1rem, 0.521vw + 0.833rem, 1.5rem);
	--p-padding-bottom: clamp(1.17rem, 1.53vw + 0.86rem, 2.08rem);
	--p-margin-top: ;
	--p-margin-bottom: clamp(0.78rem, 2.18vw + 0.34rem, 2.08rem); /* 25px to 10px */
	

	
/*
 * LINE Design Variables
 * 
 */
	/* Text line height*/
	--line-height-xl: 1.4; /* Line height sizes */
	--line-height-l: 1.5;
	--line-height-m: 1.5;
	--line-height-s: 1.6;
	--line-height-xs: 1.7;
	
	/* Heading line height */
	--line-height-h1: 1.1;
	--line-height-h2: 1.2;
	--line-height-h3: 1.3;
	--line-height-h4: 1.4;
	--line-height-h5: 1.5;
	--line-height-h6: 1.6;
	--line-height-h-title: 1.05;
	
	
	
/*
 * Border style
 * 
 */
	/* Global */
	--border-size: 1px;
	--border-style: solid;
	
	/* Divider style */
	
/* --------------------------------------------------------------
 * COLOR
 * 
 */
	/* COLOR Design Variables - format: hsla */
	/* Global */
	--primary: ;
	--secondary: ;
	--warning: ;
	--danger: ;
	--success: ;
	
	--light: #ffffff ;
	--dark: #333333;

	--white-trans-20: #ffffff;
	--black-trans-20: #777777;

	
	/* Local */
	/* FONT ---------------- */
	
	--subhead-light: red;
	--subhead-dark: gray;
	
	/* BUTTONS ---------------- */
	
	/* pulse button */
	--pulse-button-h: 46.023;
	--pulse-button-s: 100%;
	--pulse-button-l: 66%;
	--pulse-button-a: 0.5;
	--pulse-button-border-radius: 2rem;
	
	/* button 1 */
	
	/* button 2 */
	
	/* TITLES ---------------- */
	
	/* hero titles color */
	--main-hero-light-h: 46.023;
	--main-hero-light-s: 100%;
	--main-hero-light-l: 66%;
	--main-hero-light-a: 0.5;
	
	/* hero text color */
	--main-hero-text-light-h: 0;
	--main-hero-text-light-s: 0%;
	--main-hero-text-light-l: 100%;
	--main-hero-text-light-a: 1;
	
	/* BORDER and DIVIDER */
	/* border color */
	--border-color-light: var(--white-trans-20);
	--border-color-dark: var(--black-trans-20);
	
	/* divider color */
	--divider-color-light: var(--white-trans-20);
	--divider-color-dark: var(--black-trans-20);

/* 
 * Full Tokens
 */
	
	--main-hero-light: var(--main-hero-light-h) var(--main-hero-light-s) var(--main-hero-light-l);
	--main-hero-text-light: var(--main-hero-text-light-h) var(--main-hero-text-light-s) var(--main-hero-text-light-l);

/* COLOR END */
	

/*  --------------------------------------------------------------
 * Specific TEMPLATE STYLING
 * 
 */
	
/* Border Style
 * 
 */
	/* Full Tokens - BORDERs */
	--border: var(--border-size) var(--border-style) var(--border-color-dark);
	--border-light: var(--border-size) var(--border-style) var(--border-color-light);
	--border-warning: var(--border-size) var(--border-style) var(--warning);
	--border-danger: var(--border-size) var(--border-style) var(--danger);
	--border-success: var(--border-size) var(--border-style) var(--success);	
	
/* Divider Style
 * 
 */
	/* Full Tokens - DIVIDERs*/
	--divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);   
	


	/* SECTION: Main Hero Style */
	/* SECTION: Projects Style*/
	
	--hover-image__height: clamp(12.5rem, 36.65vw + 5.06rem, 34.38rem);
	--hover-image__height-max: clamp(18.75rem, 20.94vw + 14.5rem, 31.25rem);
	--hover-image__icon-size: clamp(1.88rem, 3.14vw + 1.24rem, 3.75rem);
}

	/* SECTION: Services Style */
	/* SECTION: About Style */
	/* SECTION: CTA - Call To Action Style */




/* ---------------------- END of VARIABLES-------------------------- */

/* ########################## CSS Styling ########################## */

/*
 TEXT SIZE UTILITY CLASSES 
 You now don't need to set ANY typography in Theme Styles - not even body copy. The below code handles it all from here in one place. REMOVE any font sizes or line heights set for body copy in Bricks Theme Style typography settings.
*/

.text-xl, .text-xl-light {
    font-size: var(--text-xl);
    line-height: var(--line-height-xl);
}

.text-l, .text-l-light {
    font-size: var(--text-l);
    line-height: var(--line-height-l);
}

body, .text-m, .text-m-light {
    font-size: var(--text-m);
    line-height: var(--line-height-m);
}

.text-s, .text-s-light {
    font-size: var(--text-s);
    line-height: var(--line-height-s);
}

.text-xs, .text-xs-light {
    font-size: var(--text-xs);
    line-height: var(--line-height-xs);
}

	/* Text light */

.text-xl-light,
.text-l-light, .text-m-light,
.text-s-light,
.text-xs-light {
	color: var(--light);
	font-weight: 100;
}




/*
 HEADING SIZE UTILITY CLASSES
 REMOVE any font sizes or line heights set for all heading levels in Bricks Theme Style typography settings.
 */

.h-title {
    font-size: var(--h-title);
    line-height: var(--line-height-h-title);
	font-weight: var(--h-title-font-weight);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--heading-font-weight);
}

h1, .h1 {
    font-size: var(--h1);
    line-height: var(--line-height-h1);
}

h2, .h2 {
    font-size: var(--h2);
    line-height: var(--line-height-h2);
}

h3, .h3 {
    font-size: var(--h3);
    line-height: var(--line-height-h3);
}

h4, .h4 {
    font-size: var(--h4);
    line-height: var(--line-height-h4);
}

h5, .h5 {
    font-size: var(--h5);
    line-height: var(--line-height-h5);
}

h6, .h6 {
    font-size: var(--h6);
    line-height: var(--line-height-h6);
}

	/* Define body, section, container, block... */
	/*		*/

body {
	font-family: var(--body-font-family);
	font-size: var(--text-m);
}

section {
	padding-block: var(--section-block-padding);
	padding-inline: var(--section-inline-padding);
}

p {
	padding-top: var(--p-padding-top);
}

/* Page TITLES */
/* 
 * .title-xl - 100px
 * .title-l - 80px
 * .title-m - 60px
 * .title-s - 40px
 * .title-xs - 28px
 * 
 */

.title-xl {
	font-size: var(--title-xl);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-l {
	font-size: var(--title-l);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-m {
	font-size: var(--title-m);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-s {
	font-size: var(--title-s);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}
.title-xs {
	font-size: var(--title-xs);
	line-height: var(--line-height-h-title);
	color: hsla(var(--main-hero-text-light));
}


/* Main Builder Classes */

.brxe-container {
	width: var(--container-width);
	padding-block: var(--container-block-padding);
	padding-inline: var(--container-inline-padding);

}

.brxe-button {
    width: auto;
}


/* -------------------------------------------
 * --- MAIN HERO SECTION --- 
 * -------------------------------------------
 * - blocks -
 * .main-hero__section
 * .main-hero__container
 * .main-hero__block
 * .main-hero__div
*/

.main-hero__full-img-overlayhalf-bg {
    flex-direction: row;
    padding-top: 75px;
    padding-bottom: 75px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    min-height: 100vh;
}


/* - headings -
.main-hero__heading-xl-light
.main-hero__heading-x-light
.main-hero__heading-m-light
.main-hero__heading-s-light
.main-hero__heading-xs-light

.main-hero__heading-xl-dark
.main-hero__heading-x-dark
.main-hero__heading-m-dark
.main-hero__heading-s-dark
.main-hero__heading-xs-dark
*/
.main-hero__heading-xl-light {
	font-size: var(--heading-m);
	color: hsla(var(--main-hero-light));
	line-height: var(--line-height-h2);
}


/* - subheadings - 
.main-hero__subheading-s-light
.main-hero__subheading-xs-light

.main-hero__subheading-s-dark
.main-hero__subheading-xs-dark
*/

/* - text - */
.main-hero__text-xl-light {
	color: hsla(var(--main-hero-text-light));
	font-weight: var(--font-xlight_weight);
}

/*
.main-hero__text-x-light
.main-hero__text-m-light
.main-hero__text-s-light
.main-hero__text-xs-light

.main-hero__text-xl-dark
.main-hero__text-x-dark
.main-hero__text-m-dark
.main-hero__text-s-dark
.main-hero__text-xs-dark
*/

/* -------------------------------------------
 * HERO SECTION
 * -------------------------------------------
*/

/* - blocks -
.hero__section
.hero__container
.hero__block
.hero__div
*/


/* - headings -
.hero__heading-xl-light
.hero__heading-x-light
.hero__heading-m-light
.hero__heading-s-light
.hero__heading-xs-light

.hero__heading-xl-dark
.hero__heading-x-dark
.hero__heading-m-dark
.hero__heading-s-dark
.hero__heading-xs-dark
*/

/* - subheadings - 
.hero__subheading-s-light
.hero__subheading-xs-light

.hero__subheading-s-dark
.hero__subheading-xs-dark
*/

/* - text - 
.hero__text-xl-light
.hero__text-x-light
.hero__text-m-light
.hero__text-s-light
.hero__text-xs-light

.hero__text-xl-dark
.hero__text-x-dark
.hero__text-m-dark
.hero__text-s-dark
.hero__text-xs-dark
*/

/* -------------------------------------------
 * PROJECT SECTION
 * -------------------------------------------
 */

.subhead-light {
	color: var(--subhead-light);
	text-transform: uppercase;
	
}

.subhead-dark {
	color: var(--subhead-dark);
	text-transform: uppercase;
}


/* -------------------------------------------
 * SERVICES SECTION
 * -------------------------------------------
 */


/* -------------------------------------------
 * WHY US SECTION
 * -------------------------------------------
 */

.about-section {
/*	background-color: hsla(0, 0%, 3%, 1);*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%23fff' fill-opacity='0.024'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
}


/* --- CTA SECTION --- */
/* ------------------------------------------- */



/* --- FOOTER SECTION --- */
/* ------------------------------------------- */

.footer-section {

}


/*--- BLOG/Category Pages ---*/
/* blog, categories, archive template style */
/* ------------------------------------------- */

ul.list--none, ol.list--none, .list--none > ul, .list--none > ol {
  list-style: none;
  padding-inline-start: 0;
  list-style-type: none;
  -webkit-margin-before: 0em;
  margin-block-start: 0em;
  margin-block-end: 0;
}

/* -------------------------------------------------------------- */

/* TESTING */

/* from templates - to be adjusted - in PROJECT Section */

.hover-image {
	
}	/* Section Hover Image */

.hover-image__grid {
	display: grid;
	grid-gap: 3rem;
	grid-template-columns: 2fr 1fr;
}	/* Container class */

.hover-image__grid-right-text{
    display: grid;
    grid-gap: 3rem;
    grid-template-columns: 1fr 2fr;
}

.hover-image__img-wrap {
	position: relative;
	
}	/* IMG Block wrap class */

.hover-image__img {
	object-fit: cover;
	object-position: 0 0;
	height: var(--hover-image__height);
/*	max-height: var(--hover-image__height-max);
	max-height: 500px;*/
	border-radius: 1rem;
	transition: object-position 4s ease-in-out;
    box-shadow: 2px 2px 30px -2px rgba(255, 255, 255, 0.2);

	
}	/* Image class */

.hover-image__img:hover {
	object-position: 0 100%;

}

.hover-image__icon {
/*	font-size: 60px;*/
	font-size: var(--hover-image__icon-size);
	pointer-events: none;
	position: absolute;
	left: calc(50% - 30px);
	top: 50%;
	animation: icon-pulse 5s infinite;
	
}	/* Pulsing Icon class */


/* PULSE Icon - icon-pulse */

@keyframes icon-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
    opacity: .5:
  }
  100% {
    transform: scale(1);
  }
}


/*  */


/* PULSE BUTTON - pulse */

.pulse-button {
	box-shadow: 0 0 0 0 hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / var(--pulse-button-a));
	border-radius: var(--pulse-button-border-radius);
}

.pulse-button:hover {
	animation: pulse 1.5s; /* Animate for 1.5 seconds on hover */
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 20px hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / 0);
  }
    100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 hsla(var(--pulse-button-h) var(--pulse-button-s) var(--pulse-button-l) / 0);
  }
}

/* END PULSE BUTTON */





/* END Testing CSS */

/* -------------------------------------------------------------- */


/* Media Queries */