/*
 Theme Name:   Bricks Child Theme Draco
 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
*/



/*GLOBARS/*/
body{overflow-x:hidden!important;}
html body{overflow:unset;}
*,*:focus,*:hover{
  outline:none!important; /***Remove outline in Chrome/*/
  -webkit-tap-highlight-color: transparent;
} 

/* Apply to all elements */
*:focus {
outline: none;
}

/* Apply to specific elements */
button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
-webkit-tap-highlight-color: transparent;
}

mark {
  background: transparent;color:#39F3DC;
   background-image: linear-gradient(351deg,#139f8e 23%,#39F3DC 87%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

h1,h2,h3,h4,h5,h6 {
overflow-wrap: normal;
word-break: keep-all;
-moz-hyphens:none;
-ms-hyphens:none;
-webkit-hyphens: none;
hyphens:none
}

/* ==========================================================================
Custom Scrollbars
 ========================================================================== */

/* width */
::-webkit-scrollbar {
width: 15px;
}

/* Track */
::-webkit-scrollbar-track {

border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #666766;
border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #ddd; 
width:0;
}

section{padding:calc(4.8rem + (4.2 * ((100vw - 32rem)/104.6))) calc(2rem + (4 * ((100vw - 32rem)/104.6)))}


/****HEADER AREA*************/
#headercontainer .brxe-toggle .brxa-inner, #headercontainer .brxe-toggle .brxa-inner:after, #headercontainer .brxe-toggle .brxa-inner:before{

  height:2px;
}


div#searchWrapper {display:flex;justify-content:end;}
div.asp_w.asp_r .results .item{border:0!important;}

#headercontainer .probox{padding-left:1rem}


.teal-wrap{ aspect-ratio: 1 / 1;justify-content:center;align-items:center;
        display:flex;}




.body.no-scroll {
  overflow: hidden; 
  height: 100%; 
}


.services-arrows {
position: relative;
display: inline-block;
}

.services-arrows:before {
content: ''; /* No content, just the line */
position: absolute;
width: 0; /* Start with width 0 */
height: 2px; /* Line height */
bottom: 0; /* Position at the bottom of the element */
left: 0; /* Start from the left */
background-color: #39f3dc; /* Line color */
transition: width 0.3s ease; /* Smooth transition */
}

.services-arrows:hover:before {
width: 100%; /* Full width on hover */
}


@keyframes rotate-chevron {
from {
  transform: rotate(0deg);
}
to {
  transform: rotate(180deg);
}
}

ul#postSidebar ul {list-style:none;margin:0;padding:0;}

ul#postSidebar ul li{padding-bottom:1rem;}

ul#postSidebar ul li a:hover{color:#39F3DC}


/*FORMS AND BUTTONS/***/
.bricks-button[class*="primary"].bricks-button[class*="primary"] {
   border-radius:50px;
   transition: all 0.3s;
   position: relative;
   overflow: hidden;
   z-index: 1;
}
.bricks-button[class*="primary"].bricks-button[class*="primary"]:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;

   border-radius: 10rem;
   z-index: -2;
}



a.bricks-button.sm.bricks-background-dark {border-radius:5px;background:#222;padding:10px;}



.bricks-mobile-menu > li > a {
  width: 100%;
}
/*******CASE STUDIES/*************/
.styled summary::-webkit-details-marker {
display: none;
}
.styled summary {
list-style: none;
padding: 1em;
cursor: default;
background: #fff;
padding-right: 1.5em;
position: relative;
pointer:cursor;
font-weight:bolder;
color:#fff;
text-transform:uppercase;
}

.styled summary {
background:transparent;
border:0;

}
summary h3 {display:inline-block}


.styled summary::after {
cursor:pointer;
content: '';
border-right: 4px solid #39f3dc;
border-bottom: 4px solid #39f3dc;
position: absolute;
right: 0.75em;
height: 0.75em;
width: 0.75em;
transform: rotate(45deg) translatey(-0.1em);
transition: transform 0.3s ease; /* Added transition for smooth animation */
}

.styled summary:focus {
outline: 2px solid;
outline-offset: 1px;
}
details[open].styled > summary::after {
transform: rotate(-135deg) translatey(-0.3em);
}

details {
margin: 1em 0;
}

details div {
padding: 1em;
border: 0;
border-top: 0;
background:transparent;
}


.deliverables {
  width: 100%;
  border-bottom: 2px solid #121D1F;}


.colomat-hover{text-decoration:none;color:#39F3DC;}

.colour-palettes {
  display: flex;
  padding: 4rem 0;
  margin: 0;
  list-style: none;
justify-content:center;
column-gap:1rem;
row-gap:1rem;
flex-wrap:wrap;
}

.colour-palettes li {
  border-right: 1px solid #041845;
  padding: 1rem;
  color: #fff;
  text-transform: uppercase;
  background: #123456;
  min-width: 15rem;
  min-height:10rem;

  
}




/*NESTED ACCORDION STYLING /*/

.brxe-accordion-nested .accordion-title-wrapper:focus {
outline: none;
}

.brxe-accordion-nested .accordion-title-wrapper:before{font-family:FontAwesome;}


.accordion-title-wrapper h5{max-width:90%;}

.brx-open i.brxe-icon.ion-ios-arrow-forward {
font-family:FontAwesome;
  transition: all 0.5s ease-out;
  transform: rotate(270deg);
}
.accordion-title-wrapper .brxe-heading{width:95%;}


#brx-content .accordion-title-wrapper{align-items:start;}

#menuTarget .menu-item-has-children.active .sub-menu {
  pointer-events: auto;
}

/* Also target Bricks' positioned class when open */
.brx-submenu-positioned {
  pointer-events: none;
}

.menu-item-has-children.active .brx-submenu-positioned,
.brx-open .brx-submenu-positioned {
  pointer-events: auto;
}

/* Fix: mobile submenu links unclickable */
.brx-submenu-positioned,
.brx-submenu-positioned li,
.brx-submenu-positioned a,
.sub-menu,
.sub-menu li,
.sub-menu a {
  pointer-events: auto !important;
}


.brxe-post-taxonomy{flex-wrap:wrap;justify-content:center;}

#brx-content #heroText, #brx-content #hero-section, #brx-content #brxe-nxmmqq{padding-top: calc(100px + 8rem);
padding-bottom: 8rem;z-index:3}

i.brxe-icon.ion-ios-arrow-forward {
  transition: all 0.2s ease-out;
  transform: rotate(90deg)}



/*FOOOTER AREA /*/

#articlesWrap img{
height: 300px; /* Adjust the height to your preferred size */
object-fit: cover;
max-width: 100%;
 
}

#footerContainer{position:relative;}

#footerContainer::before {
  z-index:-1;
content: "";
position: absolute;
top:-10px;
left: 0;
width: 100%;
height: 100%;
background-color: #231F20;
transform: skewY(-1deg);

}

#go-top{display:none;}

/***************ARTICLES************************/*

.single-post h2{color:#3bf3d9;padding:var(--space-m) 0;}
.single-post h3{padding-bottom:var(--space-m);}

#brxe-tjnzbo {
position: sticky;
top: var(--space-4xl);
height: auto; /* Let the height adapt to content */
max-height: calc(100vh - var(--space-4xl)); /* Limit sidebar height to the viewport */
flex-basis: 20%;
background-color: var(--bricks-color-ryfewz);
padding-top: var(--space-s);
padding-right: var(--space-s);
padding-bottom: var(--space-s);
padding-left: var(--space-s);
border-radius: 5px;
overflow-y: auto; /* Enable vertical scrolling if content exceeds height */


}



.circle {
fill: rgba(57, 243, 220);
stroke: #fff;
stroke-width: 2;
animation: fade-in-up 1s ease-in-out forwards;
}

.box {
stroke-width: 2;
opacity: 0;
animation: fade-in-up 1s ease-in-out forwards;
animation-delay: 0.2s;
}

.number {
fill: #000;
font-family: sans-serif;
font-size: 24px;
text-anchor: middle;
dominant-baseline: middle;
animation: fade-in-up 1s ease-in-out forwards;
animation-delay: 0.4s;
}

.title {
fill: #fff;
font-size: 18px;
}

.line{stroke:#fff;stroke-width:4px;}




/*/FORM FIELDS /****/


.is-search-submit{text-align:center;}

.map-wrapper{opacity:1.0;animation:illuminate 2.5s 1;}

@keyframes illuminate {
0% {
opacity:0.1
}
100% {
opacity:1.0;
}
}

.pricing-table-title {margin-bottom:15px;background:#222;padding:5px 15px;border-radius:4px;}

.pricing-table:last-child .pricing-table-price-wrapper:before {content:'From';position:absolute;top:-40px;color:#fff;}


#bsf_rt_marker p{line-height:1.5em;font-size:18px;}

#bsf_rt_marker h2, #bsf_rt_marker h3, #bsf_rt_marker h4{padding:20px 0;}


#bsf_rt_marker h2:after, #bsf_rt_marker h3:after, #bsf_rt_marker h4:after{content:'';padding-top:10px;border-bottom:4px solid #39F3DC;width:10%;display:block;}

span.bsf-rt-reading-time{font-size:2.3rem;}

span.bsf-rt-reading-time:before {color:#39F3DC;content:'\f017';font-family:FontAwesome;}

#hero-section::before{content:'';background:rgba(10,23,25,0.9);position:absolute;top:0;bottom:0;left:0;right:0;height:100%;}

.post-template-default #hero-section::before{background:rgba(10,23,25,0.9);}

/*MEDIA QUERIES /************************/



@media only screen and (max-width:760px){

.evo-headline--style-highlight svg{padding-left:4px;}

#footercontainer ul {
                 align-items:center;
}


#brx-content h3.evo-headline { line-height:1.5;}



}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {

#brx-content #brxe-nxmmqq, #brx-content #hero-section, #brx-content #heroText{padding:45rem 5rem ;}
  
}



/*ANIMATED TEXT /*/


.typewriter-wrap{
display:inline-block;
width:70%;
  background:var(--protos-secondary-d-2);padding:20px;border-radius:100px;
}

.typewriter-wrap .typewriter {

/*This part is important for centering*/
display: inline-block;
place-items: left;

}

.typewriter-wrap .typing-text {
width: 21ch;
color:#fff;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid #fff;
font-family: monospace;
font-size: 2em;
}

@keyframes typing {
from {
  width: 0
}
}
  
@keyframes blink {
50% {
  border-color: transparent
}
}
.typewriter-wrap{padding-left:30px;display:flex;align-items:center;}

.typewriter-wrap:before{content: "\f4a5";font-family: 'Ionicons';font-size:2rem;padding-right:20px;color:#777;}




.animated-process .processCircles {
width:100%;
position: relative!important;
animation-name: circleGrow;
animation-duration: 1s;
animation-fill-mode: forwards;
  background-image: linear-gradient(351deg,#2FBAA9 23%,#39f3dc 87%);

border: 4px solid var(--bricks-color-rtheko);
border-radius: 50%;
flex-direction: row;
justify-content: center;
align-items: center;
color: var(--bricks-color-eewcdo);
font-size: 2rem;
font-family: "Ubuntu";
font-weight: 700;
display: flex;
z-index: 1;
aspect-ratio: 1 / 1;
margin-bottom: 20px; /* Adjust the spacing between circles as needed */
}

@keyframes circleGrow {
 0% {
  transform: scale(0);
}

100% {
  transform: scale(1);
}
}

.animated-process .process-lines{position:relative;}

.animated-process .process-lines:not(:first-child)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: calc(100% + 20px);
  /* Adjust the line height to match the spacing */
  background-color: white;
  left: 50%;
  top: calc(50% + 10px);
  /* Start the line at the vertical center of the circle */
  transform: translate(-50%, -100%);
  z-index: -1;
}
.animated-process .process-lines:first-child::before {
  display: none;
  /* Hide the line before the first circle */   
}

.animated-process .process-lines:last-child::before {
  height: calc(50% + 10px);
  /* Adjust the line height to match the spacing */
  top: -10px;
  /* Position the line above the last circle */
  z-index: -1;
}

.highlight{color:#39F3DC;}
.marked{background-color:#39F3DC;color:#000;padding:1rem 1.5rem;}

.highlight.gradient {
  background-image: linear-gradient(351deg,#2FBAA9 23%,#39F3DC 87%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display:inline
}

span.highlight.animatedHightlight {word-break: keep-all; white-space: nowrap}

div#brxe-gnjunv {display:inline-block;width:auto;}

.handwrittingwrap {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}

.handwrittingline {
position: relative;
z-index: 2;
overflow: hidden;
backface-visibility: hidden;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
margin-top: 10px; /* Adjust the margin as needed */
}

.handwrittingline::before,
.handwrittingline::after {
pointer-events: none;
backface-visibility: hidden;
font-smoothing: antialiased;
}
.handwrittingline span{display:block;padding-bottom:10px;}

.handwrittingline svg.writinglink {
position: absolute;
top: 100%;
left: 0;
z-index:-1;
overflow: hidden;
margin: 0;
width: 100%;
height: 20px;
animation: line-animation 500ms linear 1;
transform: translateY(-90%);
fill: none;
stroke: #39F3DC;
stroke-width: 5;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}

@keyframes line-animation {
0% {
  width:0;
}
100% {
  width:100%;
}
}



.animatedHightlight{position:relative;
padding: 0 5px;z-index:99}

.animatedHightlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
background:#39f3dc;
  animation: highlightAnimation 2s forwards;
  z-index: -1;

margin-left: -2px;
margin-right: -2px;
position: absolute;

transform: rotate(2deg);
top: -1px;
left: -1px;
border-radius: 15% 25% 20% 24%;

}
.animatedHightlight {
  color: white; /* Set initial text color to white */
  animation: colorAnimation 2s forwards
}

@keyframes highlightAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

@keyframes colorAnimation {
  0% {
    color: white;
  }
  100% {
    color: black;
  }
}


.evo-headline--style-highlight svg {
position: absolute;
top: 50%;
left: 50%;
width: calc(100% + 20px);
height: calc(100% + 20px);
transform: translate(-50%,-50%);
overflow: visible;
}

.evo-headline--style-highlight svg .evo-svg-path {
stroke: #39F3DC;
stroke-width: 9;
fill: none;
opacity: 0;
stroke-dasharray: 0 1500;
transition: .3s;
}

.evo-headline svg .evo-svg-path {
animation: evo-headline-dash 1.2s forwards;
animation-delay:1500ms;
}

@keyframes evo-headline-dash {
0% {
  stroke-dasharray: 0 1500;
  opacity: 1;
}
to {
  stroke-dasharray: 1500 1500;
  opacity: 1;
}
}

.evo-headline-dynamic-wrapper {
display: inline-block;
position: relative;
margin-right:5px;
}

.hit-mark {
opacity:0.1;
animation: opacityAnimation 10s ease forwards; /* Opacity animation */
animation-delay:500ms;
}

@keyframes opacityAnimation {
from {
  opacity: 0.1; /* Starting opacity */
}
to {
  opacity: 1; /* Final opacity */
}


mark.highlightthis{
-webkit-animation: 1.5s highlightthis 1.5s 1 normal forwards;
        animation: 1.5s highlightthis 1.5s 1 normal forwards;
background-color: none;
background: linear-gradient(90deg, #7efff5 50%, rgba(255, 255, 255, 0) 50%);
background-size: 200% 100%;
background-position: 100% 0;
}

@-webkit-keyframes highlightthis {
to {
  background-position: 0 0;
}
}

@keyframes highlightthis {
to {
  background-position: 0 0;
}
}

.targetSpotLight:after {
width: 50%;
content:'';
max-width: 700px;
height: 100%;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
background-color: rgba(255, 255, 255, 0.2);
filter: blur(150px);
position: absolute;
top: -20%;
transition: 1s;
animation: glide 3s ease-in-out 1s infinite alternate, fade 1s linear forwards;
transform-origin: top;
}

@keyframes glide {
from {
  transform: rotateZ(1deg);
}
to {
  transform: rotateZ(-1deg);
}
}

@keyframes fade {
0% {
  opacity: 0.2;
}
100% {
  opacity: 1;
}
}