/*
Theme Name: Xponent21 - Pro Child Theme 
Theme URI: https://theme.co/pro/
Author: Xponent21
Author URI: https://xponent21.com/
Description: Customizations for Xponent21 site made with ❤ by Xponent21.
Version: 1.0.0
Template: pro
*/

:root {
	--color-light: #ffffff;
	--color-purple: #7169D3;
	--color-blue: #40BCDD;
	--color-green: #9ECE61;
	--color-text: #09073c;

	--site-max-width: 1300px;
	--site-width: 92%;
	--site-default-padding: calc((100% - var(--site-width)) / 2);
	--site-default-gap: 4rem;
	--site-breakpoint: 980px;

	--color--blue: rgba(64, 188, 221, 1);
	--color--green: rgba(158, 206, 95, 1);
  	--color--purple: rgba(97, 88, 206, 1);
  
	--color--blue--opaque: rgba(64, 188, 221, 0.15);
	--color--green--opaque: rgba(158, 206, 95, 0.15);
	--color--purple--opaque: rgba(97, 88, 206, 0.15);  
}

.green {
	color: var(--color-green);
}

.purple {
	color: var(--color-purple);
}

.light {
	color: var(--color-light);
}

.gform-theme--api, .gform-theme--framework {
	--gf-ctrl-radius: 5rem;
}

.x-form-integration #gform_wrapper_1[data-form-index="0"].gform-theme,
.x-form-integration #gform_wrapper_2[data-form-index="0"].gform-theme,
.x-form-integration #gform_wrapper_3[data-form-index="0"].gform-theme,
.x-form-integration #gform_wrapper_4[data-form-index="0"].gform-theme {
	--gf-color-primary: var(--color-green);
	--gf-local-height: auto;
	--gf-radius: 5rem;
	--gf-ctrl-border-color: #E5E5E5;
	--gf-color-in-ctrl-contrast: var(--color-purple);
	--gf-color-in-ctrl: var(--color-light);
	--gf-local-bg-color:  var(--color-purple);
}

.x-form-integration .gform-theme--api, 
.x-form-integration .gform-theme--framework {
	--gf-ctrl-radius-max-lg: 2rem;
	--gf-ctrl-radius: 5rem;
	--gf-radius: 2rem;
	--gf-ctrl-btn-radius: 2rem;
	--gf-ctrl-size-md: 50px;
	--gf-form-gap-y: 1.5rem;
	--gf-ctrl-border-width: 3px;
	--gf-padding-x: 1.25rem;
	--gf-ctrl-shadow: inset 2px 2px 8px rgb(0 0 0 / 15%);
	--gf-ctrl-border-color: #E5E5E5;
	--gf-ctrl-btn-bg-color-primary: var(--color-green);
	--gf-local-bg-color: var(--color-purple);
	--gf-ctrl-btn-bg-color-ctrl: var(--color-purple);
	--gf-ctrl-btn-bg-color-hover-ctrl: var(--color-green);
}

.x-form-integration select, .x-form-integration textarea, .x-form-integration input[type=text], .x-form-integration input[type=password], 
.x-form-integration input[type=datetime], .x-form-integration input[type=datetime-local], 
.x-form-integration input[type=date], .x-form-integration input[type=month], .x-form-integration input[type=time], 
.x-form-integration input[type=week], .x-form-integration input[type=number], .x-form-integration input[type=email], 
.x-form-integration input[type=url], .x-form-integration input[type=search], .x-form-integration input[type=tel], 
.x-form-integration input[type=color], .x-form-integration .uneditable-input {
	height: auto;
	border: 4px solid #E5E5E5;
	--gf-ctrl-border-color: #E5E5E5;
}

.gform-footer button.gform_button {
	padding: 0 0.2rem 0 1.2rem !important;
}

.gform-footer button.gform_button .submit-icon {
	width: 2rem;
    height: 2rem;
    background-color: #fff;
    border-radius: 50%;
    margin-left: 0.5rem;
	display: flex;
    justify-content: center;
}

.gform-footer button.gform_button .submit-icon svg {
	width: 12px;
    transform: rotate(-45deg);
	fill: var(--color-green);
}

.gform-footer button.gform_button:hover .submit-icon svg {
	fill: rgb(0, 26, 179);
}

.x-col.box-shadow,
.x-row.box-shadow,
.box-shadow {
 box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.05),
    0 8px 16px rgba(0, 0, 0, 0.08);
}

.border-radius {
  border-radius: 1.5rem;
  overflow: hidden;
}

.x-crumbs-link {
    white-space: break-spaces;
}

@media (max-width: 767px) {
	.no-mobile-border-radius.border-radius {
		border-radius: 0;	
	}
}

.contained {
  width: 100%;
  padding-left: var(--site-default-padding);
  padding-right: var(--site-default-padding);
}

@media(min-width: 980px) {
  .contained {
    max-width: calc(var(--site-max-width) / 2);
  }
}

.contained.left {
  
}

.contained.right {
  
}

.purple-gradient {
	background: var(--color-purple);
	background: linear-gradient(90deg, rgb(113, 105, 211) 0%, rgba(121, 115, 199, 1) 58%, rgba(86, 80, 171, 1) 75%, rgba(69, 61, 170, 1) 100%);
}

.blue-gradient {
	background: var(--color-blue);
	background: linear-gradient(90deg, rgba(64, 188, 221, 1) 0%, rgba(54, 179, 214, 1) 58%, rgba(59, 167, 196, 1) 75%, rgba(37, 148, 178, 1) 100%);
}

.fullwidth-button .x-anchor {
	width: 100%;
}

.x-bar.x-bar-bottom {
	transition: all 1s ease-in-out;
	transform: translateY(10rem);
}

.x-bar.x-bar-bottom.active {
	transform: translateY(0);
}

.with-dots-bg {
	position: relative;
	overflow: hidden;
}

.with-dots-bg::before,
.with-dots-bg::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.with-dots-bg::before {
	background-image: url(framework/assets/images/dots.webp);
	background-size: contain;
	background-position: center center;
	z-index: -10;
}

.with-dots-bg::after {
	background-color: var(--color-light);
	opacity: 0.4;
	z-index: -1;
}

.global-headline span {
	font-weight: 400;
}

.x21-text-global div[aria-hidden="true"] p {
	margin-bottom: 0;
}

.card-info[data-direction="reverse"] .x-row-inner {
	flex-direction: row-reverse;
}

.card-info[data-direction="reverse"] .button-container {
	text-align: left;
}

.card-info .video {
	height: 100%;
}

.layout-image-overflow .card-info-video,
.card-info .card-info-video {
    width: 100%;
	height: 100%;
	object-fit: cover;
}

.layout-image-overflow video::-webkit-media-controls,
.card-info video::-webkit-media-controls {
	display: none;
}

.page .cs-content h2,
.page .cs-content h3,
.page .cs-content h4,
.page .cs-content h5,
.page .cs-content h6 {
	font-weight: 700;
}

.page .cs-content h2 {
	font-size: 1.7rem;
}

.page .cs-content h3 {
	font-size: 1.25rem;
}

.page .cs-content h4 {
    font-size: 1rem;
}

.x21-alternate-colors .x-col {

}

.x21-alternate-colors .x-col:nth-child(3n + 2) .title .x-text-content-text-primary {
	color: var(--color--green);		
}

.x21-alternate-colors .x-col:nth-child(3n + 2) .read-more .x-anchor {
	background-color: var(--color--green);	
}

.x21-alternate-colors .x-col:nth-child(3n + 2) .read-more .x-anchor .x-graphic-icon > svg {
	fill: var(--color-green);
}

.x21-alternate-colors .x-col:nth-child(3n + 3) .title .x-text-content-text-primary {
	color: var(--color--purple);		
}

.x21-alternate-colors .x-col:nth-child(3n + 3) .read-more .x-anchor {
	background-color: var(--color--purple);
}

.x21-alternate-colors .x-col:nth-child(3n + 3) .read-more .x-anchor .x-graphic-icon > svg {
	fill: var(--color-purple);
}

.case-study-slider .x-slide:nth-child(3n + 1) {

}

.case-study-slider .x-slide:nth-child(3n + 2) .title .x-text-content-text-primary {
	color: var(--color--blue);	
}

.case-study-slider .x-slide:nth-child(3n + 2) .x-text.highlight,
.case-study-slider .x-slide:nth-child(3n + 2) .x-anchor-button {
	background-color: var(--color--blue);
}

.case-study-slider .x-slide:nth-child(3n + 2) .x-anchor .x-graphic-icon > svg {
	fill: var(--color-blue);
}

.case-study-slider .x-slide:nth-child(3n + 3) .title .x-text-content-text-primary {
	color: var(--color--purple);
}

.case-study-slider .x-slide:nth-child(3n + 3) .x-text.highlight,
.case-study-slider .x-slide:nth-child(3n + 3) .x-anchor-button {
	background-color: var(--color--purple);
	color: var(--color-light);
}

.case-study-slider .x-slide:nth-child(3n + 3) .x-anchor .x-graphic-icon > svg {
	fill: var(--color-purple);
}

.x21-accordion.x-acc > .x-acc-item:nth-child(3n + 1) > .x-acc-header {

}

.x21-accordion.x-acc > .x-acc-item:nth-child(3n + 2) > .x-acc-header,
.x21-accordion.x-acc > .x-acc-item:nth-child(3n + 2) > .x-acc-header > .x-acc-header-content > .x-acc-header-indicator {
	border-left-color: var(--color-green);
	color: var(--color-green);
}

.x21-accordion.x-acc > .x-acc-item:nth-child(3n + 3) > .x-acc-header,
.x21-accordion.x-acc > .x-acc-item:nth-child(3n + 3) > .x-acc-header > .x-acc-header-content > .x-acc-header-indicator {
	border-left-color: var(--color-purple);
	color: var(--color-purple);
}

.testimonial-slider .x-slide:nth-child(3n + 1) {
	background-color: var(--color-green);
}

.testimonial-slider .x-slide:nth-child(3n + 2) {
	background-color: var(--color-purple);
}

.testimonial-slider .x-slide:nth-child(3n + 3) {
	background-color: var(--color-blue);
}

.x21-text-global .x-content a {
	font-weight: 700;
}

.x21-text-global ul {
    margin-left: 0;
    list-style: none;
}

.x21-text-global ul li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--color-text);
    border-radius: 50%;
    margin-right: 0.75rem;
    transform: translateY(-2px);
}

.x21-text-global ul.light li::before,
.x21-text-global ul li.light::before {
	background-color: var(--color-light);
}

.x21-text-global.align-center ol {
	display: flex;
    flex-direction: column;
    align-items: center;
}

.x21-text-global h2:not(.x-text-content-text-primary) {
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 1.5rem;
	font-size: 1.5rem;
}

.x21-has-animation .x-text {
	perspective: 500px;
}

.shape-global {
	opacity: 0.6;
	z-index: -1;
}

.shape-global:is(.x-effect-enter) {
	opacity: 0.6;
}

.shape-global.circle {
	border-radius: 50%;
	width: 5rem;
	height: 5rem;
}

.shape-global.rectangle {
	border-radius: 1rem;
	width: 140px;
	height: 100px;
}

@media (max-width: 766px) {
	.x-row.full-on-mobile,
	.full-on-mobile {
		transform: translateX(-4.5%);
		width: calc(100% + 9.5%);
	}

	.border-radius.no-border-radius-mobile {
		border-radius: 0;
	}

	.x-row.full-mobile,
	.x-container.max.x-row.card-info {
		width: 100%;
	}

	.box-shadow.no-box-shadow-mobile {
		box-shadow: none;
	}
}

.x21-video-bg .video-container {
	transform-origin: center;
}

.x21-video-bg.position-absolute {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.x21-hero {
  position: relative;
  min-height: 60vh;
  overflow: clip;
  background: #000;
}
.x21-hero .hero-content { position: relative; z-index: 2; }

/* Poster shows instantly and remains if motion/data-saver is on */
.ytbg-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Wrapper to “cover” the area with a 16:9 iframe */
.ytbg-wrap {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none; /* don’t steal clicks/scroll */
  opacity: 0;           /* fade in when iframe is ready */
  transition: opacity .3s ease;
}

/* Make the 16:9 iframe behave like background-size: cover */
.ytbg-iframe {
  position: absolute; top: 50%; left: 50%;
  /* 16:9 cover hack: height based on width, then ensure both fill */
  width: 100vw; height: calc(100vw * 9 / 16);
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

.x-row.same-height-cards .x-col .simple-card {
    height: 100%;
}

.simple-card .content ul {
    margin: 0;
    list-style: none;
    padding-left: 1rem;
}

.simple-card .content ul li {
    position: relative;
	margin-bottom: 0.25rem;
}

.simple-card .content ul li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-green);
    position: absolute;
    left: -1rem;
    top: 0.5rem;
}

.creative-projects-slider .x-slide .x-anchor {
	width: 100%;
}

.creative-projects-slider .x-slide .x-anchor .x-anchor-content {
	justify-content: space-between;
}

.team-photo {
    position: relative;
}

.team-photo::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 6px solid #40BCDD;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    opacity: 0.3;
}

.layout-image-overflow[data-reverse="on"] .x-row .x-row-inner {
	flex-direction: row-reverse;
}

.sc-container.desktop {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	background-color:rgba(54,95,98,.8);
	overflow: hidden;
}

/*
.sc-container.desktop .bg{
position:absolute;
width:100%;
height:430px;
background-repeat: no-repeat;
background-size:cover;
opacity:0;
visibility:hidden;
}
*/

.sc-container.tco-element-preview {
	height: auto;
}

.sc-container.desktop .sc-item{
	position:relative;
	display:block;
	width:0;
	height:100%;
	overflow:hidden;
	float: left;
}

.sc-container.desktop .sc-item:last-child{
	border-right:none;
}

.sc-container.desktop .sc-item:not(.active){
	cursor: pointer;
}

.sc-container.desktop .sc-item.is-open:not(.active):hover{
	background-color:rgba(0, 0, 0, 0.125);
}

.sc-container.desktop .sc-item.is-open.active{
	background-color:rgba(0, 0, 0, 0.125);
}

.sc-container.desktop .sc-item .label{
	display:block;
	position: absolute;
	white-space: nowrap;
	text-align: left;
	top: 5%;
	left: 50%;
	transform: rotate(90deg) translateX(0%) translateY(-50%);
	transform-origin: left top;
	color:#FFF;
	opacity:0;
	visibility:hidden;
}

.sc-container.desktop .sc-item .initStage {
	position:relative;
	width:100%;
	height:100%;
    display: flex;
    justify-content: center;
    transform: rotate(-90deg);
    transform-origin: center;
}

.sc-container.desktop .sc-item .initStage:hover{
	cursor: pointer;
}


.sc-container.desktop .sc-item:hover .initStage {

}

.sc-container.desktop .sc-item .initStage > .plus{
	position:absolute;
	display:block;
	width:40px;
	height:40px;
	left:50%;
	margin-left:-20px;
	bottom:20%;
	transition:.6s;
	color:#FFF;
	text-align:center;
}

.sc-container.desktop .sc-item .initStage > .plus:after{
	transition:.3s;
	content: url(../assets/plus.svg);
	display: block;
	text-align:center;
	margin:0 auto;
	width:40px!important;
	height:40px!important;
}

.sc-container.desktop .sc-item:hover .initStage > .plus{
	bottom:24%;
	transition:.6s;
}

.sc-container.desktop .sc-item:hover .initStage > .plus:after{
	transition:.3s;
	content: url(../assets/plus_inverted.svg);
	display: block;
	text-align:center;
	margin:0 auto;
	width:40px;
	height:40px;
}

.sc-container.desktop .sc-item .openStage {
	position:absolute;
	top: 0;
	opacity:0;
	visibility:hidden;
	width:100%;
	height:100%;
	margin:0;
	box-sizing: border-box;
}

.sc-container.desktop .sc-item .openStage > h2 {
	position:absolute;
	display: block;
	padding:0;
}

.sc-container.desktop .sc-item .openStage > .close{
	position:absolute;
	right:20px;
	top:35px;
	width:40px;
	height:40px;
	transform: rotate(45deg);
}

.sc-container.desktop .sc-item .openStage > .close:after{
	content:url(../assets/plus.svg);
	transform: rotate(45deg);
	width:40px;
	height:40px;
}

/* ----- ------ ----- ----- ----- */
/* ----- ------ MOBILE ---- ----- */


.sc-container.mobile{
	display:block;
	width:100%;
	height:auto;
	margin:0 0 0 0;
	padding:0;
}

.sc-container.mobile .sc-item{
	display:block;
	width:100%;
	height:auto;
}

.sc-container.mobile .sc-item .label{
	display:none;
}

.sc-container.mobile .sc-item .initStage{
	display:block;
	padding: 0;
}

.sc-container.mobile .sc-item .initStage h2:hover{
	background-color:rgba(255,255,255, .125);
}

.sc-container.mobile .sc-item .initStage .text{
	display:none;
}

.sc-container.mobile .sc-item .initStage h2{
	position: relative;
	width:100%;
	height:auto;
	margin:0;
	padding:1rem;
	z-index:1;
	cursor:pointer;
}

.sc-container.mobile .sc-item .initStage .plus{
	position:absolute;
	display:inline-block;
	width:40px;
	height:40px;
	right:15px;
	margin-top:-55px;
	color:#FFF;
	z-index:0;
	transform:rotate(0deg);
	transition: transform .2s;
}

.sc-container.mobile .sc-item .initStage .plus:after{
	content: url(../assets/plus.svg);
	width:40px;
	height:40px;
}

.sc-container.mobile .sc-item .openStage{
	opacity:1;
	height:0px;
	overflow:hidden;
	box-sizing: border-box;
}

.sc-container.mobile .sc-item:not(.active) .openStage {

}

.sc-container.mobile .sc-item .openStage h2{
	display:none;
	padding:0;
	margin:0;
	color:#FFF;
	font-weight:300;
	font-size:24px;
}

.sc-container.mobile .sc-item .openStage .text{
	display:block;
	padding:0;
	margin:0;
	color:#FFF;
	font-weight:300;
	font-size:16px;
	line-height:22px;
}

.sc-container.mobile .sc-item .openStage .text h3{
	display:block;
	padding:0;
	margin:0;
	color:#FFF;
	font-weight:300;
	font-size:18px;
	line-height:22px;
}

.sc-container.mobile .sc-item.active .openStage,
.sc-container.mobile .sc-item.active .initStage > h2{

}

.sc-container.mobile .sc-item.active .initStage .plus{
	content: url(../assets/plus.svg);
	width:40px;
	height:40px;
	transform:rotate(45deg);
	transition: transform 0.3s;
}

.timeline .events {
    margin: 0;
    list-style: none;
}

.timeline .event {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2rem;
  position: relative;
}

.timeline .event::before {
  content: '';
  width: 3px;
  height: 100%;
  background-color: #E6E6E6;
  
  position: absolute;
  left: calc(50% - 1.5px);
}

.timeline .event:first-child::before {
  height: 50%;
  top: calc(50% - 0.5rem);
}

.timeline .event:last-child::before {
  height: 50%;
  top: -1rem;
}

.timeline .event .separator {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color--green);
	display: block;
  position: relative;
  z-index: 99;
}

.timeline .event:nth-child(2n) {
  flex-direction: row-reverse;
}

.timeline .event span {
  color: var(--color--green);
}

.timeline .event:nth-child(2n+1) span:first-child {
  text-align: right;
}

.timeline .event:nth-child(3n+1) span {
  color: var(--color--blue);
}

.timeline .event:nth-child(3n+1) .separator {
  background-color: var(--color--blue);
}

.timeline .event:nth-child(3n+1) span.event-details {
  background-color: var(--color--blue--opaque);
}

.timeline .event:nth-child(3n) span {
	color: var(--color--purple);
}

.timeline .event:nth-child(3n) .separator {
	background-color: var(--color--purple);
}

.timeline .event:nth-child(3n) span.event-details {
  background-color: var(--color--purple--opaque);
}

.timeline .date,
.timeline .event-details {
  flex-basis: calc(50% - 40px);
}

.timeline .event-details {
  padding: 0.75rem 1.5rem;
  background-color: var(--color--green--opaque);
}

.timeline .event-details em {
  font-style: normal;
  text-decoration: underline
}

.single .x-the-content .wp-block-heading {
  font-weight: 700;
  color: var(--color--purple);
  letter-spacing: 0;
}

.single .x-the-content h2.wp-block-heading {
  font-size: 1.5rem;
}

.single .x-the-content h3.wp-block-heading {
  font-size: 1.25rem;
}

.facetwp-pager {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.facetwp-pager .facetwp-page {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
}

.facetwp-pager .facetwp-page:not(.prev,.next) {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--color-green);
    color: var(--color-light);
    transition: all 0.5s ease-in;
}

.facetwp-pager .facetwp-page.active,
.facetwp-pager .facetwp-page:not(.prev,.next):hover {
    background-color: var(--color-purple);
}

.facetwp-facet input.facetwp-search {
    height: auto;
    font-size: 1rem;
    padding: 1rem 2rem 1rem 1rem;
    border-radius: 0;
}

.facetwp-facet .facetwp-icon {
    width: 2.25rem;
}

.facetwp-facet .fs-label-wrap .fs-label {
	padding: 1rem 2rem 1rem 1rem;
}

.facetwp-facet .fs-arrow {
    right: 1rem;
}

.facetwp-facet .fs-wrap {
	width: 320px;
}

.popover h3.popover-title {
	font-size: 0.95rem;
    color: var(--color-text);
}

.popover .popover-content {
	font-style: normal;
    color: rgb(92,92,92);
    font-size: 0.75rem;
}

.has-definition {
    position: relative;
    display: inline-block;
}

.has-definition::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    border-bottom: 3px dotted #a7a0a0;
    position: absolute;
    bottom: 0;
    transition: all 0.3s ease-in;
}

.has-definition:hover::after {
    border-color: #8cc63f;
}

.cky-notice-btn-wrapper .cky-btn {
	border-radius: 5rem;
}