/*
 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
*/

html, body {
	overflow-x: hidden;
}

h2, h3, h4 {
	max-width: 1200px;
}

img {
	border-radius: 8px;
}

/*Image border exception*/

.full-width img{
	border-radius: 0px !important;
}

.no-scroll {
		overflow: hidden !important;
}

/*Menu - Remove menu item focus*/

/*Body No Scroll*/

body.no-scroll .header {
  background-color: var(--banana-slice); /* Choose your background color */
  transition: background-color 1s ease 0.4s;
}

/*Hamburger Menu*/

.hamburger svg {
	height: 72px;
	width: 72px;
}


.hamburger svg path {
  transition: transform 0.3s ease;
  transform-origin: center;
  transform-box: fill-box;
}

.hamburger.is-active svg path:nth-child(1) {
  transform: translateY(15px) rotate(45deg);
}


.hamburger.is-active svg path:nth-child(2) {
  transform: translateY(-5px) rotate(-45deg);
}

.menu-item a {
	-webkit-tap-highlight-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}


:root {
  --bg-1: #1F45C7;
  --bg-2: #645082;
  --bg-3: #283C3C;

  --text-1: #F0C4D9;
  --text-2: #F5F0E0;
  --text-3: #45C745;
}

.color-cycle-section {
  background-color: var(--bg-1);
  animation: sectionColorCycle 9s ease-in-out infinite;
}

.color-cycle-heading {
  color: var(--text-1);
  animation: headingColorCycle 9s ease-in-out infinite;
}

.color-cycle-svg path {
  fill: var(--text-1);
  animation: svgColorCycle 9s ease-in-out infinite;
}

.color-cycle-hamburger span::before,
.color-cycle-hamburger span::after,
.color-cycle-hamburger span {
  color: var(--text-1);
  animation: hamburgerColorCycle 9s ease-in-out infinite;
}

/* 1. Animate text color on the SVG directly so the timeline never breaks */
.color-cycle-hamburger svg {
  color: var(--text-1);
  animation: hamburgerColorCycle 9s ease-in-out infinite;
}

/* 2. Inherit the cycling color via currentColor */
.color-cycle-hamburger svg path {
  stroke: currentColor;
}

/* 3. Override currentColor on active state without stopping the SVG animation */
.color-cycle-hamburger.is-active svg {
  color: #283C3C !important;
}

.hide {
	visibility: hidden !important;
}

#logo path{
	fill: #283C3C !important;
}

@keyframes sectionColorCycle {
  0%, 22% {
    background-color: var(--bg-1);
  }
  33%, 55% {
    background-color: var(--bg-2);
  }
  66%, 88% {
    background-color: var(--bg-3);
  }
  100% {
    background-color: var(--bg-1);
  }
}

@keyframes headingColorCycle {
  0%, 22% {
    color: var(--text-1);
  }
  33%, 55% {
    color: var(--text-2);
  }
  66%, 88% {
    color: var(--text-3);
  }
  100% {
    color: var(--text-1);
  }
}

@keyframes hamburgerColorCycle {
  0%, 22% {
    color: var(--text-1);
  }
  33%, 55% {
    color: var(--text-2);
  }
  66%, 88% {
    color: var(--text-3);
  }
  100% {
    color: var(--text-1);
  }
}

@keyframes svgColorCycle {
  0%, 22% {
    fill: var(--text-1);
  }
  33%, 55% {
    fill: var(--text-2);
  }
  66%, 88% {
    fill: var(--text-3);
  }
  100% {
    fill: var(--text-1);
  }
}

/*Rounded Video Corners Safety*/

.player .vp-video-wrapper {
	border-radius: 12px !important;
}

/**********************************Portfolio********************************
 ***************************************************************************/

/*-----Portfolio Tags-----*/

.post-category-wrapper {
  display: flex;
  gap: 10px;
  row-gap: 17px;
  flex-wrap: wrap;
  list-style-type: none;
  padding-left: 0px;
}

.post-category-wrapper li a{
  border: 1px solid #777;
  border-radius: 10px;
  padding: 4px 16px;
  color: #777;
}

/*-----Next Post-----*/

.next-post {
  display: flex;
  gap: 30px;
}

.next-post-content {
	width: 66%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.next-post-image {
	width: 33%;
}

@media only screen and (max-width: 767px) {
  .next-post {
    flex-direction: column;
	align-items: flex-start;
  }
	
	.next-post img {
		width: 100%;
	}
	
	.next-post-image {
		width: 100%;
	}
	
	.next-post-content {
		width: 100%;
	}
}

.next-post img {
  aspect-ratio: 16 / 9;
  width: 400px;
  max-width: 100%;
 	object-fit: cover;
}

.next-post-button {
  background-color: transparent;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-decoration: underline;
    font-family: "scale-variable";
    font-size: 26px;
    transition: 0.3s;
    display: block;
	color: var(--dark-green);
	margin-top: 10px;
}

@media only screen and (max-width: 767px) {
	.next-post-button {
	  margin-top: 10px;
	}
}

/*Portfolio Page For Bricks Preview*/

.brxe-xaetaw {
	display: grid;
}

/*-----Portfolio Items-----*/

/* ==========================================================================
   Portfolio Row & Flex Base Setup
   ========================================================================== */

.portfolio-row {
  display: flex;
  gap: 100px;
  width: 100%;
}

.portfolio-row + .portfolio-row {
  margin-top: 100px;
}

.portfolio-items {
  display: flex;
  min-width: 0;
  flex-shrink: 1;
  flex-basis: 0%;
  transition: flex-grow 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   Base Ratios (Alternating 45% / 55% layout)
   ========================================================================== */

/* Odd Rows: Left 45%, Right 55% */
.portfolio-row:nth-child(odd) > .portfolio-items:nth-child(1) {
  flex-grow: 45;
}
.portfolio-row:nth-child(odd) > .portfolio-items:nth-child(2) {
  flex-grow: 50;
}

/* Even Rows: Left 55%, Right 45% */
.portfolio-row:nth-child(even) > .portfolio-items:nth-child(1) {
  flex-grow: 50;
}
.portfolio-row:nth-child(even) > .portfolio-items:nth-child(2) {
  flex-grow: 45;
}

/* ==========================================================================
   Hover Interactivity
   Directly forces the hovered card to 55 and its sibling to 45
   ========================================================================== */

/* Any hovered card immediately expands to 55% */
.portfolio-row > .portfolio-items:hover {
  flex-grow: 50 !important;
}

/* The un-hovered card in the same row drops to 45% */
.portfolio-row:has(.portfolio-items:hover) > .portfolio-items:not(:hover) {
  flex-grow: 45 !important;
}

/* ==========================================================================
   Portfolio Columns & Internal Wrapper Styling
   ========================================================================== */

/* Row 1, 3, 5... → second item alignment */
.portfolio-row:nth-child(odd) .portfolio-items:nth-child(2) {
  text-align: center;
  align-content: center;
}

.portfolio-row:nth-child(odd) .portfolio-items:nth-child(2) .portfolio-item-wrapper {
  width: 100%
  text-align: center;
  align-content: center;
}

/* Row 2, 4, 6... → first item alignment */
.portfolio-row:nth-child(even) .portfolio-items:nth-child(1) {
  text-align: center;
  align-content: center;
}

.portfolio-row:nth-child(even) .portfolio-items:nth-child(1) .portfolio-item-wrapper {
  width: 100%;
  text-align: center;
  align-content: center;
}


/*Accordion*/
/* 
.brxe-accordion-nested > div h3 {
	transition: 0.5s;
}

.brxe-accordion-nested > div.brx-open h3{
	font-size: 75px;
	line-height: 75px;
} */

.team-accordion .team-profile {
  width: 100%;
  max-width: 150px; /* Starting size */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: max-width 0.4s;
}

.team-accordion.brx-open .team-profile {
  max-width: 300px; /* Expanded size */
}

@media only screen and (max-width: 767px) {
	.team-accordion.brx-open .team-profile {
  	max-width: 100%; /* Expanded size */
	width: 100%;
	}
	
	.team-accordion.brx-open .accordion-icon {
	opacity: 0 !important;
	transition: 0.3s;
	}
}

.team-accordion .team-accordion-content {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-accordion.brx-open .team-accordion-content {
	max-height: 500px;
	opacity: 1;
	visibility: visible;
}

.moving-heading-section {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.moving-heading {
  display: inline-block;
  white-space: nowrap; /* Keeps heading on a single continuous line */
  font-size: clamp(4rem, 12vw, 12rem);
  will-change: transform;
}

@media only screen and (max-width: 767px) {
	.moving-heading {
		font-size: 20px;
	}
}

.moving-heading .word,
.moving-heading .char {
  display: inline-block;
}

/*Image Caption Styling*/

.bricks-image-caption {
	position: relative !important;
	background: none !important;
	text-align: left !important;
	color: black !important;
	padding: 10px 0px !important;
	font-size: 15px !important;
}

/*Ninja Forms Styling*/

.nf-form-fields-required {
	display: none !important;
}

.nf-error-msg {
	color: #645082 !important;
	font-size: 16px;
}
/* Placeholder styling */
.nf-field-element input::placeholder, 
.nf-field-element textarea::placeholder {
  color: #645082 !important;
}

/* Base bottom border for standard input wrappers */
.nf-field-element {
  border-bottom: 1px solid white;
}

/* Remove bottom border specifically from the submit button's parent wrapper */
.submit-container .nf-field-element,
.field-type-submit .nf-field-element {
  border-bottom: none !important;
}

/* Submit button styling */
.nf-field-element input[type="submit"] {
  border: none !important;
  border-bottom: 1px solid #645082 !important;
  font-size: 25px;
  font-family: "scale-variable";
  font-weight: 400;
  color: #645082;
  background-color: transparent;
  transition: 0.3s;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.nf-field-element input[type="submit"]:hover {
	color: #1F45C7 !important;
	border-color: #1F45C7 !important;
}

/*Recaptcha Stlying*/

.recaptcha-wrap .nf-field-element {
	border: none !important;
}


/* Remove all outline and box-shadow on focus for Ninja Forms */
.nf-form-cont input:focus,
.nf-form-cont textarea:focus,
.nf-form-cont select:focus {
  outline: none !important;
  box-shadow: none !important;
}

/*Portfolio Card*/

.portfolio-card img {
	transition: 0.3s;
}

.portfolio-card .card-video {
	transition: 0.3s;
}

.portfolio-card:hover img {
	transform: scale(1.05);
}

.portfolio-card:hover .card-video {
	transform: scale(1.05);
}

.portfolio-card:hover h3 {
	color: var(--that-blue);
}

/*Filter styling*/

root select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px; /* Prevents text from overlapping the new arrow */
}