/*
 Theme Name:   Ulement
 Theme URI:    https://bricksbuilder.io/
 Description:  Custom Theme for Ulement
 Author:       julian@ulement.com
 Author URI:   https://ulement.com/
 Template:     bricks
*/

h1, h2, h3, h4, h5, h6, { 
font-family: "Nohemi",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,Arial,sans-serif, "Appke Color Emoji", "Segoe UI Symbol"; 
}

.gra-txt-primary {
background-image: linear-gradient(to top,var(--primary) 15%,var(--primary-l-2));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}


.txt-secure {
	font-size: var(--text-3xl);
	background-image: linear-gradient(to top,var(--orange) 15%,var(--orange-l-2));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.gra-txt-orange {
background-image: linear-gradient(to top,var(--orange) 15%,var(--orange-l-2));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

.gra-txt-purple {
background-image: linear-gradient(to top,var(--purple) 15%,var(--purple-l-2));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

.cta-title-get {
background-image: linear-gradient(to top,var(--purple) 15%,var(--purple-l-2));
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
	font-size: var(--text-l);
}

.home-cta__award-title {
	font-size: var(--text-l);
		line-height:1em;
	font-weight:600;
	color: var(--dark);
}

.card-Resources:hover .btn-outline {
border-color: var(--yellow);
color: var(--purple);
cursor: pointer;
}

.card-Resources:hover .btn-main {
box-shadow: 0 8px 24px -8px var(--orange);
transform: translateY(-2px);
background-image: repeating-radial-gradient( at bottom center, var(--orange), var(--yellow));
color: var(--light);
cursor: pointer;
}

.blog__CTA-card:hover .btn-main {
box-shadow: 0 8px 24px -8px var(--orange);
transform: translateY(-2px);
background-image: repeating-radial-gradient( at bottom center, var(--orange), var(--yellow));
color: var(--light);
cursor: pointer;
}

.post__CTA-card:hover .btn-main {
box-shadow: 0 8px 24px -8px var(--orange);
transform: translateY(-2px);
background-image: repeating-radial-gradient( at bottom center, var(--orange), var(--yellow));
color: var(--light);
cursor: pointer;
}

.card-Resources:hover .card-Resources__title {
	color: var(--purple);
}

.card-Resources:hover .text-link {
	color: var(--purple);
}

.card-Resources:hover .text-link svg {
transform: translateX(5px);
   transition:  ease-in-out 300ms;

 }
}



.bricks-button.bricks-background-secondary { 
	align-items: center;
	background-color: #ffffff;
	border: 1px solid rgba(23, 24, 54, 0.1);
	border-radius: 9990px;
	box-sizing: border-box;
	color: #171836;
	display: inline-flex;
	font-family: -apple-system, "system-ui", "Segoe UI", roboto, helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 18px;
	font-weight: 500;
	gap: 10px;
	justify-content: center;
	letter-spacing: 0.5px;
	line-height: 30.6px;
	max-width: 100%;
	outline: none;
	padding: 0.5em 1em;
	padding-bottom: 9.9px;
	padding-left: 19.8px;
	padding-right: 19.8px;
	padding-top: 9.9px;
	text-align: center;
	transition: all 0.3s ease-out 0s;
	width: auto;
	word-wrap: break-word;
}
.bricks-button.bricks-background-secondary:where(a) { 
	border-color: currentcolor;
	color: currentcolor;
	cursor: pointer;
	text-decoration: none;
}
.bricks-button.bricks-background-secondary:hover { 
	border-color: rgba(23, 24, 54, 0.1);
	color: #171836;
}

.photo-credit {
	margin-top: var(--space-4xl);
	color: var(--dark);
    font-size: var(--text-s);
    background-color: var(--dark-5);
    border-radius: var(--radius-full);
	letter-spacing: .5px;
    padding: .5em 1em;
	display: inline;
}

.card-blog__thumb-block:hover .card-blog__heading {
	color: var(--purple) !important;
}

/* Avoid FUC on frontend*/
.bricks-is-frontend .animation-trigger{
  opacity:0;
}
 

 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}


/* change scroll offset because I have a sticky header now */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 130px;
}
/* adjust scroll offset for mobile header */
@media( max-width: 767px){
    html {
        scroll-padding-top: 80px;
    }  
}