/* ======================================================
	SERVICES SECTION
====================================================== */

.materialai-services-section,
main.materialai-page-main,
main.materialai-search-page{
	padding: 80px 20px;
}

.materialai-section-heading {
	margin-bottom: 50px;
}
.materialai-services-section .materialai-service-columns{
	gap: 20px 25px;
}
.is-layout-flex > :is(*, div) {
    margin: 0;
    max-width: 100%;
}

:is(div:has(.aipost-sidebar)) {
	flex:1 ;
}
/* ======================================================
	CARD
====================================================== */

.materialai-service-columns > .wp-block-column > .wp-block-group {
	position: relative;
	overflow: hidden;
	transition: 0.35s;
	box-shadow: 0 0 0 transparent;
}

.materialai-service-columns > .wp-block-column > .wp-block-group:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 45px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}

/* ======================================================
	ICON CIRCLE
====================================================== */

.materialai-service-icon-circle {
	width: 90px;
	height: 90px;
	border: 5px dashed rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.materialai-service-icon-circle img {
	max-width: 40px;
}

/* ======================================================
	DIVIDER
====================================================== */
.materialai-service-top{
	position: relative;
	justify-content: space-between;
}
.materialai-service-top .wp-block-column{
	flex-basis: 90px !important;
}
.materialai-service-top .wp-block-column .materialai-service-bg-icon{
	margin-inline-start:0px !important;
}
.materialai-service-top hr {
	width: 1px !important;
	height: 83px !important;
	background: rgba(255, 255, 255, 0.25);
	border: none;
	position: relative;
	margin: auto;
	overflow: visible;
	top: 0;
}
.materialai-service-top hr::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 42%, #ffffff);
}

/* ======================================================
	BG ICON
====================================================== */
.left-service-icon svg{
	opacity: 0.2;
	width: 90px!important;
	height: 90px!important;
	object-fit: contain;
}

/* ======================================================
	TITLE
====================================================== */

.materialai-service-columns h4{
	font-size: 22px;
	margin-bottom: 15px;
}
.materialai-service-columns p{
	margin-top: 0px;
	font-size: 14px;
}
/* ======================================================
	BUTTON
====================================================== */

.materialai-service-button .wp-block-button__link{
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	font-weight: 500;
	font-size: 20px;
	padding:10px 45px 10px 20px !important;
	border: 2px solid var(--wp--preset--color--primary);
	background: transparent;
	position: relative;
	overflow: hidden;
	transition: all 0.3s;
}
.materialai-service-button .wp-block-button__link::after{
	content: "";
	background: var(--wp--preset--color--primary);
	display: block;
	width: 50px;
	height: 50px;
	right: -1px;
	line-height: 50px;
	color: #000;
	position: absolute;
	border-radius:50%;
	top: -1px;
	transform:scale(0);
	transition: all 0.3s ease-in-out;
	z-index: 0;
}
.materialai-service-button .wp-block-button__link::before {
	content: "➜";
	display: block;
	width: 50px;
	height: 50px;
	right: 0px;
	line-height: 50px;
	color: #fff;
	font-size: 16px;
	position: absolute;
	border-radius: 50%;
	top:0px;
	transition: all 0.3s ease-in-out;
	z-index: 1;
}
.slider-1 .materialai-service-button {
	position: relative;
}
/* The pulsing ring */
.slider-1 .materialai-service-button::before, .slider-1 .materialai-service-button::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; 
  border-radius: 50px;
  outline: 1px solid #444444;
  animation: linePulse 1.8s infinite linear;
  pointer-events: none;
}
.slider-1 .materialai-service-button::after {
  animation-delay: .9s;
}
@keyframes linePulse {
  0% {
	outline-offset: 0;
    opacity: 0;
  }
  50% {
	outline-offset: 8px;
    opacity: 1; 
  }
  100% {
	outline-offset: 16px;
    opacity: 0; 
  }
}
.materialai-service-button .wp-block-button__link:hover,
.materialai-service-button .wp-block-button__link:focus{
	padding-right: 60px !important;
}
.materialai-service-button:hover .wp-block-button__link:after,
.materialai-service-button:focus .wp-block-button__link:after {
	transform:scale(1);
	z-index: -1;
}

/* ======================================================
	RESPONSIVE
====================================================== */

@media (max-width: 991px) {
	.materialai-services-section {
		padding: 80px 20px;
	}

	.materialai-service-columns {
		gap: 24px !important;
	}
}

@media (max-width: 781px) {
	.materialai-services-section {
		padding: 60px 20px;
	}

	.materialai-section-heading {
		margin-bottom: 40px;
	}

	.materialai-service-columns > .wp-block-column {
		margin-bottom: 24px;
	}
}

.ma-ai-badge-text {
	margin: 0;
	color: var(--wp--preset--color--light-color);
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
}

/*--------------------------------------------------------------
# Heading
--------------------------------------------------------------*/

.ma-ai-title {
	margin: 0;
	color: var(--wp--preset--color--light-color);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	max-width: 900px;
	margin-inline: auto;
}

/*--------------------------------------------------------------
# Feature Columns
--------------------------------------------------------------*/

.ma-ai-features {
	gap: 30px;
	align-items: stretch;
}
.ma-ai-card {
	padding: 25px 35px;
	background: var(--wp--preset--color--background);
	border-radius: 12px;
	box-shadow: 0 18px 50px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 63%, #000000) 16%, transparent);
	transition:
	transform 0.35s ease,
	box-shadow 0.35s ease;
}
.ma-ai-card .wp-block-image img {
	vertical-align: inherit;
}
.ma-ai-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 28px 70px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 63%, #000000) 22%, transparent);
}
.ma-ai-section .ma-ai-card .wp-block-icon{
	text-align: center;
}

/*--------------------------------------------------------------
# Card Typography
--------------------------------------------------------------*/

.ma-ai-card-title {
	margin: 0 0 14px;
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--secondary);
}

.ma-ai-card-desc {
	margin: 0;
	font-size: 17px;
	line-height: 1.8;
	color: var(--wp--preset--color--foreground);
	max-width: 270px;
	margin-inline: auto;
}

/* Tablet */
@media (max-width: 991px) {
	.ma-ai-features {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}

	.ma-ai-video-wrap {
		max-width: 100%;
	}

	.ma-ai-title {
		font-size: 42px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.ma-ai-section {
		padding: 70px 20px 100px;
	}

	.ma-ai-features {
		grid-template-columns: 1fr;
	}

	.ma-ai-title {
		font-size: 34px;
		line-height: 1.25;
	}

	.ma-ai-card {
		padding: 28px;
	}
	.ma-ai-badge {
		padding: 10px 20px;
	}

	.ma-ai-video {
		min-height: 280px !important;
	}
}

/* Play Button */

.ma-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	z-index: 2;
}
.ma-video-play::before,
.ma-video-play::after {
	content: "";
	position: absolute;
	inset: -12px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	animation: ripple 2s linear infinite;
}
.ma-video-play::after {
	animation-delay: 1s;
}

@keyframes ripple {
	from {
		transform: scale(0.8);
		opacity: 1;
	}

	to {
		transform: scale(1.6);
		opacity: 0;
	}
}
.ma-ai-video-wrap {
	margin-top: -150px;
	position: relative;
	z-index: 5;
}

.ma-ai-video {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.materialai-heading-second {
	position: relative;
	display: inline-block;
	padding-bottom: 35px;
}

.materialai-heading-second::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);
	width: 118px;
	height: 18px;
	background:
	radial-gradient(circle at center, var(--white) 0 9px, transparent 9px) left
	center/18px 18px no-repeat,
	radial-gradient(circle at center, var(--white) 0 9px, transparent 9px) right
	center/18px 18px no-repeat,
	linear-gradient(var(--wp--preset--color--secondary), var(--wp--preset--color--secondary)) center 10px/84px 2px no-repeat,
	linear-gradient(var(--white), var(--white)) center 8px/84px 6px no-repeat;
}

.materialai-heading-second::after {
	content: "";
	position: absolute;
	bottom: 4px;
	left: calc(50% - 42px);
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: maRunner 1.2s linear infinite alternate;
}
@keyframes maRunner {
	from {
		left: calc(50% - 42px);
	}
	to {
		left: calc(50% + 36px);
	}
}

/*==============================================================
AI FEATURES
==============================================================*/

.materialai-ai-layout {
	position: relative;
	margin-inline: auto;
	min-height: 790px;
	padding-block: 60px;
}

/*==============================================================
COLUMNS
==============================================================*/

.materialai-ai-left,
.materialai-ai-right {
	width: 330px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}

.materialai-ai-left {
	left: 0;
}

.materialai-ai-right {
	right: 0;
}

/*==============================================================
CENTER
==============================================================*/

.materialai-ai-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 430px;
	height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*==============================================================
FEATURE CARD
==============================================================*/

.materialai-feature-card {
	position: relative;

	background: linear-gradient(145deg, var(--wp--preset--color--secondary), color-mix(in srgb, var(--wp--preset--color--secondary) 66%, #000000));

	border-radius: 8px;

	padding: 20px 18px;

	min-height: 165px;

	overflow: hidden;

	border: 1px solid rgba(255, 255, 255, 0.08);

	transition:
	transform 0.35s ease,
	box-shadow 0.35s ease;

	z-index: 2;
}

/* Background AI Pattern */

.materialai-feature-card::before {
	content: "";
	position: absolute;
	right: -20px;
	top: 10px;
	width: 130px;
	height: 130px;

	opacity: 0.25;
}

.materialai-feature-card:hover {
	transform: translateY(-8px);
}

/* Icon */

.materialai-feature-card .wp-block-icon {
	margin:10px 0 18px 0 !important;
	position: relative;
	z-index: 2;
	width: 62px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	transition: 0.3s all;
}
.materialai-feature-card svg {
	width: 35px!important;
	height: 35px;
	transition: 0.3s all;
}
.materialai-feature-card:hover .wp-block-icon {
	background-color: var(--wp--preset--color--primary);
}
.materialai-feature-card:hover .wp-block-icon svg{
	filter: brightness(0) invert(1);
}
/* Heading */

.materialai-feature-card h4 {
	position: relative;

	z-index: 2;

	color: #fff;

	margin: 0 0 8px;

	font-weight: 700;

	font-size: 20px;
}

.materialai-feature-card p {
	position: relative;

	z-index: 2;

	color: #ddd;

	margin: 0;

	line-height: 1.6;

	font-size: 13px;
}

/*==============================================================
ORBIT
==============================================================*/

.materialai-orbit {
	position: relative;
	width: 430px;
	height: 620px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Outer Ring */

.materialai-orbit::before {
	content: "";
	position: absolute;
	width: 320px;
	height: 500px;
	border: 2px dotted #e3e4ebf7;
	border-radius: 50%;
	animation: materialaiRotate 20s linear infinite;
}

/* Inner Ring */

.materialai-orbit::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 465px;
	border: 2px dotted #e3e4ebf7;
	border-radius: 50%;
}

/*==============================================================
TOP AI POWERED
==============================================================*/

.materialai-orbit-top {
	position: absolute;
	top: -25px;
	text-align: center;
	z-index: 3;
	gap: 0;
}

.materialai-orbit-top svg {
	width: 40px;
	height: 40px;
	padding: 8px;
background-color: var(--wp--preset--color--primary);
	border-radius: 8px;
	animation: materialaiFloat 3s ease-in-out infinite;
	color: #fff!important;
}

.materialai-orbit-top p,
.materialai-orbit-bottom p {
	margin: 8px 0;
	font-size: 12px;
	font-weight: 600;
}

/*==============================================================
PRO BOX
==============================================================*/

.materialai-pro-box {
	position: absolute;
	width: 85px;
	height: 70px;
	border-radius:8px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	background: var(--wp--preset--color--primary);
}

.materialai-pro-box h3 {
	margin: 0;
	color: #fff;
	font-size:34px;
}

/* Connector Lines */

.materialai-pro-box::before,
.materialai-pro-box::after {
	content: "";
	position: absolute;
	top: 50%;
	border: 1px solid #e3e4ebf7;
	width: 275px;
}

.materialai-pro-box::before {
	right: 100%;
}

.materialai-pro-box::after {
	left: 100%;
}

/*==============================================================
BOTTOM
==============================================================*/

.materialai-orbit-bottom {
	position: absolute;
	bottom: -25px;
	text-align: center;
	gap: 0px;
}

.materialai-orbit-bottom svg {
	width: 40px;
	height: 40px;
	padding: 8px;
background-color: var(--wp--preset--color--primary);
	border-radius: 8px;
	animation: materialaiFloat 3s ease-in-out infinite;
	color: #fff!important;
}

/*==============================================================
DOTS
==============================================================*/

.materialai-orbit-top::after,
.materialai-orbit-bottom::before {
	content: "";

	position: absolute;
	left: 50%;

	width: 10px;

	height: 10px;

	background: var(--wp--preset--color--primary);

	border-radius: 50%;

	box-shadow: 0 0 0 6px color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
}

.materialai-orbit-top::after {
	bottom: -14px;
}

.materialai-orbit-bottom::before {
	top: -14px;
}

/*==============================================================
CONNECTORS LEFT RIGHT
==============================================================*/

.materialai-ai-left::after {
	content: "";
	position: absolute;
	right: -28px;
	top: 134px;
	height: 605px;
	width: 60px;
	border-radius: 10px;
	border-right: 2px solid #e3e4ebf7;
	border-top: 2px solid #e3e4ebf7;
	border-bottom: 2px solid #e3e4ebf7;
}

.materialai-ai-right::before {
	content: "";
	position: absolute;
	left:-28px;
	top:134px;
	height:605px;
	width:60px;
	border-radius:10px;
	border-left: 2px solid #e3e4ebf7;
	border-top: 2px solid #e3e4ebf7;
	border-bottom: 2px solid #e3e4ebf7;
}

/*==============================================================
RESPONSIVE
==============================================================*/

@media (max-width: 1100px) {
	.materialai-ai-layout {
		display: flex;
		flex-direction: column;
		gap: 20px;
		min-height: auto;
	}

	.materialai-ai-left,
	.materialai-ai-right,
	.materialai-ai-center {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		transform: none;
		width: 100%;
	}

	.materialai-ai-left,
	.materialai-ai-right {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.materialai-ai-center {
		order: 2;
	}

	.materialai-ai-left::after,
	.materialai-ai-right::before {
		display: none;
	}
}

@media (max-width: 600px) {
	.materialai-ai-left,
	.materialai-ai-right {
		grid-template-columns: 1fr;
	}

	.materialai-orbit {
		transform: scale(0.75);

		margin-inline: auto;
	}

	.materialai-feature-card h4 {
		font-size: 17px;
	}
}

.materialai-testimonial-section {
	position: relative;
	overflow: hidden;
	padding: 90px 20px;
	background: #fff;
}

.materialai-testimonial-section:after {
	right: -300px;
}
.materialai-testimonial-wrapper {
	max-width: 1100px;
	margin: auto;
	position: relative;
	min-height: 630px;
}
.materialai-testimonial-slider {
	position: relative;
	z-index: 5;
}
.materialai-testimonial-item {
	min-height: 560px;
}
.materialai-testimonial-content {
	max-width: 600px;
	margin: auto;
	text-align: center;
	padding-top: 200px;
}

.materialai-quote-icon {
	font-size: 100px;
	line-height: 0;
	color: var(--wp--preset--color--primary);
}
.materialai-rating {
	color: #EED729;
	font-size: 25px;
	letter-spacing: 2px;
}
.materialai-author-name {
	color: var(--wp--preset--color--primary);
	margin-top: 25px;
}
.floating-images {
	position: absolute;
	inset: 0;
	z-index: 10;
}

.floating-images .testimonial-avatar {
	position: absolute;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0.35;
	transform: scale(0.85);
	transition: 0.4s ease;
	cursor: pointer;
}

.floating-images img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.floating-images .avatar-0 {
	top: 70px;
	left: 10%;
}

.floating-images .avatar-1 {
	top: 70px;
	right: 10%;
}
.floating-images .avatar-2 {
	top: 240px;
	left: 0%;
}

.floating-images .avatar-3 {
	top: 240px;
	right: 0%;
}

.floating-images .avatar-4 {
	bottom: 90px;
	left: 10%;
}

.floating-images .avatar-5 {
	bottom: 90px;
	right: 10%;
}

.floating-images .active-avatar {
	opacity: 1;
	transform: scale(1.25);
}
.floating-images .active-avatar img {
	box-shadow: 0 0 35px color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
}
.materialai-testimonial-slider .materialai-testimonial-item .wp-block-image {
	display: none;
}
/* Editor: match the front end — the in-item avatar stays hidden.
   It appears only while selected (double-click its floating avatar,
   or pick it in the List View) so it stays easy to edit. */
   .editor-styles-wrapper
   .materialai-testimonial-slider
   .materialai-testimonial-item
   .wp-block-image.is-selected,
   .editor-styles-wrapper
   .materialai-testimonial-slider
   .materialai-testimonial-item
   .wp-block-image.has-child-selected {
   	display: block !important;
   }
   .floating-images {
   	pointer-events: none;
   }
   .floating-images .testimonial-avatar {
   	pointer-events: auto;
   }

   .materialai-review-navigation {
   	position: relative;
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	width: fit-content;
   	padding: 2px;
   	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, #ffffff);
   	margin: auto;
   	border-radius: 50px;
   }

   .materialai-slider-progress {
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	gap: 16px;
   	width: 100%;
   	height: 40px;
   	padding: 0 45px;
   }

   .progress-line {
   	width: 34px;
   	height: 2px;
   	background: color-mix(in srgb, var(--wp--preset--color--primary) 29%, #ffffff);
   	border-radius: 20px;
   }

   .progress-line.active {
   	background: var(--wp--preset--color--primary);
   }

   .materialai-nav-prev,
   .materialai-nav-next {
   	position: absolute;
   	top: 50%;
   	transform: translateY(-50%);
   	z-index: 10;
   }
   .materialai-nav-prev {
   	left: 5px;
   }
   .materialai-nav-next {
   	right: 5px;
   }
   .materialai-nav-prev p,
   .materialai-nav-next p {
   	width: 36px;
   	height: 36px;
   	margin: 0;
   	border-radius: 50%;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	color: #fff;
   	font-size: 14px;
   	cursor: pointer;
   	transition: all 0.3s;
   }
   .materialai-nav-prev p {
   	background: var(--wp--preset--color--primary);
   }
   .materialai-nav-next p {
   	background: var(--wp--preset--color--primary);
   }
   .materialai-nav-prev p svg,
.materialai-nav-next p svg {
	width: 18px;
	height: 18px;
	display: block;
}
.materialai-nav-prev p:hover,
   .materialai-nav-next p:hover {
   	transform: scale(1.08);
   	background: var(--wp--preset--color--secondary);
   }
/* 3d Slider */
.dx3d-slider-container {
	--dx3d-per-view: 5;
	--dx3d-gap: 20px;
	--dx3d-edge: 1%;
	perspective: 1500px;
	perspective-origin: 50% 50%;
	cursor: grab;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--dx3d-edge);
	box-sizing: border-box;
	overflow: hidden;
	/* overflow clips at the padding box, so the 6th/7th cards would peek
	   into the side padding; clip at the content box instead. */
	clip-path: inset(0 var(--dx3d-edge));
}
.dx3d-slider-container.dragging {
	cursor: grabbing;
}
.dx3d-slider-track {
	display: flex;
	align-items: center;
	justify-content: center;
	transform-style: preserve-3d;
	flex-wrap: nowrap;
	gap: var(--dx3d-gap);
	margin: 0;
	/* even card counts: script shifts by half a step so the middle card sits centred */
	transform: translateX(var(--dx3d-shift, 0px));
}
.dx3d-card {
	flex-shrink: 0;
	/* exactly --dx3d-per-view cards fill the container width */
	width: calc((100% - (var(--dx3d-per-view) - 1) * var(--dx3d-gap)) / var(--dx3d-per-view));
	aspect-ratio: 7 / 12; /* no-JS fallback; script sets the curved heights inline */
	background: #fff;
	overflow: hidden;
	transform-style: preserve-3d;
	position: relative;
	cursor: pointer;
}
.editor-styles-wrapper .dx3d-card {
	flex-shrink: 1 !important;
	overflow: visible;
}
.dx3d-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.15),
		transparent 30%,
		transparent 70%,
		rgba(0, 0, 0, 0.15)
	);
	transform: translateZ(-8px);
	pointer-events: none;
	z-index: 3;
}
.dx3d-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #e0e0e0;
	transform: translateZ(-16px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}
.dx3d-card .dx3d-card-img,
.dx3d-card .dx3d-card-img img {
	width: 100%;
	height: 100%;
	margin: 0;
}
.dx3d-card .dx3d-card-img img {
	object-fit: cover;
	object-position: center top;
	display: block;
	pointer-events: none;
	height: 100%;
	position: relative;
	z-index: 1;
}
.dx3d-hover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
}
.dx3d-card:hover .dx3d-hover-overlay {
	opacity: 1;
}
.dx3d-hover-overlay span {
	color: #fff;
	font-size: 16px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-align: center;
	padding: 0 10px;
}
.dx3d-ready .dx3d-card-title,
.dx3d-ready .dx3d-card-desc {
	display: none;
}
.dx3d-card-title {
	font-size: 15px;
	margin: 8px;
	font-weight: 600;
}
.dx3d-card-desc {
	font-size: 12px;
	margin: 0 8px 8px;
	color: #555;
}

.dx3d-slider-track.blurred .dx3d-card:not(.expanded) {
	filter: blur(8px);
	transition: filter 0.6s ease;
}
.dx3d-card.expanded {
	z-index: 1000 !important;
}
.dx3d-card-info {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
	z-index: 1001;
	max-width: 600px;
	padding: 1.5rem;
	background: var(--wp--preset--color--primary);
	box-shadow: 4px 3px 18px 4px #b7b7b721;
	min-width: min(375px, 90vw);
}
.dx3d-card-info.visible {
	opacity: 1;
	pointer-events: all;
}
.dx3d-card-info h2 {
	font-size: 36px;
	font-weight: 900;
	color: var(--white);
	margin: 0 0 16px;
}
.dx3d-card-info p {
	font-size: 18px;
	color: var(--white);
	line-height: 1.7;
	margin: 0;
}

.dx3d-close-btn {
	position: fixed;
	top: 40px;
	right: 40px;
	width: 60px;
	height: 60px;
	background: #fff;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1002;
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.dx3d-close-btn.visible {
	opacity: 1;
	pointer-events: all;
}
.dx3d-close-btn:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
	transform: rotate(90deg) scale(1.1);
}
.dx3d-close-btn svg {
	width: 24px;
	height: 24px;
}

/*==================================================
=            AI TEAM
==================================================*/

.ai-team-section {
	max-width: 1100px;
	margin: 0 auto;
	padding: 60px 20px;
	position: relative;
	overflow: hidden;
	background:
	radial-gradient(
		circle at 100% 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 6%, transparent),
		transparent 35%
	),
	radial-gradient(
		circle at 0% 100%,
		color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent),
		transparent 40%
	);
}

/*-------------------------
	Heading
--------------------------*/

.ai-team-eyebrow {
	display: table;
	margin: 0 auto 16px;
	padding: 8px 24px;
	border-radius: 40px;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--primary)
	);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ai-team-heading-frame {
	position: relative;
	width: max-content;
	margin: 0 auto 42px;
	padding: 18px 34px;
	border: 2px dashed color-mix(in srgb, var(--wp--preset--color--primary) 35%, #ffffff);
}

.ai-team-heading-frame::before,
.ai-team-heading-frame::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
}

.ai-team-heading-frame::before {
	left: -5px;
	top: -5px;
}

.ai-team-heading-frame::after {
	right: -5px;
	bottom: -5px;
}

.ai-team-heading {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
}

/*-------------------------
		Main Layout
--------------------------*/

.ai-team-grid {
	display: grid;
	grid-template-columns:repeat(3,1fr);
	gap: 20px;
	align-items: stretch;
}

/*-------------------------
		Left Column
--------------------------*/

.ai-team-list {
	height: 430px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.ai-team-list > * {
	margin: 0 !important;
}

.ai-team-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 10px;
	background: var(--wp--preset--color--secondary);
	border-radius: 8px;
	cursor: pointer;
	transition: 0.35s;
}

.ai-team-item:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 93%, #ffffff);
}

.ai-team-item.is-active {
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--primary),
		var(--wp--preset--color--primary)
	);
}

.ai-team-item-img {
	flex-shrink: 0;
}

.ai-team-item-img img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.ai-team-item-name {
	margin: 0 0 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

.ai-team-item-role {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

/*-------------------------
Editor only
--------------------------*/

.ai-team-item {
	flex-wrap: wrap !important;
}

.ai-team-item-data {
	width: 100%;
	margin-top: 14px;
	padding: 16px;
	border: 1px dashed color-mix(in srgb, var(--wp--preset--color--primary) 37%, #ffffff);
	border-radius: 8px;
	background: #fff;
}

.ai-team-item-data::before {
	content: "Hidden on frontend (editable content)";
	display: block;
	margin-bottom: 12px;
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
}

.ai-team-item-data p,
.ai-team-item-data h1,
.ai-team-item-data h2,
.ai-team-item-data h3,
.ai-team-item-data h4,
.ai-team-item-data h5,
.ai-team-item-data h6 {
	color: var(--wp--preset--color--secondary) !important;
}

.ai-team-item-photo {
	max-width: 220px;
}

.ai-team-item-photo img {
	width: 100%;
	border-radius: 8px;
}

/*==================================================
=        AI TEAM - PART 2 (IMAGE & PROFILE)
==================================================*/

/*-------------------------
	Center Image
--------------------------*/

.ai-team-image-col {
	position: relative;
	width: 100%;
	height: 460px;
	overflow: hidden;
	border-radius: 10px;
	align-self: start;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #ffffff);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

.ai-team-hero-img {
	width: 100%;
	height: 100%;
	margin: 0 !important;
}

.ai-team-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: 0.35s ease;
}

/* Hover */

.ai-team-image-col:hover img {
	transform: scale(1.03);
}

/*-------------------------
Experience Badge
--------------------------*/

.ai-team-exp-badge {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 14px 22px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	border: 3px solid #fff;
	border-radius: 0;
	border-top-right-radius: 16px;
	border-bottom-left-radius: 10px;
	z-index: 20;
	margin: 0;
}

/*-------------------------
Right Profile Card
--------------------------*/

.ai-team-profile-card {
	width: 100%;
	height: 460px;
	display: flex;
	flex-direction: column;
	align-self: start;
	padding: 24px;
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, #ffffff);
	border-radius: 10px;
	box-shadow: 0 15px 35px color-mix(in srgb, var(--wp--preset--color--secondary) 8%, transparent);
	margin: 0 !important;
}

/*-------------------------
Name
--------------------------*/

.ai-team-name {
	margin: 0 0 8px;
	color: var(--wp--preset--color--secondary);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
}

/*-------------------------
Role
--------------------------*/

.ai-team-role {
	margin: 0 0 18px;
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 700;
}

/*-------------------------
Description
--------------------------*/

.ai-team-desc {
	margin: 0;
	color: #6b6f8a;
	font-size: 13px;
	line-height: 2;
	padding-bottom: 22px;
}

/* spacing before skills */

.ai-team-skills {
	margin-top: 18px;
}

/* profile card always full height */

.ai-team-profile-card > *:last-child {
	margin-top: auto;
}

/*==================================================
=        AI TEAM - PART 3 (SKILLS & SOCIAL)
==================================================*/

/*-------------------------
Skill Wrapper
--------------------------*/

.ai-team-skills {
	margin-top: 24px;
}

/*-------------------------
Skill Row
--------------------------*/

.ai-team-skill {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	margin: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, #ffffff);
}

.ai-team-skill:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, #ffffff);
}

/*-------------------------
Skill Circle
--------------------------*/

.ai-team-ring {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, #ffffff);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Percentage */

.ai-team-ring p {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}

/*-------------------------
Skill Label
--------------------------*/

.ai-team-skill-label {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

/*-------------------------
Social Icons
--------------------------*/

.ai-team-socials {
	display: flex;
	gap: 12px !important;
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 14%, #ffffff);
}

.ai-team-socials .wp-block-social-link {
	margin: 0 !important;
}

.ai-team-socials .wp-social-link {
	transition: 0.3s;
}

.ai-team-socials .wp-block-social-link a {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary) !important;
	color: #fff !important;
	transition: 0.3s;
}

.ai-team-socials .wp-block-social-link:hover a {
	background: var(--wp--preset--color--primary);
}

/*-------------------------
Hover Effects
--------------------------*/

.ai-team-profile-card {
	transition: 0.35s;
}

.ai-team-profile-card:hover {
	transform: translateY(-5px);

	box-shadow: 0 25px 50px color-mix(in srgb, var(--wp--preset--color--secondary) 12%, transparent);
}

.ai-team-image-col img {
	transition: 0.4s ease;
}

.ai-team-image-col:hover img {
	transform: scale(1.05);
}

.ai-team-item {
	transition: 0.3s;
}

.ai-team-item:hover {
	transform: translateX(8px);
}

/* Active Card */

.ai-team-item.is-active {
	box-shadow: 0 12px 35px color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
}

/*==================================================
=        AI TEAM - PART 4 (RESPONSIVE)
==================================================*/

/* Smooth Transition */

.ai-team-item,
.ai-team-profile-card,
.ai-team-image-col,
.ai-team-socials .wp-block-social-link a,
.ai-team-ring,
.ai-team-exp-badge {
	transition: all 0.35s ease;
}

/* Better Typography */

.ai-team-name {
	letter-spacing: -0.3px;
}

.ai-team-desc {
	text-wrap: pretty;
}

/* Prevent Image Selection */

.ai-team-item-img img,
.ai-team-hero-img img {
	user-select: none;
	-webkit-user-drag: none;
}

/* Keep Equal Height */

.ai-team-grid {
	align-items: start;
}

.ai-team-list,
.ai-team-image-col,
.ai-team-profile-card {
	align-self: start;
}

/* Fix Gutenberg Margin */

.ai-team-grid > * {
	margin-top: 0 !important;
}

.ai-team-profile-card > * {
	margin-top: -5px;
}

/* Desktop */

@media (min-width: 1200px) {
	.ai-team-grid {
		display: grid;
		grid-template-columns:repeat(3,1fr);
		gap: 20px;
		align-items: stretch;
	}

	.ai-team-profile-card {
		margin: 0 !important;
		padding: 0;
	}

	.ai-team-profile-card > * {
		padding-left: 30px;
		padding-right: 25px;
	}

	.ai-team-profile-card > *:first-child {
		padding-top: 30px;
	}

	.ai-team-profile-card > *:last-child {
		padding-bottom: 30px;
	}

	.ai-team-image-col,
	.ai-team-profile-card {
		height: 430px;
	}
}

/* Tablet */

@media (max-width: 1024px) {
	.ai-team-grid {
		grid-template-columns: 260px 1fr 280px;

		gap: 20px;
	}

	.ai-team-image-col,
	.ai-team-profile-card {
		height: 420px;
	}

	.ai-team-item {
		padding: 18px;
	}

	.ai-team-item-img img {
		width: 60px;
		height: 60px;
	}
}

/* Mobile */

@media (max-width: 781px) {
	.ai-team-grid {
		display: flex;
		flex-direction: column;
		gap: 35px;
	}
	.ai-team-list,
	.ai-team-image-col,
	.ai-team-profile-card {
		width: 100%;
		max-width: 100%;
	}
	.ai-team-image-col {
		height: 340px;
	}
	.ai-team-profile-card {
		height: auto;
	}
	.ai-team-item {
		padding: 18px;
	}
	.ai-team-heading {
		font-size: 22px;
	}
	.ai-team-heading-frame {
		padding: 12px 20px;
	}
	.ai-team-exp-badge {
		font-size: 12px;
		padding: 10px 14px;
	}
	.ai-team-socials {
		justify-content: start;
	}
	.ai-team-grid .ai-team-list {
		height: auto;
		gap: 20px;
	}
}

/* Small Mobile */

@media (max-width: 480px) {
	.ai-team-section {
		padding: 40px 16px;
	}

	.ai-team-item {
		padding: 15px;
		gap: 12px;
	}

	.ai-team-item-img img {
		width: 52px;
		height: 52px;
	}

	.ai-team-name {
		font-size: 16px;
	}

	.ai-team-role {
		font-size: 13px;
	}

	.ai-team-desc {
		font-size: 13px;
		line-height: 1.8;
	}

	.ai-team-skill {
		gap: 12px;
	}

	.ai-team-ring {
		width: 40px;
		height: 40px;
	}

	.ai-team-socials .wp-block-social-link a {
		width: 38px;
		height: 38px;
	}
}

/* Accessibility */

.ai-team-item:focus-visible,
.ai-team-socials .wp-block-social-link a:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
/* =========================================================
	MaterialAi Pro — Latest Projects Pattern Styles

	Colours are not hardcoded. All colours are inherited from
	the Global Styles palette in theme.json
	(var(--wp--preset--color--*)).

	FSE NOTES (How it works in the Site Editor):

	1. Add or Remove Cards
		Add or remove Columns inside the Columns block.
		The slider and navigation dots will automatically
		recalculate based on the available cards.

	2. Add a New Tab
		Duplicate an existing tab button in the Tabs group
		and change its label. The filter matches the button
		text with each card's "maip-card-type" text
		(ignoring icons, letter case, and dashes).

	3. "All" Tab
		Any tab whose text starts with "All" will display
		every project card.

	4. Disable Autoplay
		Select the outer Group block, then go to:
		Advanced → Additional CSS Class(es)
		and add:
		maip-no-autoplay
	========================================================= */

	.maip-projects {
		--maip-gap: 34px;
		--maip-per-view: 4;
		--maip-card-w: calc((100% - 3 * var(--maip-gap)) / 4);
	}

	.maip-projects-section {
		padding: 80px 20px;
		position: relative;
		overflow: hidden;
	}

/* Layer 1 — soft glow dots (uses primary color at low opacity) */
.maip-projects-section::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
	radial-gradient(
		circle at 20% 30%,
		color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent) 0px,
		transparent 3px
	),
	radial-gradient(
		circle at 80% 20%,
		color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent) 0px,
		transparent 4px
	),
	radial-gradient(
		circle at 60% 70%,
		color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0px,
		transparent 3px
	),
	radial-gradient(
		circle at 10% 80%,
		color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent) 0px,
		transparent 3px
	),
	radial-gradient(
		circle at 90% 65%,
		color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0px,
		transparent 3px
	);
	background-size: 300px 300px;
	opacity: 0.8;
	z-index: 0;
}

/* Layer 2 — faint diagonal network lines, adds depth like the reference */
.maip-projects-section::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
	linear-gradient(
		30deg,
		transparent 48%,
		color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent) 49%,
		transparent 50%
	),
	linear-gradient(
		-30deg,
		transparent 48%,
		color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent) 49%,
		transparent 50%
	);
	background-size: 180px 180px;
	opacity: 0.3;
	z-index: 0;
}

.maip-projects-section > * {
	position: relative;
	z-index: 1;
}

/* -------- Heading -------- */
.maip-section-heading {
	text-align: center;
	margin-bottom: 50px;
}

.maip-badge {
	display: inline-block;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--primary) 25%,
		transparent
	);
	border: 1px solid
	color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	padding: 6px 18px;
	border-radius: 30px;
	margin-bottom: 18px !important;
}

/* Corner-bracket frame around the heading, like the reference design */
.maip-heading {
	position: relative;
	display: inline-block;
	padding: 16px 42px !important;
	margin: 0 auto !important;
}

.maip-heading::before,
.maip-heading::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	pointer-events: none;
}

.maip-heading::before {
	top: 0;
	left: 0;
	border-left: 2px solid
	color-mix(in srgb, var(--wp--preset--color--light-color) 55%, transparent);
	border-top: 2px solid
	color-mix(in srgb, var(--wp--preset--color--light-color) 55%, transparent);
}

.maip-heading::after {
	bottom: 0;
	right: 0;
	border-right: 2px solid
	color-mix(in srgb, var(--wp--preset--color--light-color) 55%, transparent);
	border-bottom: 2px solid
	color-mix(in srgb, var(--wp--preset--color--light-color) 55%, transparent);
}

/* -------- Category Tabs (connected pill-box, like the reference) -------- */
.maip-tab-box {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 0px;
	margin-bottom: 55px !important;
}
.maip-category-tabs {
	flex-wrap: wrap;
	row-gap: 6px;
}
.maip-category-tabs .wp-block-button__link {
	border-radius: 10px;
	padding: 10px 20px;
	font-size: 16px;
	cursor: pointer;
	transition:all 0.3s ease;
}
.maip-category-tabs .maip-tab .wp-block-button__link::first-letter{
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	margin-right: 5px;
}
/* Active / inactive state is driven purely by the .maip-tab-active class,
	so JS can move it between buttons without touching color classes. */
	.maip-projects .maip-tab:not(.maip-tab-active) .wp-block-button__link {
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		color: var(--wp--preset--color--foreground-alt) !important;
		box-shadow: none !important;
		position: relative;
	}

	.maip-projects .maip-tab.maip-tab-active .wp-block-button__link {
		background-color: var(--wp--preset--color--primary) !important;
		color: var(--wp--preset--color--light-color) !important;
		border: none !important;
		box-shadow: 0 10px 30px
		color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	}
	.maip-category-tabs .maip-tab.maip-tab-active .wp-block-button__link::first-letter{
		color: #fff;
	}

/* Divider line between tabs, matching the reference's segmented look */
.maip-projects
.maip-tab:not(.maip-tab-active):not(:last-child)
.wp-block-button__link::after {
	content: "";
	position: absolute;
	right: -3px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.1);
}

/* -------- Slider Track (Columns block) -------- */
.maip-slider-viewport {
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
}

.maip-project-track {
	gap: var(--maip-gap) !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

/* -------- Project Card -------- */
.maip-project-card {
	background: color-mix(
		in srgb,
		var(--wp--preset--color--secondary) 82%,
		white 10%
	);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	padding: 0;
	overflow: hidden;
	transition:
	transform 0.4s ease,
	box-shadow 0.4s ease;
	flex: 0 0 var(--maip-card-w) !important;
	max-width: var(--maip-card-w);
	min-width: 0;
}

/* Cards filtered out by the tabs */
.maip-project-card.maip-hidden {
	display: none !important;
}

.maip-project-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}

.maip-card-image {
	position: relative;
	overflow: hidden;
	height: 340px;
}

/* Force the image to truly bleed edge-to-edge, regardless of the
	uploaded image's own intrinsic size/aspect ratio */
	.maip-card-img {
		position: absolute;
		inset: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.maip-card-img img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: 0.6s ease;
		border: 15px solid
		color-mix(in srgb, var(--wp--preset--color--secondary) 85%, black 15%);
		margin: 0;
	}

	.maip-project-card:hover .maip-card-img img {
		transform: scale(1.08);
	}

/* Dark gradient overlay so text stays readable on the image */
.maip-card-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--wp--preset--color--secondary) 92%, black 20%),
		transparent 55%
	);
}

/* Corner ribbon label */
.maip-card-type {
	position: absolute !important;
	top: 12px;
	left: 12px;
	z-index: 5;
	padding: 5px 12px !important;
	font-size: 9px !important;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	border-radius: 3px !important;
	margin: 0 !important;
	background: color-mix(
		in srgb,
		var(--wp--preset--color--secondary) 85%,
		black 15%
	) !important;
}

/* Glass info box */
.maip-card-info {
	position: absolute;
	left: 30px;
	right: 30px;
	bottom: 30px;
	z-index: 3;
	padding: 5px 20px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
}

.maip-card-info h3 {
	margin: 0 0 4px;
}

.maip-card-info p {
	margin: 0;
}

/* Circle arrow button — overrides the theme's default 40px-radius/30px-padding button style */
.maip-arrow-btn .wp-block-button__link {
	width: 34px !important;
	height: 34px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px !important;
	transition: 0.35s;
}

.maip-arrow-btn .wp-block-button__link:hover {
	transform: rotate(-45deg);
	box-shadow: 0 0 30px
	color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent);
}

/* -------- Bottom Controls -------- */
.maip-slider-controls {
	position: relative;
	margin-top: 45px !important;
	gap: 15px !important;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding-left: 5px;
	padding-right: 5px;
	width: max-content;
	margin-left: auto !important;
	margin-right: auto !important;
}

.maip-small-nav .wp-block-button__link {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px !important;
	cursor: pointer;
}

/* Pagination — thin line segments instead of circle dots, like the reference */
.maip-dots {
	gap: 10px !important;
	padding: 0px 0px 10px 0px;
}

.maip-dot-line .wp-block-button__link {
	width: 35px !important;
	height: 3px !important;
	min-height: 3px;
	padding: 0 !important;
	border-radius: 2px !important;
	opacity: 0.35;
	cursor: pointer;
	transition: 0.3s;
}

.maip-dot-line.maip-dot-active .wp-block-button__link {
	opacity: 1;
}

/* -------- Responsive (per-view count) -------- */
@media (max-width: 1200px) {
	.maip-projects {
		--maip-per-view: 3;
		--maip-card-w: calc((100% - 2 * var(--maip-gap)) / 3);
	}
}

@media (max-width: 900px) {
	.maip-projects {
		--maip-per-view: 2;
		--maip-card-w: calc((100% - 1 * var(--maip-gap)) / 2);
	}
}

@media (max-width: 768px) {
	.maip-projects {
		--maip-gap: 20px;
		--maip-per-view: 1;
		--maip-card-w: 100%;
	}
	.maip-tab-box {
		width: 100%;
		overflow-x: auto;
	}
	.maip-category-tabs {
		justify-content: center !important;
		flex-wrap: nowrap;
	}
}

/* -------- Editor canvas: sab cards dikhein taaki edit karna aasan rahe -------- */
.editor-styles-wrapper .maip-slider-viewport {
	overflow: visible;
}

.editor-styles-wrapper .maip-project-track {
	flex-wrap: wrap !important;
	transform: none !important;
	transition: none !important;
	row-gap: var(--maip-gap) !important;
}

.editor-styles-wrapper .maip-project-card.maip-hidden {
	display: block !important;
	opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
	.maip-project-track {
		transition: none !important;
	}
}

/**
 * MaterialAi Pro — Flexible Pricing pattern
 * Loaded on the front end and inside the site/post editor.
 */

.mai-pricing {
	--mai-purple: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
	--mai-navy: var(--wp--preset--color--secondary, var(--wp--preset--color--secondary));
	--mai-light: var(--wp--preset--color--light-color, #fffffe);
}

/* ---------------------------------------------------------------- Heading */

.mai-pricing__head {
	gap: 16px;
	text-align: center;
}

.mai-pricing .mai-eyebrow {
	margin: 0;
	padding: 5px 16px;
	border-radius: 40px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* ------------------------------------------------------------------ Cards */

.mai-pricing .mai-cards {
	align-items: flex-start;
}

.mai-pricing .mai-card {
	position: relative;
	overflow: hidden;
}

.mai-pricing .mai-card__tag-row {
	margin: 0 0 4px;
}

.mai-pricing .mai-tag {
	margin: 0;
	padding: 3px 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

/* Ambient ring motif behind the premium plan. */
.mai-pricing .mai-card--pro::after {
	content: "";
	position: absolute;
	right: -30px;
	bottom: -90px;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	opacity: 0.55;
	pointer-events: none;
	background: repeating-radial-gradient(
		circle at center,
		transparent 0 7px,
		color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent) 7px 8px
	);
	-webkit-mask-image: radial-gradient(
		circle at center,
		#000 45%,
		transparent 72%
	);
	mask-image: radial-gradient(circle at center, #000 45%, transparent 72%);
}

.mai-pricing .mai-card > * {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------ Price */

.mai-pricing .mai-price {
	display: flex;
	align-items: baseline;
	margin: 4px 0 18px;
	font-weight: 700;
	line-height: 1;
}

.mai-pricing .mai-price__currency {
	font-size: 24px;
	font-weight: 600;
}

.mai-pricing .mai-price__amount {
	font-size: 42px;
	letter-spacing: -1px;
}

.mai-pricing .mai-price__term {
	margin-left: 6px;
	font-size: 17px;
	font-weight: 500;
}

/* ----------------------------------------------------------------- Button */

.mai-pricing .mai-cta-wrap {
	/* margin-bottom: 26px; */
}

.mai-pricing .mai-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 7px 7px 24px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	text-align: left;
}

.mai-pricing .mai-cta .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--mai-purple);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transition: transform 0.2s ease;
	border: 2px solid;
}

.mai-pricing .mai-cta .wp-block-button__link:hover::after,
.mai-pricing .mai-cta .wp-block-button__link:focus::after {
	transform: translateX(3px);
}

.mai-pricing .materialai-cta-banner-btn {
	width: 100%;
}

/* --------------------------------------------------------------- Features */

.mai-pricing .mai-features {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.5;
}

.mai-pricing .mai-features li {
	position: relative;
	list-style: none;
	padding-left: 26px;
}

.mai-pricing .mai-features li::before {
	content: "";
	position: absolute;
	top: 0.22em;
	left: 0;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.4 12.4 2.5 2.4 4.7-5'/%3E%3C/svg%3E")
	center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8.4 12.4 2.5 2.4 4.7-5'/%3E%3C/svg%3E")
	center / contain no-repeat;
}

.mai-pricing .mai-card--pro .mai-features li::before {
	background-color: var(--mai-purple);
}

.mai-pricing .mai-features-grid {
	gap: 12px 24px;
}

/* ----------------------------------------------------------- Small screens */

@media (max-width: 781px) {
	.mai-pricing .mai-frame {
		padding: 12px 26px;
	}

	.mai-pricing .mai-price__amount {
		font-size: 36px;
	}

	.mai-pricing .mai-features-grid {
		gap: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mai-pricing .mai-cta .wp-block-button__link::after {
		transition: none;
	}
}

/**
 * MaterialAi Pro — Integration Logo Strip pattern
 * Loaded on the front end and inside the site/post editor.
 *
 * Marquee is pure CSS, no JS and no markup change: the six pills are absolutely
 * positioned on one shared keyframe and staggered with negative delays, so each
 * pill re-enters from the right the moment it clears the left edge. Because the
 * cycle length is (viewport + pill width), the reset always happens off-screen —
 * that is what keeps the loop seamless without a duplicated set of logos.
 */

.mai-logos {
	--mai-purple: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
	--mai-logo-w: 230px;
	--mai-logo-h: 132px;
	--mai-logo-img: 58px;
	--mai-marquee-duration: 32s;
	position: relative;
	overflow: hidden;
	background: linear-gradient(
		180deg,
		#ffffff 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 9%, #ffffff) 14%,
		color-mix(in srgb, var(--wp--preset--color--primary) 32%, #ffffff) 44%,
		color-mix(in srgb, var(--wp--preset--color--primary) 50%, #ffffff) 62%,
		color-mix(in srgb, var(--wp--preset--color--primary) 16%, #ffffff) 82%,
		#ffffff 100%
	);
}

/* --------------------------------------------- Static row (base / fallback) */

.mai-logos .mai-logos__track {
	width: max-content;
	max-width: none;
	margin-inline: auto;
	align-items: center;
}

.mai-logos .mai-logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mai-logo-w);
	height: var(--mai-logo-h);
	transition:
	background-color 0.3s ease,
	box-shadow 0.3s ease;
}

.mai-logos .mai-logo:not(.has-background) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 69%, #ffffff);
	border: 1px solid rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.mai-logos .mai-logo--featured {
	box-shadow: 0 20px 44px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 74%, #ffffff) 30%, transparent);
}

.mai-logos .mai-logo:hover:not(.has-background) {
	background-color: var(--wp--preset--color--primary);
	box-shadow: 0 14px 34px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 74%, #ffffff) 18%, transparent);
}

.mai-logos .mai-logo > * {
	margin: 0;
}

.mai-logos .mai-logo__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mai-logos .mai-logo__img img {
	width: auto;
	max-width: 62%;
	height: var(--mai-logo-img);
	object-fit: contain;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* --------------------------------------------------------- Running marquee */

@keyframes mai-logo-run {
	from {
		transform: translate3d(100vw, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--mai-logo-w)), 0, 0);
	}
}

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
	.mai-logos {
	/* Width is derived from the viewport so the six pills stay evenly spaced
			at roughly the designed 26px gap on every screen size. */
			--mai-logo-w: clamp(150px, calc(20vw - 50px), 380px);
			--mai-logo-h: calc(var(--mai-logo-w) * 0.574);
			--mai-logo-img: calc(var(--mai-logo-w) * 0.252);
		}

		.mai-logos .mai-logos__track {
			position: relative;
			width: 100%;
			height: var(--mai-logo-h);
			margin-inline: 0;
		}

		.mai-logos .mai-logo {
			position: absolute;
			inset: 0 auto 0 0;
			animation: mai-logo-run var(--mai-marquee-duration) linear infinite;
			will-change: transform;
		}

		/* Delays run backwards so the DOM order still reads left to right. */
		.mai-logos .mai-logo:nth-child(1) {
			animation-delay: calc(var(--mai-marquee-duration) / -6 * 5);
		}

		.mai-logos .mai-logo:nth-child(2) {
			animation-delay: calc(var(--mai-marquee-duration) / -6 * 4);
		}

		.mai-logos .mai-logo:nth-child(3) {
			animation-delay: calc(var(--mai-marquee-duration) / -6 * 3);
		}

		.mai-logos .mai-logo:nth-child(4) {
			animation-delay: calc(var(--mai-marquee-duration) / -6 * 2);
		}

		.mai-logos .mai-logo:nth-child(5) {
			animation-delay: calc(var(--mai-marquee-duration) / -6 * 1);
		}

		.mai-logos .mai-logo:nth-child(6) {
			animation-delay: 0s;
		}

		/* Let a visitor stop the row to read a logo. */
		.mai-logos:hover .mai-logo,
		.mai-logos:focus-within .mai-logo {
			animation-play-state: paused;
		}
	}

/* ----------------------------------------------------------- Small screens */

@media (max-width: 991px) {
	.mai-logos {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		overscroll-behavior-x: contain;
	}

	.mai-logos::-webkit-scrollbar {
		display: none;
	}

	.mai-logos .mai-logos__track {
		margin-inline: 0;
		padding-inline: 20px;
	}
}

@media (max-width: 781px) {
	.mai-logos {
		--mai-logo-w: 158px;
		--mai-logo-h: 100px;
		--mai-logo-img: 42px;
	}
}

/* ------------------------------------------------------------ Editor state */

.editor-styles-wrapper .mai-logos {
	--mai-logo-w: 230px;
	--mai-logo-h: 132px;
	--mai-logo-img: 58px;
	overflow-x: auto;
}

.editor-styles-wrapper .mai-logos .mai-logos__track {
	position: static;
	width: max-content;
	height: auto;
}

.editor-styles-wrapper .mai-logos .mai-logo {
	position: static;
	animation: none;
}

/**
 * MaterialAi Pro — Our Latest Blog
 * Query Loop cards (Owl Carousel slider) + framed section heading.
 */

.mai-blog {
	--mai-purple: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
	--mai-navy: var(--wp--preset--color--secondary, var(--wp--preset--color--secondary));
	background-color: #ffffff;
}

/* ---------------------------------------------------------------- Heading */

.mai-blog__head {
	gap: 16px;
	text-align: center;
}

.mai-blog .mai-eyebrow {
	margin: 0;
	padding: 5px 16px;
	border-radius: 40px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

.mai-blog .mai-frame {
	position: relative;
	display: inline-block;
	padding: 14px 44px;
	border: 1.5px dashed var(--mai-purple);
	background-repeat: no-repeat;
	background-size: 7px 7px;
	background-image:
	linear-gradient(var(--mai-navy), var(--mai-navy)),
	linear-gradient(var(--mai-navy), var(--mai-navy)),
	linear-gradient(var(--mai-navy), var(--mai-navy)),
	linear-gradient(var(--mai-navy), var(--mai-navy));
	background-position:
	50% -4px,
	50% calc(100% + 4px),
	-4px 50%,
	calc(100% + 4px) 50%;
}

.mai-blog .mai-frame > .wp-block-heading {
	margin: 0;
	position: static;
}

.mai-blog .mai-frame::before,
.mai-blog .mai-frame::after,
.mai-blog .mai-frame > .wp-block-heading::before,
.mai-blog .mai-frame > .wp-block-heading::after {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	border: 2.5px solid var(--mai-navy);
}

.mai-blog .mai-frame::before {
	top: -2px;
	left: -2px;
	border-right: 0;
	border-bottom: 0;
}

.mai-blog .mai-frame::after {
	right: -2px;
	bottom: -2px;
	border-top: 0;
	border-left: 0;
}

.mai-blog .mai-frame > .wp-block-heading::before {
	top: -2px;
	right: -2px;
	border-bottom: 0;
	border-left: 0;
}

.mai-blog .mai-frame > .wp-block-heading::after {
	bottom: -2px;
	left: -2px;
	border-top: 0;
	border-right: 0;
}

/* --------------------------------------------------------- Carousel shell */

.mai-blog .mai-blog__query {
	position: relative;
}

/* Owl needs each post wrapper to be a direct, unstyled slide item. */
.mai-blog .mai-blog__list.owl-carousel .wp-block-post {
	padding: 0; /* half of the old 22px gap, so slides keep their breathing room */
}

/* ------------------------------------------------------------------ Cards */

.mai-blog .mai-post {
	overflow: hidden;
	height: 100%;
	align-items: stretch;
}

.mai-blog .mai-post__media {
	flex: 1 0 200px;
	margin: 0;
	align-self: stretch;
}

.mai-blog .mai-post__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mai-blog .mai-post__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 20px 22px 22px;
}

/* ------------------------------------------------------------------- Meta */

.mai-blog .mai-post__meta{
	font-size: 13px;
	line-height: 1.6;
	align-items: center;
	flex-wrap: wrap;
}

.mai-blog .mai-post__meta .wp-block-post-author-name,
.mai-blog .mai-post__meta .wp-block-post-date {
	display: flex;
	align-items: center;
	gap: 7px;
}

.mai-blog .mai-post__meta .wp-block-post-date {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	padding-left: 14px;
}

.mai-blog .mai-post__meta .wp-block-post-author-name::before,
.mai-blog .mai-post__meta .wp-block-post-date::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background-color: var(--mai-purple);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.mai-blog .mai-post__meta .wp-block-post-author-name::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0z'/%3E%3C/svg%3E");
}

.mai-blog .mai-post__meta .wp-block-post-date::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ Title */

.mai-blog .mai-post__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
}

.mai-blog .mai-post__title a {
	color: inherit;
}

.mai-blog .mai-post__title a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- Actions */

.mai-blog .mai-post__actions {
	align-items: center;
	margin-top: auto;
	padding-top: 6px;
}
.mai-blog .mai-post__more {
	margin: 0;
}
.mai-blog .mai-post__more a,
.mai-blog a.mai-post__more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 5px 36px 5px 18px;
	border-radius: 40px;
	border: 2px solid var(--mai-purple);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	transition: all 0.3s;
}
.mai-blog .mai-post__more a::after,
.mai-blog a.mai-post__more::after {
	content: "";
	width: 26px;
	height: 26px;
	position: absolute;
	line-height: 26px;
	border-radius: 50%;
	right: -8px;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	background-color: var(--mai-purple);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 13px;
	z-index: 1;
}
.mai-blog a.mai-post__more::before {
	content: "";
	background: var(--wp--preset--color--primary);
	display: block;
	width: 26px;
	height: 26px;
	right: -8px;
	line-height: 26px;
	color: #000;
	position: absolute;
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1);
	transition: all 0.4s ease-in-out;
	z-index: 0;
}
.mai-blog .mai-post__actions .mai-post__more:hover {
	text-decoration: underline;
}
/* Icon-only comments bubble (the count stays for screen readers). */
.mai-blog .mai-post__comments {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	border-radius: 50%;
	background-color: var(--mai-purple);
	font-size: 0;
	color: transparent;
}

.mai-blog .mai-post__comments::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: #ffffff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")
	center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E")
	center / contain no-repeat;
}

/* --------------------------------------------------- Owl Carousel: nav/dots */
/* One merged pill: [prev circle] [lavender dash-dot capsule] [next circle],
	arrows overlapping the capsule's edges — matches the reference design. */

	.mai-blog .mai-blog__list.owl-carousel {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		row-gap: 34px;
	}

	.mai-blog .mai-blog__list.owl-carousel .owl-stage-outer {
		flex: 0 0 100%;
		overflow: hidden;
		order: 0;
	}

/* Pull the nav's two buttons out as direct flex items of the carousel row,
	so they can be ordered/placed either side of the dots capsule. */
	.mai-blog .owl-nav {
		display: contents;
	}

	.mai-blog .owl-nav button.owl-prev,
	.mai-blog .owl-nav button.owl-next {
		position: relative;
		z-index: 2;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 40px;
		height: 40px;
		margin: 0;
		border-radius: 50%;
		font-size: 0;
		text-indent: -9999px;
		overflow: hidden;
		transition: all 0.3s;
	}

	.mai-blog .owl-nav button.owl-prev {
		order: 1;
		margin-right: -18px;
		background-color: var(--mai-purple) !important;
	}
	.mai-blog .owl-nav button.owl-next {
		order: 3;
		margin-left: -18px;
		background-color: var(--mai-purple) !important;
	}
	.mai-blog .owl-nav button.owl-prev:hover,
	.mai-blog .owl-nav button.owl-prev:focus,
	.mai-blog .owl-nav button.owl-next:hover,
	.mai-blog .owl-nav button.owl-next:focus{
		background-color: var(--wp--preset--color--secondary) !important;
	}
	.mai-blog .wp-block-post-template > * + * {
		margin-block-start: 0 !important;
	}

	.mai-blog .owl-nav button.owl-prev::before,
	.mai-blog .owl-nav button.owl-next::before {
		content: "";
		position: absolute;
		width: 15px;
		height: 15px;
		background-color: #ffffff;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")
		center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E")
		center / contain no-repeat;
	}

	.mai-blog .owl-nav button.owl-prev::before {
		transform: scaleX(-1);
	}

	.mai-blog .mai-blog__query .owl-dots {
		order: 2;
		position: relative;
		z-index: 1;
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 10px !important;
		flex: 0 0 auto;
		width: fit-content !important;
		height: 40px !important;
		padding: 0 34px !important;
		border-radius: 40px !important;
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, #ffffff) !important;
	}
  .mai-blog .mai-blog__query .owl-dots.disabled{
  	display: none !important;
  }
	.mai-blog .mai-blog__query .owl-dots button.owl-dot,
	.mai-blog .mai-blog__query .owl-dots .owl-dot {
		background: transparent !important;
		border: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.mai-blog .mai-blog__query .owl-dots .owl-dot span {
		display: block !important;
		width: 34px !important;
		height: 4px !important;
		min-width: 34px !important;
		min-height: 0 !important;
		margin: 0 !important;
		border-radius: 4px !important;
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent) !important;
		transition: background-color 0.2s ease;
	}

	.mai-blog .mai-blog__query .owl-dots .owl-dot.active span {
		background-color: var(--mai-purple) !important;
	}

/* ----------------------------------------------------------- Small screens */

@media (max-width: 781px) {
	.mai-blog .mai-post__body {
		padding: 16px;
	}

	.mai-blog .mai-frame {
		padding: 12px 26px;
	}

	.mai-blog .owl-dots {
		padding: 0 22px;
	}

	.mai-blog .owl-dots .owl-dot span {
		width: 24px;
	}
}
.mai-who {
	--mai-primary: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
	--mai-accent: color-mix(in srgb, var(--wp--preset--color--primary) 85%, #ffffff);
	--mai-orbit: min(600px, 40vw);
	--mai-ring-faint: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
	--mai-ring-line: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	--mai-ring-fill: color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
	overflow: hidden;
	overflow: clip;
}
.mai-who .mai-who__cols {
	gap: clamp(28px, 4vw, 40px);
}

/* ---------- orbit graphic ---------- */
.mai-orbit {
	position: relative;
	width: var(--mai-orbit);
	max-width: 100%;
	margin-inline: auto;
	padding: 10% 8%;
}
.mai-orbit__stage {
	position: relative;
	aspect-ratio: 1/1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mai-orbit__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.mai-orbit__ring,
.mai-orbit__dot {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}
.mai-orbit__ring--1 {
	width: 100%;
	height: 100%;
	border: 1px solid var(--mai-ring-faint);
}
.mai-orbit__ring--2 {
	width: 91%;
	height: 91%;
	border: 1px solid var(--mai-ring-faint);
}
.mai-orbit__ring--4 {
	width: 83%;
	height: 83%;
	background: var(--mai-ring-fill);
}
.mai-orbit__ring--3 {
	width: 83%;
	height: 83%;
	border: 1px solid var(--mai-ring-line);
	animation: mai-ring-pulse 7s ease-in-out infinite;
}

/* dots ride the outer rings and orbit slowly */
.mai-orbit__spin {
	position: absolute;
	inset: 0;
	animation: mai-orbit-spin 40s linear infinite;
}
.mai-orbit__dot {
	width: clamp(9px, 2%, 13px);
	height: clamp(9px, 2%, 13px);
	background: var(--mai-primary);
	z-index: 1;
}
.mai-orbit__dot--1 {
	top: 0;
	left: 50%;
}
.mai-orbit__dot--2 {
	top: 62%;
	left: 6%;
}
.mai-orbit__dot--3 {
	top: 70%;
	left: 87%;
}

.mai-orbit__logo {
	position: relative;
	z-index: 2;
	margin: 0;
	width: 100%;
}
.mai-orbit__logo img {
	width: min(58%, 400px);
	height: auto;
	display: block;
	margin-inline: auto;
	animation: mai-float 7s ease-in-out infinite;
}

.mai-orbit__node {
	position: absolute;
	z-index: 3;
	gap: 10px;
	text-align: center;
}
.mai-orbit__node--top {
	top: 0;
	left: 50%;
	transform: translate(-50%, -142%);
}
.mai-orbit__node--left {
	top: 68%;
	left: -5.5%;
	transform: translate(-50%, -50%);
}
.mai-orbit__node--right {
	top: 92%;
	left: 91%;
	transform: translate(-50%, -50%);
}
.mai-orbit__icon {
	width: clamp(38px, 8%, 48px);
	aspect-ratio: 1/1;
	border-radius: 12px;
	background: var(--mai-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
	animation: mai-float 5s ease-in-out infinite;
}
.mai-orbit__node--left .mai-orbit__icon {
	animation-delay: -1.7s;
}
.mai-orbit__node--right .mai-orbit__icon {
	animation-delay: -3.4s;
}
.mai-orbit__icon svg {
	width: 60%;
	height: 60%;
}
.mai-orbit__node p {
	margin: 0;
	white-space: nowrap;
}

@keyframes mai-orbit-spin {
	to {
		transform: rotate(360deg);
	}
}
@keyframes mai-float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-9px);
	}
}
@keyframes mai-ring-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.45;
	}
}
@keyframes mai-ripple {
	0% {
		transform: scale(1);
		opacity: 0.5;
	}
	70% {
		opacity: 0;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}

/* ---------- content ---------- */
.mai-who__badge {
	display: inline-block;
	width: auto;
}
.mai-who__text {
	max-width: 34em;
}

/* ---------- stats ---------- */
.mai-who__stats {
	container-type: inline-size;
	box-shadow: 0 0 0 2px var(--mai-primary);
}
.mai-who__stats .wp-block-columns {
	margin-bottom: 0;
}
.mai-who__stats .wp-block-column {
	padding-inline: clamp(4px, 1.6cqi, 16px);
	min-width: 0;
}
.mai-who__stats .wp-block-column + .wp-block-column {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.mai-who__stat-num {
	margin: 0;
	color: var(--mai-accent);
	font-size: clamp(24px, 3vw, 38px);
	font-size: clamp(22px, 6.4cqi, 38px);
	font-weight: 700;
	line-height: 1.2;
}
.mai-who__stat-label {
	margin: 6px 0 0;
	color: var(--wp--preset--color--light-color);
	font-size: clamp(10px, 0.9vw, 14px);
	font-size: clamp(10px, 2.5cqi, 15px);
	letter-spacing: 0;
	text-transform: uppercase;
	line-height: 1.4;
	white-space: nowrap;
}

/* ---------- actions ---------- */
.mai-who__actions {
	gap: clamp(26px, 3vw, 44px);
	padding-block: 12px;
}
.mai-btn-primary .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	transition:
	transform 0.3s ease,
	box-shadow 0.3s ease;
}
.mai-btn-primary  {
	position: relative;
}
/* The pulsing ring */
.mai-btn-primary::before, .mai-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; 
  border-radius: 50px;
  outline: 1px solid #444444;
  animation: linePulse 1.8s infinite linear;
  pointer-events: none;
}
.mai-btn-primary::after {
  animation-delay: .9s;
}
.mai-btn-primary .wp-block-button__link::after {
	content: "";
	width: clamp(38px, 3.2vw, 46px);
	aspect-ratio: 1/1;
	flex: none;
	border-radius: 50%;
	background-color: var(--mai-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s ease;
}
.mai-btn-primary .wp-block-button__link:hover::after,
.mai-btn-primary .wp-block-button__link:focus-visible::after {
	transform: scale(1.08) rotate(-45deg);
}

.mai-who__video {
	gap: clamp(18px, 2vw, 26px);
}
.mai-who__play {
	position: relative;
	width: clamp(54px, 4.6vw, 68px);
	aspect-ratio: 1/1;
	flex: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--background);
	box-shadow:
	0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent),
	0 0 0 4px var(--wp--preset--color--background),
	0 0 0 5px color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent),
	0 0 0 8px var(--wp--preset--color--background),
	0 0 0 9px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	transition:
	transform 0.3s ease,
	box-shadow 0.3s ease;
}
.mai-who__play svg {
	width: 70%;
	height: 70%;
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}
.mai-who__play::before,
.mai-who__play::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid var(--mai-primary);
	opacity: 0;
	animation: mai-ripple 3s ease-out infinite;
}
.mai-who__play::after {
	animation-delay: 1.5s;
}
.mai-who__video:hover .mai-who__play {
	transform: scale(1.06);
}
.mai-who__video:hover .mai-who__play svg {
	transform: scale(1.12);
}
.mai-who__video-link a {
	color: var(--wp--preset--color--secondary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 5px;
}
.mai-who__video-link a:hover {
	color: var(--mai-primary);
}

@media (prefers-reduced-motion: reduce) {
	.mai-orbit__spin,
	.mai-orbit__icon,
	.mai-orbit__logo img,
	.mai-orbit__ring--3,
	.mai-who__play::before,
	.mai-who__play::after {
		animation: none;
	}
	.mai-who * {
		transition-duration: 0.01ms !important;
	}
}

/* ---------- laptop ---------- */
@media (max-width: 1280px) {
	.mai-who {
		--mai-orbit: min(520px, 42vw);
	}
}

/* ---------- tablet: stack before columns get cramped ---------- */
@media (max-width: 991px) {
	.mai-who {
		--mai-orbit: min(480px, 78vw);
	}
	.mai-who__cols {
		flex-wrap: wrap !important;
	}
	.mai-who__cols > .wp-block-column {
		flex-basis: 100% !important;
	}
	.mai-who__cols > .wp-block-column:first-child {
		margin-bottom: clamp(8px, 2vw, 24px);
	}
}

/* ---------- mobile ---------- */
@media (max-width: 600px) {
	.mai-who {
		--mai-orbit: min(340px, 88vw);
	}
	.mai-orbit {
		padding: 15% 12%;
	}
	.mai-orbit__icon {
		border-radius: 10px;
	}
	.mai-orbit__node p {
		font-size: 13px !important;
	}
	.mai-who__stat-label {
		white-space: normal;
	}
	.mai-who__actions {
		width: 100%;
	}
	.mai-btn-primary,
	.mai-btn-primary .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}
	.mai-who__video {
		width: 100%;
	}
}
@media (max-width: 380px) {
	.mai-who__stat-label {
		letter-spacing: 0;
		font-size: 10px;
	}
}

/* ---------- editor: keep the orbit readable in the canvas ---------- */
.editor-styles-wrapper .mai-orbit__node {
	position: absolute;
}

/**
 * Why Choose Us section
 * BEM styles for /patterns/why-choose-us.php
 * Reads colors, font-sizes and spacing from theme.json presets via CSS custom properties.
 *
 * The robot/skyline photo is applied as the outer .why-choose-us group's own
 * background image (backgroundSize: cover, backgroundPosition: right center)
 * directly in the pattern's block attributes — there is no separate image
 * column/element, so no CSS is needed to position it here.
 */

/* ------------------------------------------------------------------------ *
 * Block / container
 * ------------------------------------------------------------------------ */
 .why-choose-us {
 	position: relative;
 	overflow: hidden;
 	padding-top: clamp(48px, 6vw, 96px);
 	padding-bottom: clamp(48px, 6vw, 96px);
 }

 .why-choose-us__row {
 	position: relative;
 	z-index: 2;
 	align-items: center;
 }

/* ------------------------------------------------------------------------ *
 * Content column
 * Constrained to roughly the left half of the section so the feature grid
 * never overlaps the robot on the right side of the background image.
 * ------------------------------------------------------------------------ */
 .why-choose-us__content {
 	padding: 0 clamp(0px, 4vw, 0px);
 	box-sizing: border-box;
 }

 .why-choose-us__badge {
 	display: inline-block;
 	background-color: var(--wp--preset--color--primary);
 	color: var(--wp--preset--color--light-color);
 	font-family: var(--wp--preset--font-family--poppins);
 	font-weight: 700;
 	text-transform: none;
 	letter-spacing: 0.01em;
 	line-height: 1.4;
 	padding: 8px 20px;
 	border-radius: 40px;
 	margin: 0 0 24px;
 }

 .why-choose-us__heading {
 	margin: 0 0 24px;
 }

 .why-choose-us__description {
 	margin: 0 0 40px;
 	line-height: 1.7;
 }

/* ------------------------------------------------------------------------ *
 * 2x2 feature grid
 * ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------ *
 * Feature Grid
 * ------------------------------------------------------------------------ */

 .why-choose-us__grid {
 	margin-bottom: 30px;
 }

 .why-choose-us__grid--last {
 	margin-bottom: 0;
 }

/* ------------------------------------------------------------------------ *
 * Feature Card
 * ------------------------------------------------------------------------ */

 .why-choose-us__box {
 	position: relative;
 	display: flex;
 	align-items: center;
 	gap: 22px;

 	min-height: 98px;
 	height: 100%;

 	padding: 22px 28px;
 	box-sizing: border-box;

 	background: color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);

 	border: 1px solid rgba(255, 255, 255, 0.92);
 	border-bottom: 2px solid var(--wp--preset--color--primary);

 	border-radius: 4px;

 	overflow: hidden;

 	transition: 0.3s ease;
 }

/* Right Bottom Purple Glow */

.why-choose-us__box::after {
	content: "";
	position: absolute;

	right: -35px;
	bottom: -18px;

	width: 150px;
	height: 55px;

	background: radial-gradient(
		ellipse,
		color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent) 45%,
		color-mix(in srgb, var(--wp--preset--color--primary) 0%, transparent) 100%
	);

	filter: blur(18px);

	pointer-events: none;
}

/* Hover */

.why-choose-us__box:hover {
	transform: translateY(-2px);

	border-color: rgba(255, 255, 255, 1);

	border-bottom-color: var(--wp--preset--color--primary);
}

/* Focus */

.why-choose-us__box:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);

	outline-offset: 3px;
}

/* ------------------------------------------------------------------------ *
 * Icon
 * ------------------------------------------------------------------------ */

 .why-choose-us__icon {
 	flex: 0 0 46px;

 	width: 46px;

 	height: 46px;

 	background-repeat: no-repeat;

 	background-position: center;

 	background-size: contain;

 	border: none;

 	box-shadow: none;

 	background-color: var(--wp--preset--color--primary);
 	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
 	-webkit-mask-repeat: no-repeat;
 	-webkit-mask-position: center;
 	-webkit-mask-size: contain;
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E");
 	mask-repeat: no-repeat;
 	mask-position: center;
 	mask-size: contain;
 }

/* ------------------------------------------------------------------------ *
 * Text
 * ------------------------------------------------------------------------ */

 .why-choose-us__box-text {
 	margin: 0;

 	color: var(--wp--preset--color--light-color);

 	font-family: var(--wp--preset--font-family--poppins);

 	font-size: 18px;

 	font-weight: 600;

 	line-height: 1.35;

 	letter-spacing: -0.01em;
 }

/* ------------------------------------------------------------------------ *
 * Responsive: tablet
 * ------------------------------------------------------------------------ */
 @media (max-width: 991px) {
 	.why-choose-us__content {
 		max-width: 100%;
 	}
 }

/* ------------------------------------------------------------------------ *
 * Responsive: mobile (matches core Columns block stacking breakpoint)
 * Core's own CSS already forces columns to flex-basis: 100% below 781px;
 * these rules just clean up spacing once the column is full-width and swap
 * the background photo's focal point so it doesn't crop out the robot.
 * ------------------------------------------------------------------------ */
 @media (max-width: 781px) {
 	.why-choose-us {
 		background-position: center top !important;
 	}

 	.why-choose-us__content {
 		padding: 0 clamp(20px, 6vw, 32px);
 	}

 	.why-choose-us__grid {
 		flex-wrap: wrap;
 	}
 }

 @media (max-width: 480px) {
 	.why-choose-us__badge {
 		font-size: 12px;
 	}

 	.why-choose-us__box {
 		padding: 16px;
 	}
 }
/* =========================================================
	FAQ Split Section — style.css (v2)
	BEM naming: faq-split, faq-split__element, faq-split__element--modifier
	All colours / fonts / radii reference theme.json custom properties.
	No inline CSS, no JS — pure enqueued stylesheet.
	========================================================= */

/* ---------- Section shell ---------- */

.faq-split .faq-split__row{
	padding: 80px 0 !important;
}
.faq-split {
	overflow: hidden;
	margin: 0;
}

.faq-split__row.wp-block-columns {
	margin: 0;
	align-items: stretch;
	gap: 0;
}

/* Neither column is allowed to carry its own top/bottom margin or a
	trailing child margin — both would silently make one column taller
	than the other even though align-items:stretch matches their
	*heights*, producing exactly the hairline gap along the bottom
	edge. Belt-and-suspenders: reset the columns themselves AND their
	last child. */
	.faq-split__media-col,
	.faq-split__content {
		margin: 0;
	}

	.faq-split__media-col > *:last-child,
	.faq-split__content > *:last-child {
		margin-bottom: 0;
	}

	@media (min-width: 782px) {
		.faq-split__row.wp-block-columns {
			flex-wrap: nowrap;
		}
	}

/* ---------- Left column: media ---------- */
.faq-split__media-col {
	padding: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	height: auto;
}

/* Plain Group used in place of core/cover — gives us the exact same
	full-bleed image + overlay effect with trivial, validation-safe
	save markup (a Cover block's save output is complex and version
	sensitive to hand-author; a Group + Image is not).
	flex: 1 makes it fill the column's full stretched height (the row
	uses align-items: stretch) instead of stopping at min-height and
	leaving a blank gap whenever the content column runs taller. */
	.faq-split__media.wp-block-group {
		position: relative;
		flex: 1 1 auto;
		margin: 0;
		align-self: stretch;
		display: flex;
		flex-direction: column;
		min-height: 420px;
		max-height: 525px;
	}
	/* image = flex item, so it fills the column height without
	   percentage heights (works in the editor canvas too) */
	.faq-split__media-image.wp-block-image {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		margin: 0;
		min-height: 0;
	}
	.faq-split__media-image.wp-block-image img {
		display: block;
		width: 100%;
		flex: 1 1 0;
		min-height: 0;
		height: auto;
		object-fit: cover;
		object-position: center top;
		border-radius: 10px;
	}

/* Stat cards pinned to the bottom-left of the image, side by side.
	background-color here is a safety net: at fractional viewport
	widths, two flex siblings can round to sub-pixel-different widths
	and leave a hairline gap between them — without this, that gap
	shows the photo bleeding through as a thin diagonal sliver right
	at the seam. Matching it to the dark card's colour makes any such
	rounding gap invisible instead of a visible notch. */
/* Stats Wrapper */
.faq-split__stats.wp-block-group {
  position: absolute;
  left: auto;
  right: -25px;
  top: auto;
  bottom: 80px;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  overflow: visible;
  gap: 10px;
}

/* Common Card */
.faq-split__stat {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	border-radius: 5px;
	margin: 0 !important;
	z-index: 9;
	font-family: var(--wp--preset--font-family--poppins), "Poppins", sans-serif;
}

.faq-split__stat--secondary {
	margin-left: 0 !important;
}
.faq-split__stat--primary {
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary), #ffffff 12%) 0%, var(--wp--preset--color--primary) 45%, color-mix(in srgb, var(--wp--preset--color--primary), #000000 8%) 100%);
}

/* Dark Card */
.faq-split__stat--secondary {
	background: var(--wp--preset--color--secondary);
}

/* Label */
.faq-split__stat-label {
	margin: 0 0 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
}

/* Number */
.faq-split__stat-number.wp-block-heading {
	margin: 0 0 8px;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

/* Description */
.faq-split__stat-desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: 13px;
	line-height: 1.6;
}

/* ---------- Right column: content ---------- */
.faq-split__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 0 40px;
	background: transparent;
	z-index: 2;
}

.faq-split__badge {
	display: inline-block;
	align-self: flex-start;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins), "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	padding: 5px 15px;
	border-radius: 5px;
	margin: 0 0 24px;
}

.faq-split__heading.wp-block-heading {
	font-family: var(--wp--preset--font-family--poppins), "Poppins", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	margin: 0 0 25px;
	letter-spacing: 0;
	color: var(--wp--preset--color--secondary);
}

/* ---------- Accordion ---------- */

.faq-split__accordion.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.faq-split__item.wp-block-details {
	background: var(--wp--preset--color--secondary);
	border: none;
	border-radius: 8px;
	padding: 0;
	margin-top: 0;
	overflow: hidden;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.faq-split__item > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 22px;
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.faq-split__item > summary::marker {
	content: "";
}
.faq-split__item > summary::after {
	content: "+";
	margin-left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	font-size: 26px;
	line-height: 1;
	font-weight: 600;
	flex-shrink: 0;
	transition: all 0.3s ease;
}
.faq-split__item[open] > summary::after {
	content: "−";
	color: #fff;
}
.faq-split__itemfaq-split__item[open] {
	background-color:var(--wp--preset--color--primary) ;
}
.faq-split__item-answer {
	margin: 0;
	padding: 0 22px 18px;
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins), sans-serif;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7;
	opacity: 0.9;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

/* =========================================================
	Responsive
========================================================= */

/* ---------------------------------------------------------
	Large Laptop
--------------------------------------------------------- */
@media (max-width: 1400px) {
	.faq-split__media.wp-block-group {
		min-height: 560px;
	}

	.faq-split__stats.wp-block-group {
		left: 30px;
		bottom: 30px;
		gap: 8px;
	}

	.faq-split__stat-number.wp-block-heading {
		font-size: 54px;
	}

	.faq-split__heading.wp-block-heading {
		font-size: 44px;
	}
}

/* ---------------------------------------------------------
	Laptop
--------------------------------------------------------- */
@media (max-width: 1199px) {
	.faq-split__content {
		padding: 60px 40px;
	}

	.faq-split__media.wp-block-group {
		min-height: 520px;
	}

	.faq-split__stats.wp-block-group {
		left: 24px;
		bottom: 24px;
	}

	.faq-split__stat {
		width: 210px;
		min-width: 210px;
		height: 165px;
		padding: 24px 20px;
	}

	.faq-split__stat-label {
		font-size: 16px;
	}

	.faq-split__stat-number.wp-block-heading {
		font-size: 46px;
	}

	.faq-split__stat-desc {
		font-size: 15px;
	}

	.faq-split__heading.wp-block-heading {
		font-size: 40px;
		max-width: 100%;
	}
}

/* ---------------------------------------------------------
	Tablet
--------------------------------------------------------- */
@media (max-width: 991px) {
	.faq-split__row.wp-block-columns {
		flex-direction: column;
	}

	.faq-split__media-col,
	.faq-split__content {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	.faq-split__media.wp-block-group {
		min-height: 580px;
	}

	.faq-split__content {
		padding: 50px 35px;
	}

	.faq-split__heading.wp-block-heading {
		font-size: 38px;
		max-width: 100%;
	}

	.faq-split__stats.wp-block-group {
		left: 20px;
		right: 20px;
		bottom: 20px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.faq-split__stat {
		width: 100%;
		min-width: 100%;
		height: 170px;
	}
}

/* ---------------------------------------------------------
	Mobile
--------------------------------------------------------- */
@media (max-width: 767px) {
	.faq-split__media.wp-block-group {
		min-height: 460px;
	}
	.faq-split__stats.wp-block-group {
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 15px;
		grid-template-columns: 1fr;
	}
	.faq-split__stat {
		height: auto;
		padding: 24px;
	}
	.faq-split__content {
		padding: 40px 22px;
	}
	.faq-split__badge {
		margin-bottom: 18px;
	}
	.faq-split__heading.wp-block-heading {
		font-size: 32px;
		line-height: 1.25;
		margin-bottom: 24px;
	}
	.faq-split__item > summary {
		padding: 18px;
		font-size: 17px;
	}
	.faq-split__item-answer {
		padding: 0 18px 18px;
		font-size: 15px;
	}
	.faq-split__stat-number.wp-block-heading {
		font-size: 42px;
	}
}

/* ---------------------------------------------------------
	Small Mobile
--------------------------------------------------------- */
@media (max-width: 575px) {
	.faq-split__media.wp-block-group {
		min-height: 420px;
	}

	.faq-split__stats.wp-block-group {
		left: 10px;
		right: 10px;
		bottom: 10px;
		gap: 10px;
	}

	.faq-split__stat {
		padding: 20px;
	}

	.faq-split__stat-label {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.faq-split__stat-number.wp-block-heading {
		font-size: 34px;
		margin-bottom: 8px;
	}

	.faq-split__stat-desc {
		font-size: 14px;
		line-height: 1.5;
	}

	.faq-split__content {
		padding: 32px 18px;
	}

	.faq-split__heading.wp-block-heading {
		font-size: 28px;
	}

	.faq-split__item > summary {
		padding: 16px;
		font-size: 16px;
	}

	.faq-split__item > summary::after {
		width: 28px;
		height: 28px;
		font-size: 18px;
	}

	.faq-split__item-answer {
		padding: 0 16px 16px;
	}
}
/**
 * AI Expert Team — Block Pattern Styles
 * Theme: materialai-pro
 * BEM naming: block__element--modifier
 * All colors/typography pull from theme.json presets via WP-generated
 * CSS custom properties (--wp--preset--*) so Site Editor changes stay in sync.
 * Enqueue on the front end, e.g.:
 *   wp_enqueue_style( 'materialai-pro-team-section',
 *     get_theme_file_uri( '/assets/css/team-section.css' ), array(), '1.0.0' );
 */

/* -----------------------------------------------------------------------
 * 1. Section wrapper
 * ---------------------------------------------------------------------- */
/**
 * AI Expert Team — Block Pattern Styles
 * Theme: materialai-pro
 * BEM naming: block__element--modifier
 * Mobile-first: base rules target small phones first, then get
 * progressively enhanced for larger screens with min-width queries.
 * Colors/typography pull from theme.json presets via WP-generated
 * CSS custom properties (--wp--preset--*).
 * Enqueue on the front end, e.g.:
 *   wp_enqueue_style( 'materialai-pro-team-section',
 *     get_theme_file_uri( '/assets/css/team-section.css' ), array(), '1.0.0' );
 */

/* -----------------------------------------------------------------------
 * 0. Breakpoints used in this file (mobile-first, min-width)
 * -----------------------------------------------------------------------
 *  base   : 0–359px    → extra-small phones (focus area)
 *  360px  : 360–479px  → standard phones
 *  480px  : 480–767px  → large phones / small phablets
 *  768px  : 768–1023px → tablets / portrait iPad
 *  1024px : 1024–1279px→ small laptops
 *  1280px : 1280px+    → desktops / large laptops
 * ---------------------------------------------------------------------- */

/* -----------------------------------------------------------------------
 * 1. Section wrapper — mobile-first base values
 * ---------------------------------------------------------------------- */
 .team-section {
 	--team-radius: 8px;
 	--team-icon-size: 30px;
 	--team-icon-dark: var(--wp--preset--color--secondary);
 	--team-icon-purple: var(--wp--preset--color--primary);
 	--team-gap: 16px;
 	padding-left: 16px;
 	padding-right: 16px;
 }

 @media (min-width: 480px) {
 	.team-section {
 		--team-icon-size: 32px;
 		--team-gap: 20px;
 		padding-left: 24px;
 		padding-right: 24px;
 	}
 }

 @media (min-width: 768px) {
 	.team-section {
 		--team-radius: 10px;
 		--team-icon-size: 34px;
 		--team-gap: 24px;
 		padding-left: 32px;
 		padding-right: 32px;
 	}
 }

 @media (min-width: 1024px) {
 	.team-section {
 		padding: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--70) 0;
 	}
 }

/* -----------------------------------------------------------------------
 * 2. Header: eyebrow badge + framed heading (mobile-first)
 * ---------------------------------------------------------------------- */
 .team-section__header {
 	text-align: center;
 	margin-bottom: 28px;
 	padding: 0 8px;
 }

 @media (min-width: 768px) {
 	.team-section__header {
 		margin-bottom: 40px;
 	}
 }

/* -----------------------------------------------------------------------
 * 3. Grid layout (core Group block, layout type "grid") — mobile-first
 * ---------------------------------------------------------------------- */
 .team-grid.wp-block-group {
 	display: grid;
 	grid-template-columns: minmax(0, 1fr); /* 1 column: base/small phones */
 	gap: var(--team-gap);
 	max-width: var(--wp--style--global--content-size, 1200px);
 	margin-inline: auto;
 }

/* Large phones: 2-up so cards don't feel too tall/empty. */
@media (min-width: 480px) {
	.team-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Tablets: keep 2-up, more breathing room. */
@media (min-width: 768px) {
	.team-grid.wp-block-group {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Small laptops: 3-up. */
@media (min-width: 992px) {
	.team-grid.wp-block-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Desktops/large laptops: full 4-up, matches the reference design. */
@media (min-width: 1200px) {
	.team-grid.wp-block-group {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -----------------------------------------------------------------------
 * 4. Team card — mobile-first
 * ---------------------------------------------------------------------- */
 .team-card {
 	background-color: var(--wp--preset--color--background);
 	border: 1px solid var(--wp--preset--color--border-color, #e5e5e5);
 	border-radius: var(--team-radius);
 	overflow: hidden;
 	padding-bottom: 18px;
 	text-align: center;
 	transition:
 	box-shadow 0.2s ease,
 	transform 0.2s ease;
 	max-width: 360px;
 	margin-inline: auto;
 	width: 100%;
 	transition: all 0.3s;
 }

 @media (min-width: 480px) {
 	.team-card {
 		max-width: none;
 		padding-bottom: 20px;
 	}
 }

 @media (min-width: 768px) {
 	.team-card {
 		padding-bottom: 24px;
 	}
 	.wp-block-social-links .wp-block-social-link.wp-social-link{
 		transition: all 0.3s;
 	} 
 	/* Restore hover lift only where hover is meaningful (non-touch). */
 	.team-card:hover {
 		box-shadow: 0 12px 30px rgba(16, 16, 16, 0.08);
 		transform: translateY(-2px);
 		background-color: var(--wp--preset--color--secondary);
 		border-color: var(--wp--preset--color--secondary);
 	}
 	.team-card:hover .team-card__socials .wp-social-link {
 		background-color: #fff;
 		color: var(--wp--preset--color--secondary);
 	}
 	.team-card:hover .team-card__name {
 		color: var(--wp--preset--color--primary);
 	}
 	.team-card:hover .team-card__role {
 		color: rgba(255, 255, 255, 0.85);
 	}
 	.team-card__socials .wp-social-link:hover {
 		background-color: var(--wp--preset--color--primary);
 	}
 }

 .team-card__image.wp-block-image {
 	margin: 0 0 14px;
 }

 .team-card__image.wp-block-image img {
 	display: block;
 	width: 100%;
 	aspect-ratio: 1 / 1;
 	object-fit: cover;
 }

 .team-card__name.wp-block-heading {
 	margin: 0 0 3px;
 	padding: 0 14px;
 	color: var(--wp--preset--color--heading-color);
 	font-weight: 700;
 	font-size: 16px;
 	transition: all 0.3;
 }

 .team-card__role {
 	margin: 0 0 12px;
 	padding: 0 14px;
 	color: var(--wp--preset--color--foreground);
 	font-size: 12.5px;
 	transition: all 0.3;
 }

 @media (min-width: 480px) {
 	.team-card__image.wp-block-image {
 		margin-bottom: 18px;
 	}
 	.team-card__name.wp-block-heading {
 		font-size: 17px;
 	}
 	.team-card__role {
 		font-size: 13px;
 		margin-bottom: 16px;
 	}
 }

 @media (min-width: 768px) {
 	.team-card__image.wp-block-image {
 		margin-bottom: 20px;
 	}
 	.team-card__name.wp-block-heading {
 		font-size: 18px;
 	}
 	.team-card__role {
 		font-size: 14px;
 		margin-bottom: 18px;
 	}
 }
/* -----------------------------------------------------------------------
 * 5. Social links (core/social-links + core/social-link) — mobile-first
 * ---------------------------------------------------------------------- */
 .team-card__socials.wp-block-social-links {
 	justify-content: center;
 	gap: 8px;
 	margin: 0;
 	padding: 0 14px;
 	flex-wrap: wrap;
 }
 
 .team-card__socials.wp-block-social-links li {
 	width: var(--team-icon-size);
 	height: var(--team-icon-size);
 }
 .team-card__socials .wp-social-link {
 	width: var(--team-icon-size);
 	height: var(--team-icon-size);
 	background-color: var(--team-icon-dark);
 	transition: all 0.3s;
 }
 .team-card__socials .wp-social-link a {
 	color: var(--wp--preset--color--light-color, #fff);
 }

 @media (min-width: 480px) {
 	.team-card__socials.wp-block-social-links {
 		gap: 10px;
 		padding: 0 20px;
 	}
 }

/* -----------------------------------------------------------------------
 * 7. Small-mobile safety net (< 360px, e.g. older/cheap Android devices)
 * Explicitly listed last so it always wins on very narrow viewports —
 * this is the range most templates forget to test.
 * ---------------------------------------------------------------------- */
 @media (max-width: 359px) {
 	.team-section {
 		padding-left: 12px;
 		padding-right: 12px;
 		--team-icon-size: 26px;
 		--team-gap: 12px;
 	}
	.team-card__socials .wp-block-social-link-anchor{
		 padding-top:1px;
	}

 	.team-heading__title.wp-block-heading {
 		font-size: 19px;
 	}

 	.team-heading__frame {
 		padding: 10px 18px;
 	}

 	.team-badge.wp-block-button .wp-block-button__link,
 	.team-badge .wp-block-button__link {
 		padding: 4px 14px;
 		font-size: 11px;
 	}

 	.team-card__name.wp-block-heading {
 		font-size: 15px;
 		padding: 0 10px;
 	}

 	.team-card__role {
 		font-size: 12px;
 		padding: 0 10px;
 	}

 	.team-card__socials.wp-block-social-links {
 		gap: 6px;
 		padding: 0 10px;
 	}
 }
 @media (hover: none) {
 	.team-card:hover {
 		box-shadow: none;
 		transform: none;
 	}
 }

/**
 * Contact Section Block Pattern Stylesheet
 * BEM Naming Convention
 * Responsive Design: Desktop, Laptop, Tablet, Mobile, Small Mobile, Extra Small Mobile
 * Updated: Icon wrapper dark navy + dashed ring, separator lines, card border
 */

/* ========================================
	Root Container & Layout
	======================================== */

	.contact-section {
		position: relative;
		overflow: hidden;
	}

/* ========================================
	Content Layout
	======================================== */

	.contact-section__content {
		display: flex;
		gap: var(--wp--custom--spacing--gap--horizontal, 2rem);
		align-items: flex-start;
		width: 100%;
	}

	.contact-section__sidebar {
		flex: 0 0 40%;
		min-width: 0;
	}

	.contact-section__main {
		flex: 0 0 60%;
		min-width: 0;
	}

/* ========================================
	Info Box (Sidebar) — with visible border card
	======================================== */

	.contact-section__info-box {
		background-color: var(--wp--preset--color--light-color, #fffffe);
		border-radius: 16px;
		padding:25px 20px;
		border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 16%, #ffffff);
		display: flex;
		flex-direction: column;
		gap: 0;
		height: 100%;
		box-sizing: border-box;
		box-shadow: 0px 5px 15px color-mix(in srgb, var(--wp--preset--color--primary) 7%, transparent);
	}

	.contact-section__info-box > *:first-child {
		color: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
		font-size: 14px;
		font-weight: 600;
		margin: 0 0 8px 0;
	}

	.contact-section__info-box h3 {
		color: var(--wp--preset--color--heading-color, #1e262a);
		font-size: 28px !important;
		font-weight: 600;
		line-height: 1.25;
		margin: 0px 0 20px 0 !important;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
	}

	.contact-section__info-box > p {
		color: var(--wp--preset--color--foreground, #6c6c6c);
		font-size: 16px !important;
		line-height: 1.2;
		margin: 0 0 15px 0 !important;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
	}

/* ========================================
	Contact Items — with separator lines
	======================================== */

	.contact-section__contact-item {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-bottom: 0 !important;
		margin: 0;
		padding-top: 28px;
		padding-bottom: 28px;
		border-bottom: 1px solid #ececec;
	}

	.contact-section__contact-item:first-of-type {
		padding-top: 0;
	}

	.contact-section__contact-item:last-of-type {
		border-bottom: none;
		padding-bottom: 0;
	}

	.contact-section__contact-item-inner {
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100%;
	}

/* ========================================
	Icon Wrapper — Dark navy + dashed purple outer ring
	======================================== */

	.contact-section__icon-wrapper {
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		min-width: 60px;
		background-color: var(--wp--preset--color--secondary, var(--wp--preset--color--secondary));
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		outline: 1px dashed var(--wp--preset--color--primary, var(--wp--preset--color--primary));
		outline-offset: 3px;
		box-shadow: none;
		transition: all 0.3s ease;
	}

	.contact-section__icon-wrapper:hover {
		outline-offset: 7px;
		transform: translateY(-2px);
	}

	.contact-section__icon {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.contact-section__icon img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		filter: brightness(0) invert(1);
	}

/* ========================================
	Contact Content
	======================================== */

	.contact-section__contact-content {
		display: flex;
		flex-direction: column;
		gap: 4px;
		flex: 1;
		min-width: 0;
	}

	.contact-section__contact-content h4 {
		color: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
		font-size: 16px;
		font-weight: 600;
		line-height: 1.5;
		margin: 0;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
	}

	.contact-section__contact-content p {
		color: var(--wp--preset--color--heading-color, #1e262a);
		font-size: 18px;
		font-weight: 600;
		line-height: 1.4;
		margin: 0;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
		word-break: break-word;
	}

/* ========================================
	Map Section
	======================================== */

	.contact-section__map-section {
		display: flex;
		flex-direction: column;
		gap: 32px;
		width: 100%;
	}

	.contact-section__map-container {
		width: 100%;
		border-radius: 16px;
		padding: 40px;
		min-height: 320px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.contact-section__map-image {
		width: 100%;
		height: 320px;
		margin: 0;
	}

	.contact-section__map-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 8px;
		display: block;
	}

/* ========================================
	Countries Section
	======================================== */

	.contact-section__main .contact-section__countries {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 24px;
		justify-content: space-between;
		width: 100%;
		/* padding: 20px; */
	}
	@media (min-width: 576px) {
		.contact-section__main .contact-section__countries {
			grid-template-columns: repeat(2, 1fr);}
	}
	@media (min-width: 1200px) {
		.contact-section__main .contact-section__countries {
			grid-template-columns: repeat(3, 1fr);}
	}

/* ========================================
	Country Card
	======================================== */

	.contact-section__country-card {
		flex: 1;
		background-color: var(--wp--preset--color--light-color, #fffffe);
		border-radius: 12px;
		padding:25px 20px;
		box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		transition: all 0.3s ease;
		box-sizing: border-box;
		cursor: pointer;
	}

	.contact-section__country-card:hover,
	.contact-section__country-card.is-active {
		box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.12);
		transform: translateY(-4px);
		background-color: var(--wp--preset--color--secondary, var(--wp--preset--color--secondary));
	}
	.contact-section__country-card:hover h4,
	.contact-section__country-card.is-active h4,
	.contact-section__country-card:hover p,
	.contact-section__country-card.is-active p {
		color: #fff !important;
	}

	.contact-section__country-card h4 {
		color: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
		font-size: 20px;
		font-weight: 600;
		line-height: 1.3;
		margin: 0;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
	}

	.contact-section__country-card p {
		color: var(--wp--preset--color--foreground, #6c6c6c);
		font-size: 14px;
		line-height: 1.6;
		margin: 12px 0 0 0;
		font-family: var(--wp--preset--font-family--poppins, "Poppins", sans-serif);
	}

	.contact-section__country-card figure {
		margin: 0 0 16px 0;
		width: 80px;
		height: 80px;
		flex-shrink: 0;
	}

	.contact-section__country-card img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
		display: block;
	}

/* ========================================
	Tablet Breakpoint (768px - 1024px)
	======================================== */

	@media (max-width: 1024px) {
		.contact-section {
			padding-left: var(--wp--custom--spacing--outer, 1.5rem);
			padding-right: var(--wp--custom--spacing--outer, 1.5rem);
		}

		.contact-section__content {
			gap: var(--wp--custom--spacing--gap--horizontal, 1.5rem);
		}

		.contact-section__info-box {
			padding: 32px;
		}

		.contact-section__info-box h3 {
			font-size: 28px;
		}

		.contact-section__icon-wrapper {
			width: 52px;
			height: 52px;
			min-width: 52px;
			outline-offset: 4px;
		}

		.contact-section__contact-item {
			padding-top: 24px;
			padding-bottom: 24px;
		}

		.contact-section__countries {
			gap: 20px;
		}

		.contact-section__country-card {
			padding: 28px;
			min-width: 180px;
		}

		.contact-section__country-card h4 {
			font-size: 18px;
		}

		.contact-section__country-card p {
			font-size: 13px;
		}

		.contact-section__country-card figure {
			width: 70px;
			height: 70px;
		}

		.contact-section__map-container {
			padding: 32px;
			min-height: 280px;
		}

		.contact-section__map-image {
			height: 280px;
		}
	}

/* ========================================
	Mobile Breakpoint (480px - 767px)
	======================================== */

	@media (max-width: 767px) {
		.contact-section {
			padding-top: 3rem;
			padding-bottom: 3rem;
			padding-left: var(--wp--custom--spacing--outer, 1.5rem);
			padding-right: var(--wp--custom--spacing--outer, 1.5rem);
		}

		.contact-section__header {
			margin-bottom: 2rem;
		}

		.contact-section__content {
			flex-direction: column;
			gap: 2rem;
		}

		.contact-section__sidebar {
			flex: 1 1 100%;
			width: 100%;
		}

		.contact-section__main {
			flex: 1 1 100%;
			width: 100%;
		}

		.contact-section__info-box {
			padding: 24px;
		}

		.contact-section__info-box h3 {
			font-size: 24px;
			margin-bottom: 16px;
		}

		.contact-section__info-box > p {
			font-size: 15px;
			margin-bottom: 20px;
		}

		.contact-section__contact-item {
			padding-top: 20px;
			padding-bottom: 20px;
		}

		.contact-section__contact-item-inner {
			gap: 16px;
		}

		.contact-section__icon-wrapper {
			width: 50px;
			height: 50px;
			min-width: 50px;
			outline-offset: 4px;
		}

		.contact-section__icon {
			width: 20px;
			height: 20px;
		}

		.contact-section__contact-content h4 {
			font-size: 14px;
		}

		.contact-section__contact-content p {
			font-size: 16px;
		}

		.contact-section__map-section {
			gap: 24px;
		}

		.contact-section__map-container {
			padding: 24px;
			min-height: 250px;
		}

		.contact-section__map-image {
			height: 250px;
		}

		.contact-section__countries {
			flex-direction: column;
			gap: 16px;
		}

		.contact-section__country-card {
			flex: 1 1 100%;
			width: 100%;
			padding: 24px;
			min-width: unset;
		}

		.contact-section__country-card h4 {
			font-size: 16px;
		}

		.contact-section__country-card p {
			font-size: 13px;
			margin-top: 10px;
		}

		.contact-section__country-card figure {
			width: 60px;
			height: 60px;
			margin-bottom: 12px;
		}
	}

/* ========================================
	Small Mobile Breakpoint (320px - 479px)
	======================================== */

	@media (max-width: 479px) {
		.contact-section {
			padding-top: 2rem;
			padding-bottom: 2rem;
			padding-left: var(--wp--custom--spacing--outer, 1rem);
			padding-right: var(--wp--custom--spacing--outer, 1rem);
		}

		.contact-section__header {
			margin-bottom: 1.5rem;
		}

		.contact-section__info-box {
			padding: 20px;
		}

		.contact-section__info-box h3 {
			font-size: 20px;
			margin-bottom: 12px;
			line-height: 1.2;
		}

		.contact-section__info-box > p {
			font-size: 14px;
			margin-bottom: 16px;
			line-height: 1.5;
		}

		.contact-section__contact-item {
			padding-top: 16px;
			padding-bottom: 16px;
		}

		.contact-section__contact-item-inner {
			gap: 14px;
			flex-direction: row;
			align-items: center;
			text-align: left;
		}

		.contact-section__icon-wrapper {
			width: 45px;
			height: 45px;
			min-width: 45px;
			outline-offset: 3px;
		}

		.contact-section__icon {
			width: 18px;
			height: 18px;
		}

		.contact-section__contact-content {
			gap: 2px;
			align-items: flex-start;
		}

		.contact-section__contact-content h4 {
			font-size: 13px;
		}

		.contact-section__contact-content p {
			font-size: 14px;
			font-weight: 600;
			word-break: break-word;
		}

		.contact-section__map-section {
			gap: 20px;
		}

		.contact-section__map-container {
			padding: 16px;
			min-height: 200px;
		}

		.contact-section__map-image {
			height: 200px;
		}

		.contact-section__countries {
			flex-direction: column;
			gap: 12px;
		}

		.contact-section__country-card {
			flex: 1 1 100%;
			width: 100%;
			padding: 20px;
			min-width: unset;
		}

		.contact-section__country-card h4 {
			font-size: 15px;
		}

		.contact-section__country-card p {
			font-size: 12px;
			margin-top: 8px;
			line-height: 1.4;
		}

		.contact-section__country-card figure {
			width: 50px;
			height: 50px;
			margin-bottom: 10px;
		}
	}

/* ========================================
	Extra Small Mobile (320px and below)
	======================================== */

	@media (max-width: 319px) {
		.contact-section {
			padding-top: 1.5rem;
			padding-bottom: 1.5rem;
			padding-left: 0.75rem;
			padding-right: 0.75rem;
		}

		.contact-section__info-box {
			padding: 16px;
		}

		.contact-section__info-box h3 {
			font-size: 18px;
			margin-bottom: 10px;
		}

		.contact-section__icon-wrapper {
			width: 40px;
			height: 40px;
			min-width: 40px;
			outline-offset: 3px;
		}

		.contact-section__country-card {
			padding: 16px;
		}

		.contact-section__country-card h4 {
			font-size: 14px;
		}

		.contact-section__country-card figure {
			width: 45px;
			height: 45px;
		}
	}

/* ========================================
	Accessibility
	======================================== */

	@media (prefers-reduced-motion: reduce) {
		.contact-section__icon-wrapper,
		.contact-section__country-card {
			transition: none;
		}
	}

/* ========================================
	High Resolution Display (Retina)
	======================================== */

	@media (min-width: 1921px) {
		.contact-section {
			padding-left: var(--wp--custom--spacing--outer, 2rem);
			padding-right: var(--wp--custom--spacing--outer, 2rem);
		}

		.contact-section__title {
			font-size: 56px;
			padding: 32px 48px;
		}

		.contact-section__info-box {
			padding: 48px;
		}

		.contact-section__info-box h3 {
			font-size: 42px;
		}
	}

/* ========================================
	Print Styles
	======================================== */

	@media print {
		.contact-section {
			background-color: transparent;
			box-shadow: none;
		}

		.contact-section__icon-wrapper,
		.contact-section__country-card {
			box-shadow: none;
			transform: none;
			outline: 1px dashed var(--wp--preset--color--primary);
		}

		.contact-section__title {
			border-style: solid;
			border-width: 1px;
		}
	}

/* =========================================================
	Contact Form 7 — Modern Design
	========================================================= */

/* ---------------------------------------------------------
	Inner Flex Row
	--------------------------------------------------------- */
	.contact-section__inner {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		min-height: 100vh;
		width: 100%;
		max-width: 1100px !important;
		gap: 0 !important;
	}

/* ---------------------------------------------------------
	Form Column
	--------------------------------------------------------- */
	.contact-section__form-col {
		flex: 0 0 55% !important;
		max-width: 55% !important;
		border-radius: 24px !important;
		border: 1px solid var(--wp--preset--color--primary);
		padding: 50px 20px !important;
		box-sizing: border-box !important;
		margin: 80px 0 80px 0 !important;
		position: relative;
		z-index: 1;
		backdrop-filter: blur(10px);
	}

/* ---------------------------------------------------------
	Section Heading
	--------------------------------------------------------- */
	.contact-section__title {
		color: #ffffff !important;
		font-family: var(--wp--preset--font-family--poppins) !important;
		font-size: clamp(28px, 3.5vw, 40px) !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		margin-top: 0 !important;
		margin-bottom: clamp(40px, 4vw, 40px) !important;
		letter-spacing: 1px;
	}

/* ---------------------------------------------------------
	Contact Form 7 — Wrapper Reset
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7,
	.contact-section__form-col .wpcf7-form {
		margin: 0;
		padding: 0;
	}

/* ---------------------------------------------------------
	CF7 — Form Layout: Two-column grid
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-form {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: clamp(16px, 2vw, 24px);
	}

	.contact-section__form-col .wpcf7-form > p {
		margin: 0;
		padding: 0;
	}

/* Message field — full width */
.contact-section__form-col .wpcf7-form > p:nth-child(4),
.contact-section__form-col .wpcf7-form > p:has(textarea) {
	grid-column: 1 / -1;
}

/* Submit button — full width */
.contact-section__form-col .wpcf7-form > p:has([type="submit"]) {
	grid-column: 1 / -1;
	margin-top: clamp(12px, 2vw, 20px);
}

/* ---------------------------------------------------------
	CF7 — All Input / Select / Textarea Fields
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-form input[type="text"],
	.contact-section__form-col .wpcf7-form input[type="email"],
	.contact-section__form-col .wpcf7-form input[type="tel"],
	.contact-section__form-col .wpcf7-form input[type="number"],
	.contact-section__form-col .wpcf7-form input[type="url"],
	.contact-section__form-col .wpcf7-form select,
	.contact-section__form-col .wpcf7-form textarea {
		width: 100%;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.05);
		border: 1.5px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
		border-radius: 12px;
		color: #ffffff;
		font-family: var(--wp--preset--font-family--poppins);
		font-size: 16px;
		font-weight: 400;
		line-height: 1.6;
		padding: 16px 20px;
		outline: none;
		transition: all 0.3s ease;
		-webkit-appearance: none;
		appearance: none;
		margin-bottom: 0;
	}

/* Placeholder text */
.contact-section__form-col .wpcf7-form input::placeholder,
.contact-section__form-col .wpcf7-form textarea::placeholder,
.contact-section__form-col .wpcf7-form select {
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
}

/* Focus states */
.contact-section__form-col .wpcf7-form input[type="text"]:focus,
.contact-section__form-col .wpcf7-form input[type="email"]:focus,
.contact-section__form-col .wpcf7-form input[type="tel"]:focus,
.contact-section__form-col .wpcf7-form input[type="number"]:focus,
.contact-section__form-col .wpcf7-form input[type="url"]:focus,
.contact-section__form-col .wpcf7-form select:focus,
.contact-section__form-col .wpcf7-form textarea:focus {
	border-color: var(--wp--preset--color--primary);
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	outline: none;
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------
	CF7 — Select Dropdown Arrow
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-form select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 16px center;
		padding-right: 40px;
		cursor: pointer;
	}

	.contact-section__form-col .wpcf7-form select option {
		background-color: var(--wp--preset--color--secondary);
		color: rgba(255, 255, 255, 0.9);
		padding: 8px 12px;
	}

/* ---------------------------------------------------------
	CF7 — Textarea (Message)
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-form textarea {
		resize: vertical;
		min-height: 160px;
		height: 200px;
		font-family: var(--wp--preset--font-family--poppins);
	}
	.contact-section__form-col .wpcf7-form label {
		color: #ffffff !important;
		font-family: var(--wp--preset--font-family--poppins);
	}
/* ---------------------------------------------------------
	CF7 — Submit Button
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-form input[type="submit"],
	.contact-section__form-col .wpcf7-form .wpcf7-submit {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary) 100%);
		color: #ffffff !important;
		font-family: var(--wp--preset--font-family--poppins) !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		border-radius: 50px !important;
		padding: 16px 32px 16px 32px !important;
		border: none !important;
		cursor: pointer;
		line-height: 1.2 !important;
		text-decoration: none !important;
		margin-top: 0;
		transition: all 0.3s ease;
		-webkit-appearance: none;
		appearance: none;
		width: auto;
		box-shadow: 0 8px 24px color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
		position: relative;
		overflow: hidden;
	}

/* Button hover state */
.contact-section__form-col .wpcf7-form input[type="submit"]:hover,
.contact-section__form-col .wpcf7-form .wpcf7-submit:hover {
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 88%, #ffffff) 100%);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
	transform: translateY(-2px);
}

/* Button active state */
.contact-section__form-col .wpcf7-form input[type="submit"]:active,
.contact-section__form-col .wpcf7-form .wpcf7-submit:active {
	transform: translateY(0);
}

/* Button focus state */
.contact-section__form-col .wpcf7-form input[type="submit"]:focus-visible,
.contact-section__form-col .wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

/* Arrow icon after submit button */
.contact-section__form-col .wpcf7-form input[type="submit"]::after {
	content: "→";
	display: inline-block;
	font-size: 20px;
	font-weight: 700;
	transition: transform 0.3s ease;
}

.contact-section__form-col .wpcf7-form input[type="submit"]:hover::after {
	transform: translateX(4px);
}

/* ---------------------------------------------------------
	CF7 — Validation Error Messages
	--------------------------------------------------------- */
	.contact-section__form-col .wpcf7-not-valid-tip {
		color: #ff6b6b;
		font-size: 12px;
		font-family: var(--wp--preset--font-family--poppins);
		margin-top: 6px;
		display: block;
		font-weight: 500;
	}

	.contact-section__form-col .wpcf7-not-valid {
		border-color: #ff6b6b !important;
		background-color: rgba(255, 107, 107, 0.08) !important;
	}

/* CF7 response output */
.contact-section__form-col .wpcf7-response-output {
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 16px;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	background-color: rgba(255, 255, 255, 0.05);
	grid-column: 1 / -1;
}

.contact-section__form-col .wpcf7-mail-sent-ok {
	border-color: var(--wp--preset--color--primary-shade-one) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-shade-one) 15%, transparent) !important;
	color: var(--wp--preset--color--primary-shade-one) !important;
}

.contact-section__form-col .wpcf7-mail-sent-ng,
.contact-section__form-col .wpcf7-spam-blocked {
	border-color: #ff6b6b !important;
	background-color: rgba(255, 107, 107, 0.12) !important;
	color: #ff9999 !important;
}

/* ---------------------------------------------------------
	Image Column (if used)
	--------------------------------------------------------- */
	.contact-section__image-col {
		flex: 0 0 45% !important;
		max-width: 45% !important;
		overflow: hidden;
		position: relative;
	}

	.contact-section__img {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.contact-section__img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center top;
		display: block;
	}

/* =========================================================
	RESPONSIVE BREAKPOINTS
	========================================================= */

/* Laptop 1366px */
@media (max-width: 1440px) {
	.contact-section__form-col {
		flex: 0 0 54% !important;
		max-width: 54% !important;
	}
	.contact-section__image-col {
		flex: 0 0 46% !important;
		max-width: 46% !important;
	}
}

/* Tablet 1024px — stack vertically */
@media (max-width: 1024px) {
	.contact-section__inner {
		flex-direction: column !important;
		min-height: auto !important;
	}
	.contact-section__form-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin: 24px 16px !important;
	}
	.contact-section__form-col .wpcf7-form {
		grid-template-columns: 1fr 1fr;
	}
	.contact-section__image-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		min-height: 360px;
	}
	.contact-section__img img {
		object-position: center 20%;
	}
}

/* Tablet Portrait 768px */
@media (max-width: 768px) {
	.contact-section__form-col {
		margin: 30px 20px !important;
		padding: 36px 24px !important;
		border-radius: 20px !important;
	}
	.contact-section__title {
		font-size: clamp(26px, 5vw, 36px) !important;
		margin-bottom: 28px !important;
	}
	.contact-section__form-col .wpcf7-form {
		grid-template-columns: 1fr;
		gap: clamp(14px, 2vw, 18px);
	}
	.contact-section__form-col .wpcf7-form > p:has(textarea),
	.contact-section__form-col .wpcf7-form > p:has([type="submit"]) {
		grid-column: 1;
	}
	.contact-section__image-col {
		min-height: 280px;
	}
}

/* Small Mobile 480px */
@media (max-width: 480px) {
	.contact-section__form-col {
		padding: 28px 18px !important;
		border-radius: 16px !important;
	}
	.contact-section__title {
		font-size: 28px !important;
		margin-bottom: 24px !important;
	}
	.contact-section__form-col .wpcf7-form input[type="text"],
	.contact-section__form-col .wpcf7-form input[type="email"],
	.contact-section__form-col .wpcf7-form input[type="tel"],
	.contact-section__form-col .wpcf7-form select,
	.contact-section__form-col .wpcf7-form textarea {
		padding: 14px 16px;
		font-size: 15px;
		border-radius: 10px;
	}
	.contact-section__form-col .wpcf7-form input[type="submit"],
	.contact-section__form-col .wpcf7-form .wpcf7-submit {
		font-size: 16px !important;
		padding: 14px 24px !important;
	}
	.contact-section__image-col {
		min-height: 220px;
	}
}

/* Extra Small Mobile 360px */
@media (max-width: 360px) {
	.contact-section__form-col {
		margin: 12px 6px !important;
		padding: 24px 14px !important;
		border-radius: 14px !important;
	}
	.contact-section__title {
		font-size: 24px !important;
		margin-bottom: 20px !important;
	}
	.contact-section__form-col .wpcf7-form {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.contact-section__form-col .wpcf7-form input[type="text"],
	.contact-section__form-col .wpcf7-form input[type="email"],
	.contact-section__form-col .wpcf7-form input[type="tel"],
	.contact-section__form-col .wpcf7-form select,
	.contact-section__form-col .wpcf7-form textarea {
		padding: 12px 14px;
		font-size: 14px;
		border-radius: 9px;
	}
	.contact-section__form-col .wpcf7-form textarea {
		min-height: 120px;
		height: 150px;
	}
	.contact-section__form-col .wpcf7-form input[type="submit"],
	.contact-section__form-col .wpcf7-form .wpcf7-submit {
		font-size: 14px !important;
		padding: 12px 16px !important;
	}
	.contact-section__image-col {
		min-height: 180px;
	}
}

/* =========================================================
	OVERFLOW SAFETY
	========================================================= */
	.contact-section,
	.contact-section__inner,
	.contact-section__form-col,
	.contact-section__image-col,
	.contact-section__form-col .wpcf7,
	.contact-section__form-col .wpcf7-form {
		max-width: 100%;
		box-sizing: border-box;
	}
/* ==========================================================
	Contact Map Section
	BEM Naming
	========================================================== */
	.materialai-map__embed {
		position: relative;
		width: 100%;
		height: 600px;
		overflow: hidden;
		background: var(--wp--preset--color--neutral-100, #f5f5f5);
		box-shadow: var(--wp--preset--shadow--natural);
	}

	.materialai-map__embed iframe {
		display: block;
		width: 100%;
		height: 100%;
		border: 0;
		filter: saturate(105%);
	}
	.materialai-map,
	.materialai-map__wrapper,
	.materialai-map__embed {
		margin: 0 !important;
		padding: 0 !important;
	}
/* ==========================================================
	Large Desktop
	========================================================== */

	@media (max-width: 1600px) {
		.materialai-map__embed {
			height: 680px;
		}
	}

/* ==========================================================
	Laptop
	========================================================== */

	@media (max-width: 1440px) {
		.materialai-map {
			padding-block: var(--wp--preset--spacing--70);
		}
		.materialai-map__embed {
			height: 620px;
		}
	}

/* ==========================================================
	Tablet Landscape
	========================================================== */

	@media (max-width: 1024px) {
		.materialai-map {
			padding-block: var(--wp--preset--spacing--60);
		}
		.materialai-map__embed {
			height: 520px;
			border-radius: 20px;
		}
	}

/* ==========================================================
	Tablet
	========================================================== */

	@media (max-width: 768px) {
		.materialai-map {
			padding-block: var(--wp--preset--spacing--50);
		}
		.materialai-map__embed {
			height: 420px;
			border-radius: 18px;
		}
	}

/* ==========================================================
	Mobile
	========================================================== */

	@media (max-width: 480px) {
		.materialai-map {
			padding-block: var(--wp--preset--spacing--40);
		}

		.materialai-map__embed {
			height: 320px;
			border-radius: 16px;
		}
	}

/* ==========================================================
	Extra Small
	========================================================== */

	@media (max-width: 320px) {
		.materialai-map__embed {
			height: 260px;
			border-radius: 12px;
		}
	}

/* contact cta */
.materialai-ai-cta {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	padding: 0;
	isolation: isolate;
}

/*==================================================
Main Heading
==================================================*/

.materialai-ai-cta__heading {
	margin: 0 0 34px;
	max-width: 860px;
	color: var(--wp--preset--color--secondary);
	font-size: clamp(56px, 5vw, 62px);
	font-weight: 800;
	line-height: 1.1;
	text-wrap: balance;
}

/*==================================================
Description
==================================================*/

.materialai-ai-cta__description {
	max-width: 900px;
	margin: 0 auto 48px;
	color: var(--wp--preset--color--secondary);
	opacity: 0.85;
	font-size: 22px;
	line-height: 1.8;
}

/*==================================================
Button
==================================================*/

.materialai-ai-cta__button {
	margin: 0;
}
.materialai-ai-cta__button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	padding: 0 3px 0 0;
	height: 70px;
	min-width: 220px;
	border-radius: 60px;
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--wp--preset--color--primary);
	overflow: hidden;
	transition: 0.35s ease;
}
.materialai-ai-cta__button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-left: 20px;
	border-radius: 50%;
	background: #fff;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 600;
	transition: 0.35s ease;
}
.materialai-ai-cta__button .wp-block-button__link:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 35px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}
/*.materialai-ai-cta__button .wp-block-button__link:hover .materialai-ai-cta__button-icon{
	transform:translateX(5px);
}*/

/*==================================================
Laptop
==================================================*/

@media (max-width: 1440px) {
	.materialai-ai-cta__heading {
		font-size: 70px;
	}

	.materialai-ai-cta__description {
		font-size: 20px;
		max-width: 840px;
	}
}

/*==================================================
Tablet
==================================================*/

@media (max-width: 1024px) {
	.materialai-ai-cta {
		padding: 0;
	}

	.materialai-ai-cta__container {
		padding-inline: var(--wp--preset--spacing--30);
	}
	.materialai-ai-cta__title-wrap {
		gap: 18px;
		margin-bottom: 28px;
	}

	.materialai-ai-cta__line {
		width: 60px;
		height: 28px;
	}

	.materialai-ai-cta__line:after {
		box-shadow:
		40px 0 0 var(--wp--preset--color--secondary),
		40px 28px 0 var(--wp--preset--color--secondary);
	}

	.materialai-ai-cta__eyebrow {
		font-size: 30px;
	}

	.materialai-ai-cta__heading {
		max-width: 720px;
		font-size: 58px;
		line-height: 1.15;
		letter-spacing: -1px;
		margin-bottom: 26px;
	}

	.materialai-ai-cta__description {
		max-width: 700px;
		font-size: 18px;
		line-height: 1.8;
		margin-bottom: 40px;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		height: 60px;
		min-width: 195px;
		font-size: 20px;
	}

	.materialai-ai-cta__button-icon {
		width: 60px;
		height: 60px;
		font-size: 22px;
		margin-left: 18px;
	}
}

/*==================================================
Mobile
==================================================*/

@media (max-width: 768px) {
	.materialai-ai-cta__container {
		padding-inline: 24px;
	}
	.materialai-ai-cta__title-wrap {
		gap: 12px;
		margin-bottom: 24px;
		flex-wrap: nowrap;
	}

	.materialai-ai-cta__line {
		width: 42px;
		height: 22px;
	}
	.materialai-ai-cta__eyebrow {
		font-size: 22px;
	}

	.materialai-ai-cta__heading {
		max-width: 100%;
		font-size: 44px;
		line-height: 1.2;
		margin-bottom: 22px;
	}

	.materialai-ai-cta__description {
		font-size: 17px;
		line-height: 1.8;
		margin-bottom: 34px;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		height: 56px;
		min-width: 180px;
		font-size: 18px;
	}

	.materialai-ai-cta__button-icon {
		width: 56px;
		height: 56px;
		font-size: 20px;
		margin-left: 16px;
	}
}

/*==================================================
480px
==================================================*/

@media (max-width: 480px) {
	.materialai-ai-cta__container {
		padding-inline: 20px;
	}

	.materialai-ai-cta__title-wrap {
		gap: 10px;
	}
	.materialai-ai-cta__heading {
		font-size: 36px;
		line-height: 1.25;
		letter-spacing: 0;
	}

	.materialai-ai-cta__description {
		font-size: 16px;
		line-height: 1.7;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		min-width: 170px;
		height: 54px;
		font-size: 17px;
	}

	.materialai-ai-cta__button-icon {
		width: 45px;
		height: 45px;
		margin-left: 15px;
		flex-shrink: 0;
	}
}

/*==================================================
320px
==================================================*/

@media (max-width: 320px) {
	.materialai-ai-cta__container {
		padding-inline: 16px;
	}
	.materialai-ai-cta__heading {
		font-size: 30px;
		line-height: 1.3;
		word-break: break-word;
	}

	.materialai-ai-cta__description {
		font-size: 15px;
		line-height: 1.65;
		margin-bottom: 28px;
	}

	.materialai-ai-cta__button {
		width: 100%;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		height: 52px;
		justify-content: space-between;
		padding-left: 22px;
	}

	.materialai-ai-cta__button-icon {
		width: 52px;
		height: 52px;
		margin-left: 12px;
		flex-shrink: 0;
	}
}
/*==================================================
Tablet
==================================================*/

@media (max-width: 1024px) {
	.materialai-ai-cta {
		padding: 0;
	}

	.materialai-ai-cta__container {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.materialai-ai-cta__title-wrap {
		gap: 18px;
		margin-bottom: 28px;
	}

	.materialai-ai-cta__heading {
		max-width: 720px;
		font-size: 58px;
		line-height: 1.15;
		letter-spacing: -1px;
		margin-bottom: 26px;
	}

	.materialai-ai-cta__description {
		max-width: 700px;
		font-size: 18px;
		line-height: 1.8;
		margin-bottom: 40px;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		height: 60px;
		min-width: 195px;
		font-size: 20px;
	}

	.materialai-ai-cta__button-icon {
		width: 60px;
		height: 60px;
		font-size: 22px;
		margin-left: 18px;
	}
}

/*==================================================
Mobile
==================================================*/

@media (max-width: 768px) {
	.materialai-ai-cta__container {
		padding-inline: 24px;
	}

	.materialai-ai-cta__title-wrap {
		gap: 12px;
		margin-bottom: 24px;
		flex-wrap: nowrap;
	}

	.materialai-ai-cta__heading {
		max-width: 100%;
		font-size: 44px;
		line-height: 1.2;
		margin-bottom: 22px;
	}

	.materialai-ai-cta__description {
		font-size: 17px;
		line-height: 1.8;
		margin-bottom: 34px;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		height: 56px;
		min-width: 180px;
		font-size: 18px;
	}

	.materialai-ai-cta__button-icon {
		width: 56px;
		height: 56px;
		font-size: 20px;
		margin-left: 16px;
	}
}

/*==================================================
480px
==================================================*/

@media (max-width: 480px) {
	.materialai-ai-cta__container {
		padding-inline: 20px;
	}

	.materialai-ai-cta__title-wrap {
		gap: 10px;
	}
	.materialai-ai-cta__heading {
		font-size: 36px;
		line-height: 1.25;
		letter-spacing: 0;
	}

	.materialai-ai-cta__description {
		font-size: 16px;
		line-height: 1.7;
	}

	.materialai-ai-cta__button .wp-block-button__link {
		min-width: 170px;
		height: 54px;
		font-size: 17px;
	}
	.materialai-ai-cta__button-icon {
		width: 45px;
		height: 45px;
		margin-left: 15px;
		flex-shrink: 0;
	}
}

/*==================================================
320px
==================================================*/

@media (max-width: 320px) {
	.materialai-ai-cta__container {
		padding-inline: 16px;
	}
	.materialai-ai-cta__heading {
		font-size: 30px;
		line-height: 1.3;
		word-break: break-word;
	}
	.materialai-ai-cta__description {
		font-size: 15px;
		line-height: 1.65;
		margin-bottom: 28px;
	}
	.materialai-ai-cta__button {
		width: 100%;
	}
	.materialai-ai-cta__button .wp-block-button__link {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		height: 52px;
		justify-content: space-between;
		padding-left: 22px;
	}
}
/* ==============================================
	MATERIALAI PRO — DESIGN OPTIMIZED GRID
	============================================== */
/* ------------------------------------------
	2. TABS WRAPPER — Pill Container Style
	------------------------------------------ */
	.maip-projects-grid .maip-tab-box {
		margin-bottom: 40px !important;
		display: flex;
		justify-content: center;
	}

/* Pill-shaped tab container */
.maip-projects-grid .maip-tabs-pills {
	display: inline-flex !important;
	flex-wrap: nowrap;
	gap: 0 !important;
	justify-content: center;
	padding: 6px 10px !important;
	background:var(--wp--preset--color--secondary) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent) !important;
	border-radius: 50px !important;
	align-items: center;
	overflow: hidden;
}

/* ------------------------------------------
3. INDIVIDUAL TAB BUTTONS — Clean Look
------------------------------------------ */
.maip-projects-grid .maip-tabs-pills .maip-tab {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50px !important;
	flex-shrink: 0;
}

.maip-projects-grid .maip-tabs-pills .maip-tab .wp-block-button__link {
	border-radius: 50px !important;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border: none !important;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.75) !important;
	box-shadow: none !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	text-decoration: none !important;
	letter-spacing: 0.3px;
}

/* Active tab — Purple highlight */
.maip-projects-grid
.maip-tabs-pills
.maip-tab.maip-tab-active
.wp-block-button__link,
.maip-projects-grid
.maip-tabs-pills
.maip-tab.is-style-fill.maip-tab-active
.wp-block-button__link {
	background:var(--wp--preset--color--primary) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 15px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) !important;
}

/* Hover on inactive tabs */
.maip-projects-grid
.maip-tabs-pills
.maip-tab:not(.maip-tab-active)
.wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent) !important;
	color: #ffffff !important;
}

/* ------------------------------------------
	4. GRID CONTAINER — FLEXIBLE COLUMNS
	------------------------------------------ */
	.maip-projects-grid .maip-project-grid-2col {
		display: grid !important;
		grid-template-columns: repeat(var(--maip-columns, 2), 1fr) !important;
		gap: 24px !important;
		margin-top: 40px !important;
		width: 100% !important;
		box-sizing: border-box;
	}

/* Override WP block wrapper widths */
.maip-projects-grid .maip-project-grid-2col > .wp-block-group {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ------------------------------------------
	5. CARD STYLES — Design Match
	------------------------------------------ */
	.maip-projects-grid .maip-project-grid-2col .maip-project-card {
		width: 100% !important;
		margin: 0 !important;
		transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
	}

/* Hover card lift */
.maip-projects-grid .maip-project-grid-2col .maip-project-card:hover {
	transform: translateY(-4px);
}

.maip-projects-grid .maip-project-grid-2col .maip-card-image {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	width: 100% !important;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 71%, #000000);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Image */
.maip-projects-grid .maip-project-grid-2col .maip-card-img {
	margin: 0 !important;
	width: 100% !important;
	display: block;
}

.maip-projects-grid .maip-project-grid-2col .maip-card-img img {
	width: 100% !important;
	object-fit: cover !important;
	display: block;
	border-radius: 0;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.maip-projects-grid
.maip-project-grid-2col
.maip-card-image:hover
.maip-card-img
img {
	transform: scale(1.05);
}

/* Category badge — top left */
.maip-projects-grid .maip-project-grid-2col .maip-card-type {
	position: absolute !important;
	top: 14px !important;
	left: 14px !important;
	margin: 0 !important;
	padding: 5px 12px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.6px;
	border-radius: 5px !important;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 80%, transparent) !important;
	backdrop-filter: blur(10px);
	color: #ffffff !important;
	z-index: 2;
}

/* Info bar — bottom overlay with gradient */
.maip-projects-grid .maip-project-grid-2col .maip-card-info {
	position: absolute !important;
	bottom: 30px !important;
	left: 30px !important;
	right: 30px !important;
	padding: 16px 18px !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: flex-end !important;
	gap: 12px;
	backdrop-filter: blur(4px);
}

.maip-projects-grid .maip-project-grid-2col .maip-card-info h4 {
	margin: 0 0 3px !important;
	font-size: 17px !important;
	font-weight: 600;
	line-height: 1.3;
	color: #fff !important;
	letter-spacing: 0.2px;
}

.maip-projects-grid.columns-4 .maip-card-info h4 {
	margin: 0 0 3px !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1.3;
	color: #fff !important;
	letter-spacing: 0.2px;
}

.maip-projects-grid .maip-project-grid-2col .maip-card-info p {
	margin: 0 !important;
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.65) !important;
	font-weight: 500;
}

/* Arrow button */
.maip-projects-grid
.maip-project-grid-2col
.maip-arrow-btn
.wp-block-button__link {
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	font-size: 18px !important;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 84%, #ffffff) 100%) !important;
	color: #fff !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) !important;
	border: none !important;
}

.maip-projects-grid.columns-4 .maip-arrow-btn .wp-block-button__link {
	width: 25px !important;
	height: 25px !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
	font-size: 12px !important;
	flex-shrink: 0;
	background: linear-gradient(135deg, var(--wp--preset--color--primary) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 84%, #ffffff) 100%) !important;
	color: #fff !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 15px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) !important;
	border: none !important;
}

.maip-projects-grid
.maip-project-grid-2col
.maip-arrow-btn
.wp-block-button__link:hover {
	background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--primary) 84%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 69%, #ffffff) 100%) !important;
	transform: scale(1.12) translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent) !important;
}

/* ------------------------------------------
	6. HIDDEN CARD (JS toggled)
	------------------------------------------ */
	.maip-projects-grid
	.maip-project-grid-2col
	.maip-project-card[style*="display: none"],
	.maip-projects-grid .maip-project-grid-2col .maip-project-card.maip-hidden {
		display: none !important;
	}

/* ------------------------------------------
	7. RESPONSIVE — Mobile First
	------------------------------------------ */
	@media (max-width: 1200px) {
		.maip-projects-grid .maip-project-grid-2col {
			gap: 20px !important;
		}
	}

	@media (max-width: 768px) {
		.maip-projects-grid .maip-project-grid-2col {
			grid-template-columns: 1fr !important;
			gap: 18px !important;
		}

		.maip-projects-grid .maip-tabs-pills {
			flex-wrap: wrap !important;
		}

		.maip-projects-grid .maip-project-grid-2col .maip-card-img img {
			height: 240px !important;
		}
	}

	@media (max-width: 480px) {
		.maip-projects-grid .maip-tabs-pills .maip-tab .wp-block-button__link {
			font-size: 12px !important;
			padding: 8px 12px !important;
		}

		.maip-projects-grid .maip-project-grid-2col .maip-card-img img {
			height: 200px !important;
		}

		.maip-projects-grid .maip-project-grid-2col .maip-card-info h4 {
			font-size: 15px !important;
		}
	}

/* ====================================================================
	LAYOUT
	==================================================================== */
	.aipost-section {
		padding: 80px 0 100px 0;
	}

	.aipost-layout {
		gap: var(--wp--custom--spacing--gap--horizontal, 32px);
		align-items: flex-start;
	}

	.aipost-section :where(.wp-block-comment-content) {
		background-color: inherit;
		border-radius: 0;
		padding-top: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0;
	}

	@media (max-width: 781px) {
		.aipost-layout.wp-block-columns {
			flex-wrap: wrap;
		}

		.aipost-main,
		.aipost-sidebar {
			flex-basis: 100% !important;
			width: 100% !important;
		}
	}

/* ====================================================================
	POST CARD & CONTENT
	==================================================================== */

	.aipost-card {
		background: var(--wp--preset--color--secondary);
		padding: 15px;
		border-radius: 20px;
	}

	.aipost-card__meta {
		gap: 20px;
		margin-bottom: 12px;
	}

	.aipost-card__meta-item {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.aipost-card__title {
		margin: 0 0 14px;
		font-weight: 600;
	}

	.aipost-card__content {
		color: var(--wp--preset--color--foreground-alt);
	}

	.aipost-card__content p {
		margin: 0 0 16px;
		line-height: 1.7;
	}

/* Blockquotes as testimonials */
.aipost-card__content blockquote {
	background-color: var(--wp--preset--color--primary);
	border: none;
	border-radius: 16px;
	padding: 24px 28px;
	margin: 8px 0 24px;
	color: var(--wp--preset--color--light-color);
}

.aipost-card__content blockquote p {
	font-style: italic;
	margin: 0 0 12px;
}

.aipost-card__content blockquote cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	opacity: 0.85;
}

/* Image grids */
.aipost-card__content .wp-block-columns img,
.aipost-card__content .wp-block-image img {
	border-radius: 14px;
	object-fit: cover;
}

/* Tags footer */
.aipost-card__footer {
	border-top: 1px solid var(--wp--preset--color--border-color);
	padding-top: 16px;
	gap: 16px;
}

.aipost-card__tags.wp-block-post-terms {
	color: var(--wp--preset--color--light-color);
}

.aipost-card__tags.wp-block-post-terms a {
	border: 1px solid var(--wp--preset--color--foreground-alt);
	color: var(--wp--preset--color--light-color);
	text-decoration: none;
	padding: 4px 14px;
	border-radius: 20px;
	margin-left: 6px;
	transition: all 0.3s ease;
}

.aipost-card__tags.wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* ====================================================================
	PAGINATION BAR
	==================================================================== */
	.aipost-pagination {
		border-radius: 10px;
		padding: 14px 28px;
		margin: 24px 0 32px;
		align-items: center;
	}

	.aipost-pagination a {
		color: var(--wp--preset--color--light-color);
		font-weight: 600;
		text-decoration: none;
	}

	.aipost-pagination__grid .wp-block-button__link {
		background-color: transparent;
		border: 1px solid var(--wp--preset--color--light-color);
		color: var(--wp--preset--color--light-color);
		width: 40px;
		height: 40px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;
	}

/* ====================================================================
	COMMENTS SECTION
	==================================================================== */
	.aipost-comments-title {
		margin: 0 0 16px;
		font-weight: 600;
	}

	.aipost-comments-wrap .wp-block-comment-template {
		display: flex;
		flex-direction: column;
		gap: 16px;
		margin: 0 0 24px;
	}

	.aipost-comment {
		background-color: var(--wp--preset--color--background);
		border: 1px solid #eee;
		border-radius: 12px;
		padding: 20px;
		gap: 16px;
	}

	.aipost-comment__avatar {
		margin: 0;
		flex: 0 0 auto;
	}

	.aipost-comment__avatar img {
		border-radius: 50%;
		object-fit: cover;
	}

	.aipost-comment__body {
		gap: 4px;
	}

	.aipost-comment__name {
		margin: 0;
		font-weight: 600;
	}
	.aipost-comment__name a {
		color: var(--wp--preset--color--secondary);
	}
	.aipost-comment__date a {
		color: #928fa0;
	}
	.aipost-comment__name a:hover,
	.aipost-comment__date a:hover {
		text-decoration: underline;
	}
	.aipost-comment__reply a {
		text-decoration: none;
		font-weight: 600;
		color: var(--wp--preset--color--primary);
	}

	.aipost-comment__reply a:hover {
		opacity: 0.8;
	}

	.aipost-comment__date {
		margin: 0 0 4px;
		display: block;
	}

	.aipost-comment__text p {
		margin: 0;
		line-height: 1.6;
	}

	.wp-block-comments-pagination {
		justify-content: center;
		margin-bottom: 24px;
	}

/* Main comment form styling */
.aipost-comment-form {
	background-color: var(--wp--preset--color--secondary);
	border-radius: 20px;
	padding: 28px;
	margin-top: 32px;
}

.aipost-comment-form__title {
	margin: 0 0 20px;
	font-weight: 700;
	font-size: 24px;
	color: var(--wp--preset--color--light-color);
}

.aipost-comment-form .comment-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
.aipost-comment-form .comment-notes,
.aipost-comment-form .comment-form-cookies-consent {
	width: 100%;
	color: var(--wp--preset--color--foreground-alt);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.aipost-comment-form .comment-form-author,
.aipost-comment-form .comment-form-email {
	flex: 1 1 calc(50% - 8px);
}

.aipost-comment-form .comment-form-comment,
.aipost-comment-form .comment-form-url,
.aipost-comment-form .form-submit {
	flex: 1 1 100%;
}

.aipost-comment-form input[type="text"],
.aipost-comment-form input[type="email"],
.aipost-comment-form input[type="url"],
.aipost-comment-form textarea {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 12px;
	color: var(--wp--preset--color--light-color);
	font-size: 15px;
	font-family: inherit;
	padding: 16px 18px;
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.aipost-comment-form textarea {
	min-height: 160px;
	resize: vertical;
}

.aipost-comment-form input[type="text"]::placeholder,
.aipost-comment-form input[type="email"]::placeholder,
.aipost-comment-form input[type="url"]::placeholder,
.aipost-comment-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
}

.aipost-comment-form input[type="text"]:focus,
.aipost-comment-form input[type="email"]:focus,
.aipost-comment-form input[type="url"]:focus,
.aipost-comment-form textarea:focus {
	outline: none;
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.25);
	box-shadow: 0 0 0 3px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 89%, #000000) 10%, transparent);
}

.aipost-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 8px;
	margin-bottom: 24px;
}

.aipost-comment-form .comment-form-cookies-consent input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	margin-right: 0;
	cursor: pointer;
	accent-color: var(--wp--preset--color--primary);
}

.aipost-comment-form .comment-form-cookies-consent label {
	color: var(--wp--preset--color--foreground-alt);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
	line-height: 1.5;
}

.aipost-comment-form .form-submit {
	display: flex;
	gap: 0;
}

.aipost-comment-form .form-submit input[type="submit"] {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
	border: none;
	border-radius: 50px;
	padding: 14px 32px;
	font-weight: 600;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.aipost-comment-form .form-submit input[type="submit"]::after {
	content: " →";
	display: inline-block;
	margin-left: 4px;
	transition: transform 0.3s ease;
}

.aipost-comment-form .form-submit input[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 89%, #000000) 30%, transparent);
}

.aipost-comment-form .form-submit input[type="submit"]:hover::after {
	transform: translateX(4px);
}

.aipost-comment-form .form-submit input[type="submit"]:active {
	transform: translateY(0);
}
#respond,
.comment-respond {
	background-color: var(--wp--preset--color--secondary) !important;
	border-radius: 20px !important;
	margin-top: 12px !important;
}

/* Heading for reply form */
#respond h3,
.comment-respond h3 {
	margin: 0 0 15px !important;
	font-weight: 600 !important;
	font-size: 22px !important;
	color: var(--wp--preset--color--light-color) !important;
}

/* Form layout */
#respond .comment-form,
.comment-respond .comment-form {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 16px !important;
}

/* Hide labels */
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-comment label,
#respond .comment-form-url label,
.comment-respond .comment-form-author label,
.comment-respond .comment-form-email label,
.comment-respond .comment-form-comment label,
.comment-respond .comment-form-url label {
	color: var(--wp--preset--color--light-color) !important;
}

/* Helper text */
#respond .comment-notes,
#respond .comment-form-cookies-consent,
.comment-respond .comment-notes,
.comment-respond .comment-form-cookies-consent {
	width: 100% !important;
	color: var(--wp--preset--color--foreground-alt) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	margin: 0 !important;
}

/* Two-column layout for Name & Email */
#respond .comment-form-author,
#respond .comment-form-email,
.comment-respond .comment-form-author,
.comment-respond .comment-form-email {
	flex: 1 1 calc(50% - 8px) !important;
}

/* Full-width fields */
#respond .comment-form-comment,
#respond .comment-form-url,
#respond .form-submit,
.comment-respond .comment-form-comment,
.comment-respond .comment-form-url,
.comment-respond .form-submit {
	flex: 1 1 100% !important;
}

/* INPUT FIELDS */
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
	width: 100% !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 12px !important;
	color: var(--wp--preset--color--light-color) !important;
	font-size: 15px !important;
	font-family: inherit !important;
	padding: 16px 18px !important;
	transition: all 0.3s ease !important;
	box-sizing: border-box !important;
}

/* Textarea sizing */
#respond textarea,
.comment-respond textarea {
	min-height: 160px !important;
	resize: vertical !important;
}

/* Placeholder text */
#respond input[type="text"]::placeholder,
#respond input[type="email"]::placeholder,
#respond input[type="url"]::placeholder,
#respond textarea::placeholder,
.comment-respond input[type="text"]::placeholder,
.comment-respond input[type="email"]::placeholder,
.comment-respond input[type="url"]::placeholder,
.comment-respond textarea::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
	font-weight: 500 !important;
}

/* Focus state */
#respond input[type="text"]:focus,
#respond input[type="email"]:focus,
#respond input[type="url"]:focus,
#respond textarea:focus,
.comment-respond input[type="text"]:focus,
.comment-respond input[type="email"]:focus,
.comment-respond input[type="url"]:focus,
.comment-respond textarea:focus {
	outline: none !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.25) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 89%, #000000) 10%, transparent) !important;
}

/* Checkbox */
#respond .comment-form-cookies-consent,
.comment-respond .comment-form-cookies-consent {
	display: flex !important;
	align-items: flex-start !important;
	gap: 12px !important;
	margin-top: 8px !important;
	margin-bottom: 24px !important;
}

#respond .comment-form-cookies-consent input,
.comment-respond .comment-form-cookies-consent input {
	width: 18px !important;
	height: 18px !important;
	margin-top: 2px !important;
	margin-right: 0 !important;
	cursor: pointer !important;
	accent-color: var(--wp--preset--color--primary) !important;
}

#respond .comment-form-cookies-consent label,
.comment-respond .comment-form-cookies-consent label {
	color: var(--wp--preset--color--foreground-alt) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	cursor: pointer !important;
	line-height: 1.5 !important;
}

/* SUBMIT BUTTON */
#respond .form-submit,
.comment-respond .form-submit {
	display: flex !important;
	gap: 0 !important;
}

#respond .form-submit input[type="submit"],
.comment-respond .form-submit input[type="submit"] {
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--light-color) !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 14px 32px !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

/* Arrow icon */
#respond .form-submit input[type="submit"]::after,
.comment-respond .form-submit input[type="submit"]::after {
	content: " →" !important;
	display: inline-block !important;
	margin-left: 4px !important;
	transition: transform 0.3s ease !important;
}

/* Hover state */
#respond .form-submit input[type="submit"]:hover,
.comment-respond .form-submit input[type="submit"]:hover {
	background-color: var(--wp--preset--color--primary) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 24px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 89%, #000000) 30%, transparent) !important;
}

/* Arrow animation */
#respond .form-submit input[type="submit"]:hover::after,
.comment-respond .form-submit input[type="submit"]:hover::after {
	transform: translateX(4px) !important;
}

/* Active state */
#respond .form-submit input[type="submit"]:active,
.comment-respond .form-submit input[type="submit"]:active {
	transform: translateY(0) !important;
}

/* ====================================================================
	ACCESSIBILITY
	==================================================================== */

/* Main form accessibility */
.aipost-comment-form input:focus-visible,
.aipost-comment-form textarea:focus-visible,
.aipost-comment-form .form-submit input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.aipost-comment-form input:disabled,
.aipost-comment-form textarea:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Reply form accessibility */
#respond input:focus-visible,
#respond textarea:focus-visible,
#respond .form-submit input[type="submit"]:focus-visible,
.comment-respond input:focus-visible,
.comment-respond textarea:focus-visible,
.comment-respond .form-submit input[type="submit"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary) !important;
	outline-offset: 2px !important;
}

#respond input:disabled,
#respond textarea:disabled,
.comment-respond input:disabled,
.comment-respond textarea:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* ====================================================================
	RESPONSIVE ADJUSTMENTS
	==================================================================== */

	@media (max-width: 600px) {
		/* Main form */
		.aipost-comment-form {
			padding: 20px;
		}

		.aipost-comment-form__title {
			font-size: 20px;
		}

		.aipost-comment-form .comment-form-author,
		.aipost-comment-form .comment-form-email {
			flex: 1 1 100%;
		}

		.aipost-comment-form .form-submit input[type="submit"] {
			padding: 12px 24px;
			font-size: 15px;
		}

		.aipost-comment-form input[type="text"],
		.aipost-comment-form input[type="email"],
		.aipost-comment-form input[type="url"],
		.aipost-comment-form textarea {
			padding: 14px 16px;
			font-size: 14px;
		}

		/* Reply form */
		#respond h3,
		.comment-respond h3 {
			font-size: 20px !important;
		}

		#respond .comment-form-author,
		#respond .comment-form-email,
		.comment-respond .comment-form-author,
		.comment-respond .comment-form-email {
			flex: 1 1 100% !important;
		}

		#respond .form-submit input[type="submit"],
		.comment-respond .form-submit input[type="submit"] {
			padding: 12px 24px !important;
			font-size: 15px !important;
		}

		#respond input[type="text"],
		#respond input[type="email"],
		#respond input[type="url"],
		#respond textarea,
		.comment-respond input[type="text"],
		.comment-respond input[type="email"],
		.comment-respond input[type="url"],
		.comment-respond textarea {
			padding: 14px 16px !important;
			font-size: 14px !important;
		}
	}

/* ====================================================================
	SIDEBAR WIDGETS
	==================================================================== */
	.aipost-sidebar {
		gap: 20px;
	}

	.aipost-widget {
		background-color: var(--wp--preset--color--secondary);
		border-radius: 16px;
		padding: 20px;
		margin-bottom: 0;
	}

	.aipost-widget__title {
		margin: 0 0 16px;
		font-weight: 600;
		position: relative;
		padding-bottom: 10px;
	}

	.aipost-widget__title::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 32px;
		height: 3px;
		background-color: var(--wp--preset--color--primary);
		border-radius: 2px;
	}

/* Search widget */
.aipost-search.wp-block-search {
	gap: 0;
}

.aipost-search .wp-block-search__inside-wrapper {
	border-radius: 8px;
	overflow: hidden;
	border: none;
}

.aipost-search .wp-block-search__input {
	background-color: var(--wp--preset--color--background);
	border: none;
	padding: 12px 16px;
}

.aipost-search .wp-block-search__button {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
	border: none;
	padding: 0 18px;
}


/* Categories widget */
.aipost-categories.wp-block-categories,
.aipost-categories ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aipost-categories li {
	margin: 0;
}

.aipost-categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--secondary);
	border-radius: 6px;
	padding: 10px 14px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
}

.aipost-categories a::after {
	content: "→";
	color: var(--wp--preset--color--primary);
}

.aipost-categories a:hover,
.aipost-categories .current-cat a {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
}

.aipost-categories a:hover::after,
.aipost-categories .current-cat a::after {
	color: var(--wp--preset--color--light-color);
}

/* Recent posts widget */
.aipost-recent-posts.wp-block-latest-posts {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aipost-recent-posts li {
	align-items: center;
	gap: 12px;
}

.aipost-recent-posts .wp-block-latest-posts__featured-image {
	margin: 0;
	flex: 0 0 auto;
}

.aipost-recent-posts .wp-block-latest-posts__featured-image img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 5px;
}
.aipost-section .wp-block-latest-posts__featured-image,
.materialai-blog-index .wp-block-latest-posts__featured-image {
	margin-right: 20px !important;
}
.aipost-recent-posts .wp-block-latest-posts__post-title {
	display: block;
	color: var(--wp--preset--color--light-color);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
	transition: all 0.3s;
}
.aipost-widget .aipost-recent-posts .wp-block-latest-posts__post-title:hover,
.aipost-widget .aipost-recent-posts .wp-block-latest-posts__post-title:focus{
	text-decoration: underline;
}
.aipost-recent-posts time {
	color: var(--wp--preset--color--light-color);
	font-weight: 800;
	font-size: 14px;
	line-height: 2.8;
	text-transform: uppercase;
}

/* Popular tags widget */
.aipost-tags.wp-block-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aipost-tags a {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--secondary);
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 18px !important;
	font-weight: 800;
	text-decoration: none;
	transition: all 0.2s ease;
}

.aipost-tags a:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
}

/* Follow us widget */
.aipost-social.wp-block-social-links {
	gap: 10px;
}

.aipost-social .wp-social-link {
	background-color: var(--wp--preset--color--background);
	border-radius: 6px;
	transition: all 0.2s ease;
	color: var(--wp--preset--color--secondary);
}

.aipost-social .wp-social-link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
}

.aipost-social .wp-social-link:hover a {
	color: var(--wp--preset--color--light-color);
}
.materialai-page-content {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* =========================================================
	MATERIALAI BLOG
========================================================= */

.materialai-blog-index {
	/* max-width: 1100px !important; */
	width: 100%;
	margin: 0 auto !important;
	padding-top: 80px;
	padding-bottom: 80px;
}

/* =========================================================
	CONTENT + SIDEBAR
========================================================= */

.materialai-blog-layout {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 28px !important;
}

.materialai-blog-content {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

/* Sidebar */

.materialai-blog-layout > .wp-block-template-part {
	flex: 1 0 430px !important;
	width: 430px !important;
	min-width: 0 !important;
}

/* =========================================================
	BLOG LIST
========================================================= */

.materialai-blog-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 30px !important;
}

/* =========================================================
	BLOG CARD
========================================================= */

.materialai-blog-card {
	position: relative;

	width: 100%;
	min-height: 250px;

	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;

	gap: 20px;

	margin: 0 !important;
	padding: 10px !important;

	box-sizing: border-box;

	border-radius: 10px;

	background-color: var(--wp--preset--color--secondary);

	background-image:
	radial-gradient(
		circle at 85% 10%,
		color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent),
		transparent 40%
	),
	repeating-radial-gradient(
		ellipse at 100% 100%,
		transparent 0,
		transparent 20px,
		rgba(255, 255, 255, 0.025) 21px,
		transparent 22px
	);

	overflow: hidden;

	transition:
	transform 0.25s ease,
	box-shadow 0.25s ease;
}

.materialai-blog-card:hover {
	transform: translateY(-4px);

	box-shadow: 0 12px 30px color-mix(in srgb, var(--wp--preset--color--secondary) 18%, transparent);
}

/* =========================================================
	IMAGE
========================================================= */

.materialai-blog-card__image {
	position: relative;

	flex: 0 0 330px !important;

	width: 330px !important;
	height: 250px !important;

	margin: 0 !important;

	overflow: hidden;

	border-radius: 10px;

	background-color: color-mix(in srgb, var(--wp--preset--color--secondary) 68%, #000000);

	background-image:
	radial-gradient(
		circle at 30% 30%,
		color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent),
		transparent 35%
	),
	repeating-radial-gradient(
		ellipse at 100% 100%,
		transparent 0,
		transparent 18px,
		rgba(255, 255, 255, 0.035) 19px,
		transparent 21px
	);
}

/* =========================================================
	FALLBACK PLACEHOLDER
========================================================= */

.materialai-blog-card__image::before {
	content: "AI";

	position: absolute;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	color: rgba(255, 255, 255, 0.2);

	font-size: 52px;
	font-weight: 700;
	letter-spacing: 4px;

	pointer-events: none;

	z-index: 0;
}

/* =========================================================
	FEATURED IMAGE
========================================================= */

.materialai-blog-card__image .wp-block-post-featured-image {
	position: relative;
	z-index: 1;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
}

.materialai-blog-card__image .wp-block-post-featured-image a {
	display: block;

	width: 100%;
	height: 100%;

	overflow: hidden;
}

.materialai-blog-card__image img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	max-width: none !important;

	object-fit: cover;
	object-position: center;

	border-radius: 10px;

	transition:
	transform 0.45s ease,
	filter 0.3s ease;
}

/* Image hover */

.materialai-blog-card:hover .materialai-blog-card__image img {
	transform: scale(1.05);

	filter: brightness(1.04);
}

/* =========================================================
	CONTENT
========================================================= */

.materialai-blog-card__content {
	flex: 1 1 auto !important;

	min-width: 0;

	margin: 0 !important;
	padding: 15px 20px 15px 0 !important;

	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
}

/* =========================================================
	META
========================================================= */

.materialai-blog-meta {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;

	gap: 22px;

	margin: 0 0 14px !important;
}

.materialai-blog-meta .wp-block-post-author,
.materialai-blog-meta .wp-block-post-date {
	margin: 0 !important;

	color: #fff;

	font-size: 16px;
	line-height: 1.4;
}

/* =========================================================
	TITLE
========================================================= */

.materialai-blog-card__title {
	margin: 0 0 22px !important;

	max-width: 520px;

	color: #fff !important;

	font-size: 24px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

.materialai-blog-card__title a {
	color: #fff !important;

	text-decoration: none !important;

	transition: color 0.25s ease;
}

.materialai-blog-card:hover .materialai-blog-card__title a {
	text-decoration: underline !important;
}

/* =========================================================
	ACTIONS
========================================================= */

.materialai-blog-actions {
	display: flex !important;
	align-items: center !important;

	gap: 10px;

	margin: 0 !important;
}

/* =========================================================
	READ MORE
========================================================= */

.materialai-read-more {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	margin: 0 !important;
	padding:8px 55px 8px 20px !important;
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 25px;
	background: transparent;
	color: #fff !important;
	font-size: 16px;
	font-weight: 400;
	text-decoration: none !important;
	transition:all 0.3s ease;
}
.materialai-read-more::after {
	content: "→";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 45px;
	height: 45px;
	line-height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 20px;
	transition:all 0.25s ease;
}
.materialai-read-more:hover {
	background: var(--wp--preset--color--primary) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.materialai-read-more:hover::after {
	transform: translateX(2px);
	background: #fff;
	color: var(--wp--preset--color--primary);
}

/* =========================================================
	COMMENTS BUTTON
========================================================= */

.materialai-comments-button {
	flex: 0 0 40px !important;

	width: 40px !important;
	height: 40px !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	border-radius: 50%;

	background: var(--wp--preset--color--primary);

	transition:
	transform 0.25s ease,
	background-color 0.25s ease,
	box-shadow 0.25s ease;
}

/* Core comments link */

.materialai-comments-link {
	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	text-decoration: none !important;

	font-size: 0 !important;
	line-height: 1 !important;
}

/* Chat icon */

.materialai-comments-link::before {
	content: "";

	display: block;

	width: 17px;
	height: 13px;

	border-radius: 50%;

	background: #fff;

	position: relative;
}

/* Chat bubble tail */

.materialai-comments-link::after {
	content: "";

	position: absolute;

	width: 6px;
	height: 6px;

	margin-top: 10px;
	margin-left: -10px;

	background: #fff;

	clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Hover */

.materialai-comments-button:hover {
	transform: translateY(-3px) scale(1.05);

	background: #fff;

	box-shadow: 0 8px 20px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}

.materialai-comments-button:hover .materialai-comments-link::before,
.materialai-comments-button:hover .materialai-comments-link::after {
	background: var(--wp--preset--color--primary);
}

/* =========================================================
	PAGINATION
========================================================= */

.materialai-blog-pagination {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	gap: 8px;

	margin: 40px 0 0 !important;
	padding: 0 !important;
}

.materialai-blog-pagination .wp-block-query-pagination-numbers {
	display: flex;

	align-items: center;

	gap: 6px;

	margin: 0 !important;
}

.materialai-blog-pagination a,
.materialai-blog-pagination span {
	display: inline-flex !important;

	align-items: center;
	justify-content: center;

	min-width: 36px;
	height: 36px;

	padding: 0 10px;

	box-sizing: border-box;

	border-radius: 20px;

	color: var(--wp--preset--color--primary) !important;

	font-size: 15px;
	font-weight: 600;

	text-decoration: none !important;

	transition:
	background-color 0.2s ease,
	color 0.2s ease,
	transform 0.2s ease;
}

.materialai-blog-pagination a:hover {
	background: var(--wp--preset--color--primary);

	color: #fff !important;

	transform: translateY(-2px);
}

.materialai-blog-pagination .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--primary);

	color: #fff !important;
}

/* =========================================================
	REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.materialai-blog-card,
	.materialai-blog-card__image img,
	.materialai-read-more,
	.materialai-read-more::after,
	.materialai-comments-button,
	.materialai-comments-icon::before,
	.materialai-blog-card__title a {
		transition: none !important;
	}

	.materialai-blog-card:hover,
	.materialai-read-more:hover,
	.materialai-comments-button:hover,
	.materialai-blog-pagination a:hover {
		transform: none !important;
	}

	.materialai-blog-card:hover .materialai-blog-card__image img {
		transform: none !important;
	}
}

/* =========================================================
	TABLET
========================================================= */

@media (max-width: 1100px) {
	.materialai-blog-layout {
		gap: 20px !important;
	}

	.materialai-blog-layout > .wp-block-template-part {
		flex-basis: 350px !important;
		width: 350px !important;
	}

	.materialai-blog-card__image {
		flex-basis: 260px !important;
		width: 260px !important;
		height: 230px !important;
	}

	.materialai-blog-card__title {
		font-size: 21px !important;
	}
}

/* =========================================================
	MOBILE
========================================================= */

@media (max-width: 767px) {
	.materialai-blog-index {
		padding: 50px 20px 100px 20px;
	}

	.materialai-blog-layout {
		flex-direction: column !important;
		gap: 30px !important;
	}

	.materialai-blog-content {
		width: 100% !important;
	}

	.materialai-blog-layout > .wp-block-template-part {
		flex: none !important;
		width: 100% !important;
	}

	.materialai-blog-card {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.materialai-blog-card__image {
		flex: none !important;

		width: 100% !important;
		height: 230px !important;
	}

	.materialai-blog-card__content {
		padding: 20px 10px !important;
	}

	.materialai-blog-card__title {
		max-width: 100%;
		font-size: 21px !important;
	}
}

/* =========================================================
	SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
	.materialai-blog-card__image {
		height: 210px !important;
	}

	.materialai-blog-meta {
		gap: 12px;
	}

	.materialai-blog-meta .wp-block-post-author,
	.materialai-blog-meta .wp-block-post-date {
		font-size: 13px;
	}

	.materialai-blog-card__title {
		font-size: 20px !important;
	}
	.materialai-blog-pagination {
		gap: 3px;
	}
	.materialai-blog-pagination a,
	.materialai-blog-pagination span {
		min-width: 32px;
		height: 32px;
		padding: 0 7px;
		font-size: 13px;
	}
}
/* ==============================================================
	MATERIALAI PRICING - IMPROVED USER-FRIENDLY EDITOR VERSION

	KEY IMPROVEMENTS:
	- Larger, more visible labels
	- Color-coded sections (Monthly vs Yearly)
	- Better visual separation
	- Clear information hierarchy
	- Easier for editors to understand
	- Professional dividers and spacing
================================================================ */

.materialai-pricing-section {
	position: relative;
	width: 100%;
	padding-top: 80px;
	padding-right: 20px;
	padding-bottom: 100px;
	padding-left: 20px;
	box-sizing: border-box;
	overflow: hidden;
}

/* ==============================================================
	HEADING
================================================================ */

.materialai-pricing-heading {
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	text-align: center;
}

/* BADGE */

.materialai-pricing-badge {
	display: table;
	margin: 0 auto 8px;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
}

/* TITLE */

.materialai-pricing-title {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1.2px;
}

/* ==============================================================
	TOGGLE
================================================================ */

.materialai-pricing-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 25px;
}

.materialai-toggle-label {
	margin: 0 !important;
	color: var(--wp--preset--color--secondary);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.materialai-toggle-button-wrap {
	margin: 0 !important;
	padding: 0 !important;
}

.materialai-toggle-button {
	margin: 0 !important;
	padding: 0 !important;
}

.materialai-toggle-button .wp-block-button__link {
	position: relative;
	display: block;
	width: 56px;
	height: 28px;
	min-width: 56px;
	margin: 0;
	padding: 0 !important;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	box-shadow: none;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.25s ease;
}

.materialai-toggle-button .wp-block-button__link::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	transition: transform 0.25s ease;
}

.materialai-toggle-button .wp-block-button__link:hover,
.materialai-toggle-button .wp-block-button__link:focus {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 90%, #000000);
}

.materialai-toggle-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 3px;
}

/* YEARLY STATE */

.materialai-pricing-section.is-yearly
.materialai-toggle-button
.wp-block-button__link::before {
	transform: translateX(28px);
}
.materialai-price-card {
	position: relative;
	width: 100%;
	min-height: 360px;
	height: 100%;
	padding: 28px 24px 30px;
	box-sizing: border-box;
	border-radius: 5px;
	background: var(--wp--preset--color--secondary);
	color: #ffffff;
	overflow: hidden;
}

.materialai-price-card-featured {
	background: var(--wp--preset--color--primary);
}

.materialai-price-card-pro {
	background: var(--wp--preset--color--secondary);
}

/* ==============================================================
	MONTHLY / YEARLY - FRONTEND BEHAVIOR
	Show/hide based on toggle
================================================================ */

.materialai-pricing-mode {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.materialai-pricing-yearly {
	display: none;
}

.materialai-pricing-section.is-yearly .materialai-pricing-monthly {
	display: none;
}

.materialai-pricing-section.is-yearly .materialai-pricing-yearly {
	display: block;
}

/* ==============================================================
	EDITOR MODE - USER-FRIENDLY IMPROVEMENTS

	Key Changes:
	- Bigger labels (30px instead of 10px)
	- Color-coded: Monthly (Blue/Gray), Yearly (Green/Emerald)
	- Better spacing and separation
	- Clear visual hierarchy
	- Professional dividers
	- Easy to understand at a glance
================================================================ */

/* Show both sections in editor */
.editor-styles-wrapper .materialai-pricing-monthly {
	display: block !important;
}

.editor-styles-wrapper .materialai-pricing-yearly {
	display: block !important;
}

/* Hide toggle in editor */
.editor-styles-wrapper .materialai-pricing-toggle {
	display: none !important;
}

/* IMPROVED LABEL STYLING - Much More Visible */
.editor-styles-wrapper .materialai-pricing-mode {
	position: relative;
	padding-top: 55px; /* Space for bigger label */
	margin-bottom: 24px;
	border-top: 4px solid #e0e0e0;
	padding-top: 20px;
}

/* Month label styling */
.editor-styles-wrapper .materialai-pricing-monthly::before {
	content: "📅 EDIT MONTHLY PRICING";
	position: absolute;
	top: -45px;
	left: 0;
	right: 0;
	display: block;
	padding: 12px 16px;
	background: linear-gradient(
		135deg,
		#2196f3 0%,
		#1976d2 100%
	); /* Blue gradient */
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
	line-height: 1.2;
	z-index: 10;
	white-space: nowrap;
}

/* Yearly label styling - Different color */
.editor-styles-wrapper .materialai-pricing-yearly::before {
	content: "💰 EDIT YEARLY PRICING (Save 10-20%)";
	position: absolute;
	top: -45px;
	left: 0;
	right: 0;
	display: block;
	padding: 12px 16px;
	background: linear-gradient(
		135deg,
		#4caf50 0%,
		#388e3c 100%
	); /* Green gradient */
	color: #ffffff;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-radius: 6px 6px 0 0;
	box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
	line-height: 1.2;
	z-index: 10;
	white-space: nowrap;
}

/* Add visual separator line between sections */
.editor-styles-wrapper .materialai-pricing-yearly {
	margin-top: 60px !important; /* Space after monthly ends */
	padding-top: 20px;
	border-top: 3px dashed #c0c0c0;
}

/* Add helpful hint above monthly section */
.editor-styles-wrapper .materialai-pricing-monthly {
	border-top: 3px solid #2196f3;
}

/* Add helpful hint above yearly section */
.editor-styles-wrapper .materialai-pricing-yearly {
	border-top: 3px solid #4caf50;
}

/* Add text indicator */
.editor-styles-wrapper .materialai-price-card::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 3px;
	height: 100%;
	background: linear-gradient(180deg, currentColor 0%, transparent 100%);
}

/* Add info box for editors */
.editor-styles-wrapper
.materialai-pricing-section
> .materialai-pricing-heading::after {
	content: "💡 TIP: Scroll down to see yearly pricing. Edit both sections completely to keep prices in sync.";
	display: block;
	margin-top: 16px;
	padding: 12px 16px;
	background: #fff8dc;
	border-left: 4px solid #ff9800;
	color: #333;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	line-height: 1.5;
}

/* ==============================================================
	CARD TOP
================================================================ */

.materialai-card-top {
	width: 100%;
	margin: 0 0 25px !important;
	padding: 0 !important;
}
.materialai-pricing-grid .materialai-pricing-mode .mai-cta-wrap{
	margin-bottom: 25px !important;
} 
.materialai-price-content {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 5px;
	margin: 0 !important;
	padding: 0 !important;
}

/* PRICE */

.materialai-price {
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff;
	font-size: clamp(34px, 4vw, 42px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -1.5px;
	white-space: nowrap;
}

.materialai-price-period {
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* PLAN LABEL */

.materialai-plan-label {
	margin: 0 !important;
	padding: 5px 9px !important;
	border-radius: 2px;
	background: #ffffff;
	color: var(--wp--preset--color--primary);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
}

/* ==============================================================
	PRICE BUTTON
================================================================ */

.materialai-pricing-section .mai-cta-wrap {
	margin-bottom: 26px;
}

.materialai-pricing-section .mai-cta-wrap .mai-cta .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0px 0px 0px 25px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.7;
	text-align: left;
}

.materialai-pricing-section
.mai-cta-wrap
.mai-cta
.wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--mai-purple);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transition: transform 0.2s ease;
	border: 2px solid;
}

.materialai-pricing-section
.mai-cta-wrap
.mai-cta
.wp-block-button__link:hover::after,
.materialai-pricing-section
.mai-cta-wrap
.mai-cta
.wp-block-button__link:focus::after {
	transform: translateX(3px);
}

/* ==============================================================
	FEATURES
================================================================ */

.materialai-price-features {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.materialai-price-features li {
	position: relative;
	margin: 0 0 15px !important;
	padding: 0 0 0 22px !important;
	color: #ffffff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

.materialai-price-features li:last-child {
	margin-bottom: 0 !important;
}

.materialai-price-features li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border: 1.5px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--primary);
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
}

.materialai-price-card-featured .materialai-price-features li::before {
	border-color: #ffffff;
	color: #ffffff;
}

/* ==============================================================
	TABLET & RESPONSIVE ADJUSTMENTS
================================================================ */

@media (max-width: 900px) {
	.materialai-pricing-section {
		padding-top: 65px;
		padding-bottom: 70px;
	}

	.materialai-pricing-grid {
		gap: 16px;
	}

	.materialai-price-card {
		padding: 24px 18px 26px;
	}

	.materialai-price {
		font-size: 34px;
	}

	.materialai-price-period {
		font-size: 12px;
	}

	.materialai-plan-label {
		font-size: 9px;
		padding: 5px 7px !important;
	}

	.materialai-price-button .wp-block-button__link {
		font-size: 12px;
		padding-left: 13px;
	}

	.materialai-price-features li {
		font-size: 12px;
	}

	/* Adjust labels for smaller screens */
	.editor-styles-wrapper .materialai-pricing-monthly::before,
	.editor-styles-wrapper .materialai-pricing-yearly::before {
		font-size: 13px;
		padding: 10px 12px;
	}
}

/* ==============================================================
	MOBILE
================================================================ */

@media (max-width: 781px) {
	.materialai-pricing-section {
		padding: 55px 18px 60px;
	}

	.materialai-pricing-heading {
		margin-bottom: 32px;
	}

	.materialai-pricing-title {
		font-size: 34px;
	}

	.materialai-pricing-toggle {
		margin-top: 20px;
	}

	.materialai-pricing-grid {
		display: flex !important;
		flex-direction: column;
		gap: 18px;
	}

	.materialai-pricing-column {
		width: 100%;
		flex-basis: 100% !important;
	}

	.materialai-price-card {
		min-height: 0;
		padding: 25px 22px 28px;
	}

	.materialai-price {
		font-size: 38px;
	}

	.materialai-price-period {
		font-size: 13px;
	}

	.materialai-price-features li {
		font-size: 14px;
	}
}

/* ==============================================================
	SMALL MOBILE
================================================================ */

@media (max-width: 480px) {
	.materialai-pricing-title {
		font-size: 30px;
	}

	.materialai-price-card {
		padding: 22px 18px 25px;
	}

	.materialai-card-top {
		margin-bottom: 18px !important;
	}

	.materialai-price {
		font-size: 34px;
	}

	.materialai-price-period {
		font-size: 11px;
	}

	.materialai-plan-label {
		font-size: 8px;
	}

	.materialai-price-features li {
		font-size: 13px;
		margin-bottom: 13px !important;
	}
}

/* ==============================================================
	REDUCE BLOCK DEFAULT SPACING
================================================================ */

.materialai-pricing-section .wp-block-buttons {
	margin-top: 0;
	margin-bottom: 0;
}

.materialai-pricing-section .wp-block-button {
	margin: 0;
}

.materialai-pricing-section .wp-block-group {
	box-sizing: border-box;
}
/**
 * Coming Soon Hybrid Design CSS - PIXEL PERFECT
 * Gaming background + Minimal clean timer layout
 * Grid-based timer with 5 equal columns
 */

/* ============================================================================
	GLOBAL VARIABLES
	============================================================================ */

	:root {
		--cs-primary-dark: var(--wp--preset--color--secondary);
		--cs-primary-light: color-mix(in srgb, var(--wp--preset--color--secondary) 90%, #ffffff);
		--cs-accent: var(--wp--preset--color--primary);
		--cs-accent-light: color-mix(in srgb, var(--wp--preset--color--primary) 71%, #ffffff);
		--cs-text-white: #ffffff;
		--cs-text-secondary: color-mix(in srgb, var(--wp--preset--color--primary) 62%, #ffffff);
		--cs-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	}

/* ============================================================================
	RESET & BASE
	============================================================================ */

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.coming-soon-hybrid {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(135deg, var(--wp--preset--color--secondary) 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 90%, #ffffff) 50%, var(--wp--preset--color--secondary) 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		font-family: var(--wp--preset--font-family--jost, "Jost"),
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		Arial, sans-serif;
		color: var(--cs-text-white);
	}

/* ============================================================================
	BACKGROUND LAYER
	============================================================================ */

	.coming-soon-hybrid__bg-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		overflow: hidden;
	}

	.coming-soon-hybrid__bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}

	.coming-soon-hybrid__bg-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.coming-soon-hybrid__overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			135deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 75%, transparent) 0%,
			color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 90%, #ffffff) 65%, transparent) 50%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 75%, transparent) 100%
		);
		z-index: 2;
		pointer-events: none;
	}

/* ============================================================================
	CONTENT
	============================================================================ */

	.coming-soon-hybrid__content {
		position: relative;
		z-index: 10;
		width: 100%;
		max-width: 1200px;
		padding: 80px 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		margin: 0 auto;
	}

/* ============================================================================
	TIMER - GRID LAYOUT (5 COLUMNS)
	============================================================================ */

	.coming-soon-hybrid__timer {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
		width: 100%;
		max-width: 850px;
		padding: 30px 20px;
		margin: 60px auto;
		border: 2px solid var(--cs-accent);
		border-radius: 8px;
		background: color-mix(in srgb, var(--wp--preset--color--secondary) 30%, transparent);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		transition: all var(--cs-transition);
		animation: slideInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
		position: relative;
	}

	.coming-soon-hybrid__timer::before {
		content: "";
		position: absolute;
		top: 0;
		left: 10%;
		right: 10%;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			var(--cs-accent) 50%,
			transparent 100%
		);
		z-index: 3;
	}

	.coming-soon-hybrid__timer::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 10%;
		right: 10%;
		height: 1px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			var(--cs-accent) 50%,
			transparent 100%
		);
		z-index: 3;
	}

	.coming-soon-hybrid__timer:hover {
		border-color: var(--cs-accent-light);
		background: color-mix(in srgb, var(--wp--preset--color--secondary) 50%, transparent);
		box-shadow:
		0 0 20px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 71%, #ffffff) 40%, transparent),
		inset 0 0 20px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 71%, #ffffff) 10%, transparent);
		transform: translateY(-4px);
	}

/* TIMER COLUMNS */
.coming-soon-hybrid__timer-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 15px 10px;
	margin: 0;
	position: relative;
	z-index: 2;
	transition: all var(--cs-transition);
	min-width: 60px;
	overflow: hidden;
}

.coming-soon-hybrid__timer-col:hover {
	transform: scale(1.05);
}

.coming-soon-hybrid__timer-col p {
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
}

.coming-soon-hybrid__timer-col p:nth-child(1) {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--cs-text-secondary);
	text-transform: capitalize;
}

.coming-soon-hybrid__timer-col p {
	margin: 0;
	padding: 0;
	line-height: 1;
	display: block;
}

.coming-soon-hybrid__timer-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--cs-text-secondary);
	text-transform: capitalize;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
	display: block;
}

.coming-soon-hybrid__timer-value {
	font-size: 42px;
	font-weight: 700;
	color: var(--cs-text-white);
	font-family: "Courier New", monospace;
	letter-spacing: 1px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1;
	display: block;
	word-break: break-word;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ============================================================================
	HEADING
	============================================================================ */

	.coming-soon-hybrid__heading {
		font-size: 56px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.5px;
		color: var(--cs-text-white);
		margin: 40px 0 50px 0;
		padding: 0;
		max-width: 900px;
		text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
		animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
		word-break: break-word;
	}

/* ============================================================================
	CTA SECTION
	============================================================================ */

	.coming-soon-hybrid__cta {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 30px;
		width: 100%;
		max-width: 600px;
		margin: 0 auto;
		animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
	}

/* ============================================================================
	EMAIL FORM
	============================================================================ */

	.coming-soon-hybrid__form-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		max-width: 500px;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	.coming-soon-hybrid__email-form {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	.coming-soon-hybrid__email-form .wp-block-search__form {
		display: flex;
		width: 100%;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	.coming-soon-hybrid__email-form .wp-block-search__inside-wrapper {
		display: flex;
		width: 100%;
		gap: 0;
		align-items: stretch;
		margin: 0;
		padding: 0;
	}

	.coming-soon-hybrid__email-form .wp-block-search__input {
		flex: 1;
		min-width: 0;
		padding: 14px 18px;
		font-size: 15px;
		font-family: inherit;
		border: none;
		border-radius: 8px 0 0 8px;
		background: #ffffff;
		color: #333333;
		outline: none;
		transition: all var(--cs-transition);
		margin: 0;
		line-height: 1.5;
		-webkit-appearance: none;
		appearance: none;
	}

	.coming-soon-hybrid__email-form .wp-block-search__input:focus {
		box-shadow: inset 0 0 0 2px var(--cs-accent);
		outline: none;
	}

	.coming-soon-hybrid__email-form .wp-block-search__input::placeholder {
		color: #999999;
		opacity: 1;
	}

	.coming-soon-hybrid__email-form .wp-block-search__button:hover {
		background: var(--cs-accent-light) !important;
		box-shadow: 0 0 15px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 71%, #ffffff) 60%, transparent) !important;
		transform: scale(1.05);
	}

/* ============================================================================
	ANIMATIONS
	============================================================================ */

	@keyframes slideInDown {
		from {
			opacity: 0;
			transform: translateY(-40px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(40px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
			opacity: 1;
		}
		50% {
			transform: scale(1.1);
			opacity: 0.8;
		}
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

/* Pulse effect when timer updates */
.coming-soon-hybrid__timer-value.pulse {
	animation: pulse 0.5s ease-out;
}

/* ============================================================================
	RESPONSIVE DESIGN
	============================================================================ */

	@media (max-width: 768px) {
		.coming-soon-hybrid__content {
			padding: 60px 16px;
		}

		.coming-soon-hybrid__timer {
			max-width: 100%;
			padding: 20px 12px;
			margin: 50px auto;
		}

		.coming-soon-hybrid__timer-col {
			padding: 12px 8px;
			min-width: 50px;
		}

		.coming-soon-hybrid__timer-label {
			font-size: 11px;
		}

		.coming-soon-hybrid__timer-value {
			font-size: 36px;
			letter-spacing: 0px;
		}

		.coming-soon-hybrid__heading {
			font-size: 44px;
			margin-bottom: 40px;
		}

		.coming-soon-hybrid__email-form .wp-block-search__input {
			padding: 12px 16px;
			font-size: 14px;
		}

		.coming-soon-hybrid__social-wrapper {
			gap: 12px;
		}

		.coming-soon-hybrid__social-btn {
			width: 38px !important;
			height: 38px !important;
			min-width: 38px !important;
			min-height: 38px !important;
		}

		.coming-soon-hybrid__social-btn svg {
			width: 18px;
			height: 18px;
		}
	}

	@media (max-width: 480px) {
		.coming-soon-hybrid {
			min-height: 100vh;
		}

		.coming-soon-hybrid__content {
			padding: 40px 12px;
		}

		.coming-soon-hybrid__timer {
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
			padding: 16px 12px;
			margin: 40px auto;
			border-radius: 6px;
		}

		.coming-soon-hybrid__timer::before,
		.coming-soon-hybrid__timer::after {
			display: none;
		}

		.coming-soon-hybrid__timer-col {
			padding: 12px 8px;
			min-width: 40px;
		}

		.coming-soon-hybrid__timer-label {
			font-size: 10px;
		}

		.coming-soon-hybrid__timer-value {
			font-size: 28px;
			letter-spacing: 0px;
		}

		.coming-soon-hybrid__heading {
			font-size: 32px;
			margin-bottom: 30px;
		}

		.coming-soon-hybrid__email-form .wp-block-search__input {
			padding: 11px 12px;
			font-size: 13px;
		}

		.coming-soon-hybrid__social-btn {
			width: 36px !important;
			height: 36px !important;
			min-width: 36px !important;
			min-height: 36px !important;
		}

		.coming-soon-hybrid__social-btn svg {
			width: 16px;
			height: 16px;
		}
	}

/* ============================================================================
	ACCESSIBILITY
	============================================================================ */

	@media (prefers-reduced-motion: reduce) {
		* {
			animation: none !important;
			transition: none !important;
		}
	}

	@media (prefers-contrast: more) {
		.coming-soon-hybrid__timer {
			border-width: 3px;
		}

		.coming-soon-hybrid__social-btn {
			border-width: 3px !important;
		}
	}

/* ============================================================================
	GUTENBERG EDITOR OVERRIDES
	============================================================================ */

	.wp-block-group.coming-soon-hybrid .wp-block-buttons {
		gap: 0;
		margin: 0;
		padding: 0;
	}

	.wp-block-group.coming-soon-hybrid .wp-block-search {
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.wp-block-group.coming-soon-hybrid h1 {
		margin-block-start: 40px;
		margin-block-end: 50px;
	}

	.wp-block-group.coming-soon-hybrid p {
		margin: 0;
		padding: 0;
	}

	.wp-block-group.coming-soon-hybrid .wp-block-paragraph {
		margin: 0;
		padding: 0;
	}

/* Paragraph block styling */
.coming-soon-hybrid__timer-label,
.coming-soon-hybrid__timer-value {
	display: block;
	line-height: 1;
	margin: 0 !important;
	padding: 0 !important;
}

/* circular Slider animation */

.circular-text-outer {
	position: relative;
	width: 140px;
	height: 140px;
	margin: 0px;
}
.circular-text-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	padding: 5px;
	z-index: 1;
}
.circular-text-wrap svg {
	width: 100%;
	height: 100%;
	/* rotation now lives inside the SVG (SMIL), so it also runs in
	   the editor's sandboxed HTML preview */
	 }
	 .circular-text-wrap text {
	 	font-size: 24px;
	 	font-weight: 600;
	 	fill: #fff;
	 	letter-spacing: 6px;
	 	font-family: var(--wp--preset--font-family--jost), "Jost", sans-serif;
	 	text-transform: capitalize;
	 	font-style: normal !important;
	 }
	 @keyframes rotateCircleText {
	 	from {
	 		transform: rotate(0deg);
	 	}
	 	to {
	 		transform: rotate(360deg);
	 	}
	 }
	 .materialai-circle-container {
	 	position: absolute;
	 	width: 140px;
	 	height: 140px;
	 	background: var(--wp--preset--color--secondary);
	 	border-radius: 50%;
	 	display: flex;
	 	align-items: center;
	 	justify-content: center;
	 	top: 50%;
	 	left: -70px;
	 	transform: translateY(-50%);
	 	z-index: 10;
	 }

	 .materialai-circle-text span {
	 	position: absolute;
	 	left: 50%;
	 	top: 50%;
	 	color: var(--white);
	 	font-size: 16px;
	 	font-weight: 700;
	 	line-height: 1;
	 	transform-origin: 0 0;
	 	white-space: pre;
	 }
	 .materialai-circle-center {
	 	width: 70px;
	 	height: 70px;
	 	border-radius: 50%;
	 	position: absolute;
	 	background: var(--wp--preset--color--primary);
	 	color: var(--white);
	 	margin-block-start: 0;
	 	z-index: 2;
	 }
	 .materialai-play-btn::before {
	 	content: "▶";
	 }

/* Circular wrapper */
.editor-styles-wrapper .circular-text-outer,
.is-root-container .circular-text-outer {
	position: relative;
	width: 140px;
	height: 140px;
}

/* Circular text wrapper */
.editor-styles-wrapper .circular-text-wrap,
.is-root-container .circular-text-wrap {
	position: relative;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	padding: 5px;
	z-index: 1;

	/* rotation SMIL (SVG ke andar) se aati hai — yahan dobara nahi, warna double-rotate */
}

/* SVG */
.editor-styles-wrapper .circular-text-wrap svg,
.is-root-container .circular-text-wrap svg {
	width: 100%;
	height: 100%;
	animation: none !important;
}

/* Circular text */
.editor-styles-wrapper .circular-text-wrap text,
.is-root-container .circular-text-wrap text {
	font-size: 24px;
	font-weight: 600;
	fill: #fff;
	letter-spacing: 6px;
	font-family: var(--wp--preset--font-family--jost), "Jost", sans-serif;
	text-transform: capitalize;
	font-style: normal !important;
}

/* =========================================
	Editor Circle Container
========================================= */

.editor-styles-wrapper .materialai-circle-container,
.is-root-container .materialai-circle-container {
	position: absolute;

	width: 140px;
	height: 140px;

	background: var(--wp--preset--color--secondary);

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	top: 50%;
	left: -70px;

	transform: translateY(-50%);

	z-index: 10;

	overflow: visible;
}

/* =========================================
	Editor Circular Text
========================================= */

.editor-styles-wrapper .materialai-circle-text span,
.is-root-container .materialai-circle-text span {
	position: absolute;
	left: 50%;
	top: 50%;
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;

	transform-origin: 0 0;

	white-space: pre;
}

/* =========================================
	Editor Center Circle
========================================= */

.editor-styles-wrapper .materialai-circle-center,
.is-root-container .materialai-circle-center {
	width: 70px;
	height: 70px;

	border-radius: 50%;

	position: absolute;

	background: var(--wp--preset--color--primary);

	color: var(--white);

	margin-block-start: 0;

	z-index: 2;
}

/* =========================================
	Editor Play Button
========================================= */

.editor-styles-wrapper .materialai-play-btn::before,
.is-root-container .materialai-play-btn::before {
	content: "▶";
}

/* =========================================
	Force Animation in Editor
========================================= */

.editor-styles-wrapper .circular-text-wrap,
.is-root-container .circular-text-wrap {
	animation-name: rotateCircleText !important;
	animation-duration: 12s !important;
	animation-timing-function: linear !important;
	animation-iteration-count: infinite !important;
	animation-direction: normal !important;
	animation-fill-mode: both !important;
	animation-play-state: running !important;
	-webkit-animation-name: rotateCircleText !important;
	-webkit-animation-duration: 12s !important;
	-webkit-animation-timing-function: linear !important;
	-webkit-animation-iteration-count: infinite !important;
	-webkit-animation-play-state: running !important;

	transform-origin: 50% 50% !important;
}

/* =========================================
	Animation Keyframes
========================================= */

@keyframes rotateCircleText {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotateCircleText {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}

/* ==============================================================
   EDITOR CANVAS FIXES
   Gutenberg forces `position: relative` on every block wrapper via
   `.block-editor-block-list__layout .block-editor-block-list__block`
   (specificity 0,2,0), which defeats the theme's single-class
   `position: absolute` rules inside the editor iframe only.
   These overrides restore the intended positioning in the canvas.
   ============================================================== */

/* AI Features: left / right columns + center orbit */
.editor-styles-wrapper .materialai-ai-left,
.editor-styles-wrapper .materialai-ai-right,
.editor-styles-wrapper .materialai-ai-center,
.editor-styles-wrapper .materialai-orbit-top,
.editor-styles-wrapper .materialai-pro-box,
.editor-styles-wrapper .materialai-orbit-bottom {
	position: absolute;
}

/* The theme hides the center orbit on 992-1439px viewports. The editor
   canvas iframe is ~250px narrower than the browser window (sidebars),
   so it falls into that range even on desktop monitors. Show the orbit
   in the canvas whenever it actually fits (330 + 430 + 330 + gaps). */
   @media (min-width: 1150px) {
   	.editor-styles-wrapper .materialai-ai-layout .materialai-ai-center {
   		display: flex;
   	}
   }

   @media (max-width: 1100px) {
   	.editor-styles-wrapper .materialai-ai-left,
   	.editor-styles-wrapper .materialai-ai-right,
   	.editor-styles-wrapper .materialai-ai-center {
   		position: relative;
   	}
   }

/* Advanced Technology: video play button */
.editor-styles-wrapper .ma-video-play {
	position: absolute;
}

/* Customer Reviews: slider nav arrows */
.editor-styles-wrapper .materialai-nav-prev,
.editor-styles-wrapper .materialai-nav-next {
	position: absolute;
}

/* Latest Projects: card image, type badge and info overlay */
.editor-styles-wrapper .maip-card-img,
.editor-styles-wrapper .maip-card-type,
.editor-styles-wrapper .maip-card-info {
	position: absolute;
}

/* --------------------------------------------------------------
   Editor canvas: sliders. Front-end JS (owl-carousel, GSAP) does
   not execute inside the editor iframe, so mimic each slider's
   resting state statically.
   -------------------------------------------------------------- */

/* Hero slider (.slider-1, owl items:1): show slide 1 only */


/* Customer Reviews (owl items:1): show the first testimonial only */


/* Curved gallery (GSAP 3D fan): approximate with the first five cards.
   Values mirror buildPositions() in assets/js/script.js
   (H=[310,353,420], R=[0,8,15], Z=[0,50,78], s=7). */
   .editor-styles-wrapper .dx3d-slider-container {
   	perspective: 1500px;
   }
   .editor-styles-wrapper .dx3d-slider-track {
   	gap: var(--dx3d-gap, 20px);
   	transform-style: preserve-3d;
   }
   .editor-styles-wrapper .dx3d-card {
   	flex-shrink: 0 !important;
   }
   .editor-styles-wrapper .dx3d-card:nth-child(n+6) {
   	display: none;
   }
   .editor-styles-wrapper .dx3d-card .dx3d-card-title,
   .editor-styles-wrapper .dx3d-card .dx3d-card-desc {
   	display: none;
   }
   .editor-styles-wrapper .dx3d-card:nth-child(1) {
   	height: 420px;
   	clip-path: polygon(0 0, 100% 7%, 100% 93%, 0 100%);
   }
   .editor-styles-wrapper .dx3d-card:nth-child(2) {
   	height: 353px;
   	clip-path: polygon(0 0, 100% 7%, 100% 93%, 0 100%);
   }
   .editor-styles-wrapper .dx3d-card:nth-child(3) {
   	height: 310px;
   }
   .editor-styles-wrapper .dx3d-card:nth-child(4) {
   	height: 353px;
   	clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 93%);
   }
   .editor-styles-wrapper .dx3d-card:nth-child(5) {
   	height: 420px;
   	clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 93%);
   }

/* --------------------------------------------------------------
   Editor canvas: JS-driven pieces that have no markup fallback.
   -------------------------------------------------------------- */

/* Preloader overlay: on the front end script.js fades it out on
   window load; in the canvas it would sit on top forever. */
   .editor-styles-wrapper .Preloader {
   	display: none;
   }

/* Back-to-top button: shown/hidden by scroll JS on the front end. */
.editor-styles-wrapper .materialai-back-to-top__button {
	display: none;
}

/* Hero stats rings: script.js reads each value and sets
   --progress (value x 3.6deg). Mirror the pattern's shipped
   values (90 / 70 / 80) statically. */
   .editor-styles-wrapper .materialai-box-slider .stat:nth-child(1) .progress {
   	--progress: 324deg;
   }
   .editor-styles-wrapper .materialai-box-slider .stat:nth-child(2) .progress {
   	--progress: 252deg;
   }
   .editor-styles-wrapper .materialai-box-slider .stat:nth-child(3) .progress {
   	--progress: 288deg;
   }

/* Latest blog: owl-carousel shows 2 posts per view on desktop.
   Approximate with a 2-column grid in the canvas. */
   .editor-styles-wrapper .mai-blog__list {
   	display: grid;
   	grid-template-columns: repeat(2, 1fr);
   	gap: 22px;
   }

/* --------------------------------------------------------------
   Editor canvas: reveal hidden slider items while editing.
   Gutenberg adds .is-selected / .has-child-selected to the block
   being edited, so items hidden above become visible as soon as
   they are picked in the List View or via keyboard navigation.
   -------------------------------------------------------------- */



   .editor-styles-wrapper .dx3d-card:nth-child(n+6).is-selected,
   .editor-styles-wrapper .dx3d-card:nth-child(n+6).has-child-selected {
   	display: block;
   	height: 310px;
   	transform: none;
   }

/* Card title/desc are hidden to match the front end; show them on
   the card being edited so the text stays editable in place. */
   .editor-styles-wrapper .dx3d-card.is-selected .dx3d-card-title,
   .editor-styles-wrapper .dx3d-card.has-child-selected .dx3d-card-title,
   .editor-styles-wrapper .dx3d-card.is-selected .dx3d-card-desc,
   .editor-styles-wrapper .dx3d-card.has-child-selected .dx3d-card-desc {
   	display: block;
   }

/* --------------------------------------------------------------
   Editor canvas: slide navigation (assets/js/editor-preview.js).
   The script marks the visible item with .mat-ed-active; once any
   item is marked, that class — not :first-child — decides which
   slide shows. Selected blocks always stay visible for editing.
   -------------------------------------------------------------- */





/* Injected hero prev/next buttons */
.editor-styles-wrapper .mat-ed-navwrap {
	position: absolute;
	top: 18px;
	right: 18px;
	display: flex;
	gap: 8px;
	z-index: 20;
}
.editor-styles-wrapper .mat-ed-nav {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, var(--wp--preset--color--primary));
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
}
.editor-styles-wrapper .mat-ed-nav:hover {
	opacity: 0.85;
}

/* --------------------------------------------------------------
   Editor canvas: hooks for editor-preview.js full mode.
   -------------------------------------------------------------- */

/* When the script drives the dx3d gallery it positions every card
   inline — lift the static 5-card fallback limits. */
   .editor-styles-wrapper .dx3d-ed-ready .dx3d-card:nth-child(n+6) {
   	display: block !important;
   }
   .editor-styles-wrapper .dx3d-ed-ready .dx3d-slider-track {
   	gap: 0;
   }

/* Injected hero dots (owl classes reused for theme styling) */
.editor-styles-wrapper .mat-ed-dots {
	position: relative;
	z-index: 20;
}


/* --------------------------------------------------------------
   AI Expert Team panels: each member's center image + profile card
   are real blocks inside .ai-team-panel. The active panel's children
   flow into grid columns 2 and 3; inactive panels are hidden.
   Works identically on the front end and in the editor canvas.
   -------------------------------------------------------------- */
   .ai-team-panel {
   	display: none;
   }
   .ai-team-panel.is-active {
   	display: contents;
   }
/* Editor: picking a panel in the List View also reveals it. */
.editor-styles-wrapper .ai-team-panel.is-selected,
.editor-styles-wrapper .ai-team-panel.has-child-selected {
	display: contents;
}

/* Editor canvas: the experience badge is a paragraph block, so the
   canvas forces position:relative on it (same rule that broke the
   AI Features columns) and it slips out of view. Restore it. */
   .editor-styles-wrapper .ai-team-exp-badge {
   	position: absolute;
   }

/* --------------------------------------------------------------
   Editor canvas: STRICT single-slide display for the hero slider
   and testimonials. Only the .mat-ed-active item is visible —
   selection/focus activates an item via editor-preview.js, so
   editing never shows two slides at once. First item is the
   fallback until the script marks one active.
   -------------------------------------------------------------- */
   .editor-styles-wrapper .slider-1 > .wp-block-group,
   .editor-styles-wrapper .materialai-testimonial-slider > .materialai-testimonial-item {
   	display: none;
   }
   .editor-styles-wrapper .slider-1 > .wp-block-group.mat-ed-active,
   .editor-styles-wrapper .materialai-testimonial-slider > .materialai-testimonial-item.mat-ed-active {
   	display: block;
   }
   .editor-styles-wrapper .slider-1:not(:has(> .wp-block-group.mat-ed-active)) > .wp-block-group:first-child,
   .editor-styles-wrapper .materialai-testimonial-slider:not(:has(> .mat-ed-active)) > .materialai-testimonial-item:first-child {
   	display: block;
   }

/* --------------------------------------------------------------
   Curved gallery: per-card social icon (real editable block).
   Hidden until the card is hovered — front end and editor alike.
   -------------------------------------------------------------- */
   .dx3d-card .dx3d-card-social {
   	position: absolute;
   	left: 50%;
   	top: 50%;
   	transform: translate(-50%, -50%);
   	opacity: 0;
   	transition: opacity 0.3s ease;
   	z-index: 2;
   	margin: 0;
   	/* icon-sized only — must never block clicks on the image below */
   	pointer-events: none;
   }
   .dx3d-card:hover .dx3d-card-social {
   	opacity: 1;
   	pointer-events: auto;
   }
   .dx3d-card .dx3d-card-social .wp-block-social-link {
   	background: rgba(0, 0, 0, 0.45);
   	border-radius: 10px;
   }
/* Editor: the canvas forces position:relative on block wrappers;
   restore, and keep the icon visible while it is being edited. */
   .editor-styles-wrapper .dx3d-card .dx3d-card-social {
   	position: absolute;
   }
   .editor-styles-wrapper .dx3d-card .dx3d-card-social.is-selected,
   .editor-styles-wrapper .dx3d-card .dx3d-card-social.has-child-selected {
   	opacity: 1;
   	pointer-events: auto;
   }

/* Editor canvas: smooth rotation for the curved gallery. */
.editor-styles-wrapper .dx3d-ed-ready .dx3d-card {
	transition: height 0.5s ease, transform 0.5s ease, clip-path 0.5s ease;
}

/* Editor canvas: park the card's social icon in the top-right corner,
   small and always visible — one click edits the link, and the rest
   of the card stays free for image editing. (Front end keeps the
   hover-centered design.) */
   .editor-styles-wrapper .dx3d-card .dx3d-card-social {
   	inset: auto;
   	top: 8px;
   	right: 8px;
   	opacity: 1;
   	transform: scale(0.8);
   	transform-origin: top right;
   }

/* --------------------------------------------------------------
   Editor canvas: pricing works like the front end — the toggle
   switches Monthly/Yearly (editor-preview.js flips .is-yearly).
   These later rules retire the old "show both with labels" mode.
   -------------------------------------------------------------- */
   .editor-styles-wrapper .materialai-pricing-toggle {
   	display: flex !important;
   	align-items: center;
   	justify-content: center;
   }
   .editor-styles-wrapper .materialai-pricing-monthly::before,
   .editor-styles-wrapper .materialai-pricing-yearly::before {
   	content: none !important;
   }
   .editor-styles-wrapper .materialai-pricing-mode {
   	padding-top: 0;
   	margin-bottom: 0;
   	border-top: 0;
   }
   .editor-styles-wrapper .materialai-pricing-monthly {
   	border-top: 0;
   }
   .editor-styles-wrapper .materialai-pricing-yearly {
   	display: none !important;
   	margin-top: 0 !important;
   	padding-top: 0;
   	border-top: 0;
   }
   .editor-styles-wrapper .materialai-pricing-section.is-yearly .materialai-pricing-yearly {
   	display: block !important;
   }
   .editor-styles-wrapper .materialai-pricing-section.is-yearly .materialai-pricing-monthly {
   	display: none !important;
   }

/* Editor canvas: retire the old yellow TIP box from the pricing
   heading — the toggle now works in the canvas. */
   .editor-styles-wrapper .materialai-pricing-section > .materialai-pricing-heading::after {
   	content: none !important;
   }

/* --------------------------------------------------------------
   Editor canvas: all pattern section headings. The editor's
   generated blockGap rules zero out margin-block-end with higher
   effective priority than the theme's
   `.materialai-section-heading { margin-bottom: 60px }` (on the
   front end those rules are :where()-wrapped, so the theme wins).
   Restore the gap so the dot-line divider never overlaps titles.
   -------------------------------------------------------------- */
   .editor-styles-wrapper .materialai-section-heading {
   	margin-bottom: 60px !important;
   }

/* Editor canvas: hero circle play button is a block wrapper, so the
   canvas forces position:relative on it and it squeezes the circular
   SVG text. Restore the absolute stacking. */
   .editor-styles-wrapper .materialai-circle-center {
   	position: absolute;
   }

/* Editor canvas: owl's own stylesheet (not loaded in the canvas)
   normally resets dot buttons — do it here for the injected dots. */
   .editor-styles-wrapper .mat-ed-dots .owl-dot {
   	background: none;
   	border: 0;
   	padding: 0;
   	margin: 0;
   	cursor: pointer;
   	display: inline-block;
   }

/* Editor canvas: keep the circular SVG text white (an editor svg
   rule was overriding the theme's fill). */
   .editor-styles-wrapper .circular-text-wrap text,
   .editor-styles-wrapper .circular-text-wrap textPath,
   .editor-styles-wrapper .circular-text-wrap tspan,
   .editor-styles-wrapper .materialai-circle-container svg text {
   	fill: #fff !important;
   	color: #fff !important;
   }

/* Editor canvas: the profile card is fixed at 460px; canvas spacing
   runs slightly taller, spilling the socials outside the card. Let
   the card grow with its content in the editor. */
   .editor-styles-wrapper .ai-team-profile-card {
   	height: auto;
   	min-height: 460px;
   }
   .materialai-nav-wrap.sticky {
   	position: fixed;
   	top: 0;
   	left: 0;
   	width: 100%;
   	z-index: 9999;
   	margin-top: 0px !important;
   	background-color: #fff;
   	-webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   	-webkit-animation: 0.8s ease-in-out fadeInDown;
   	animation: 0.8s ease-in-out fadeInDown;
   }
   .wp-block-search.wp-block-search__button-only .wp-block-search__inside-wrapper{
   	position: relative;
   }
   .wp-block-search.wp-block-search__button-only.wp-block-search__searchfield-hidden .wp-block-search__input{
   	position: absolute;
   	visibility: hidden;
   	opacity: 0;
   	right: 0;
   	transform: translateY(-20%);
   	-webkit-backface-visibility: hidden;
   	transition: all 0.5s ease-in-out;
   }
   .wp-block-search.wp-block-search__button-only .wp-block-search__input{
   	position: absolute;
   	bottom: -50px;
   	right: 0;
   	height: 40px;
   	border-radius: 10px;
   	outline: none;
   	border: none;
   	padding: 6px 15px;
   	transform: translateY(0);
   	opacity: 1;
   	visibility: visible;
   	box-shadow: 0px 2px 16px -3px rgb(0 0 0 / 0.15);
   	transition: all 0.5s ease-in-out;
   }
   .materialai-footer-main .footer-item-prs{
   	flex-basis: 45px;
   	width: 45px;
   	height: 45px;
   }

   body:has(.error-404-page__buttons) .error404-cover,
   body:has(.coming-soon-hybrid__content) .wp-block-cover{
   	height: 100vh;
   	min-height: 100vh;
   }
  .coming-soon-hybrid__content .wp-block-search__inside-wrapper .wp-block-search__button{
   	background-color: var(--wp--preset--color--primary);
   }
  .coming-soon-hybrid__content .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor{
    width:40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
    border: 1px solid #ffffff3d;
  }
  .coming-soon-hybrid__content .wp-block-social-links .wp-social-link svg{
    width: 18px;
    height: 18px;
  }
   .coming-soon-hybrid__content .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover svg,
   .coming-soon-hybrid__content .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:focus svg{
   	fill:  var(--wp--preset--color--primary);
   }
  body.search-no-results .mai-breadcrumb__crumb--last{
   	display: none;
  }
  body.search-no-results .wp-block-search__inside-wrapper .wp-block-search__button{
  	background-color: var(--wp--preset--color--primary);
  }
.slider-1 h2.wp-block-heading mark{ white-space: nowrap; }

/* =========================================
   Circular badge — center lock (editor + frontend)
   Editor block-gap margins ring/play ko shift kar dete hain,
   isliye sab kuch container par absolute pin kiya.
========================================= */
.materialai-circle-container .circular-text-outer,
.editor-styles-wrapper .materialai-circle-container .circular-text-outer,
.is-root-container .materialai-circle-container .circular-text-outer{
	position: absolute !important;
	inset: 0 !important;
	width: 140px !important;
	height: 140px !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.materialai-circle-container .circular-text-wrap,
.editor-styles-wrapper .materialai-circle-container .circular-text-wrap,
.is-root-container .materialai-circle-container .circular-text-wrap{
	margin: 0 !important;
}
.materialai-circle-container .materialai-circle-center,
.editor-styles-wrapper .materialai-circle-container .materialai-circle-center,
.is-root-container .materialai-circle-container .materialai-circle-center{
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0 !important;
}
.materialai-circle-container > .wp-block-html,
.editor-styles-wrapper .materialai-circle-container .wp-block-html{
	margin: 0 !important;
}

/* Ring ke har layer ko fixed px me container par pin karo (editor scale/gap proof) */
.materialai-circle-container .circular-text-wrap,
.editor-styles-wrapper .materialai-circle-container .circular-text-wrap,
.is-root-container .materialai-circle-container .circular-text-wrap{
	position: absolute !important;
	inset: 0 !important;
	width: 140px !important;
	height: 140px !important;
	padding: 5px !important;
	box-sizing: border-box !important;
}
.materialai-circle-container .circular-text-wrap svg,
.editor-styles-wrapper .materialai-circle-container .circular-text-wrap svg,
.is-root-container .materialai-circle-container .circular-text-wrap svg{
	position: absolute !important;
	inset: 5px !important;
	width: 130px !important;
	height: 130px !important;
	display: block !important;
}

/* Editor: core/html ka block-wrapper (frontend par nahi hota) containing
   block ban jata hai — use container ke poore box par pin karo taki
   .circular-text-outer ka inset:0 container-coordinates me hi lage */
.editor-styles-wrapper .materialai-circle-container .wp-block-html,
.editor-styles-wrapper .materialai-circle-container [data-type="core/html"],
.is-root-container .materialai-circle-container .wp-block-html{
	position: absolute !important;
	inset: 0 !important;
	width: 140px !important;
	height: 140px !important;
	margin: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	overflow: visible !important;
}