/*
Theme Name: Human Edge in the AI Age
Theme URI: https://www.humanedgeintheaiage.com
Author: Ankit Srivastav
Author URI: #
Description: A custom WordPress theme.
Version: 1.0.0
*/

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Montserrat:wght@100..900&family=Newsreader:opsz,wght@6..72,200..800&family=Space+Grotesk:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined');

:root {
    /* Colors */
    --primary: #430639;
    --on-primary: #ffffff;
    --primary-container: #5d1f50;
    --on-primary-container: #d688bf;
    --primary-fixed: #ffd7ef;
    --primary-fixed-dim: #ffade6;
    --on-primary-fixed: #3a0031;
    --on-primary-fixed-variant: #6f2f60;

    --secondary: #904d00;
    --on-secondary: #ffffff;
    --secondary-container: #fea453;
    --on-secondary-container: #713b00;
    --secondary-fixed: #ffdcc2;
    --secondary-fixed-dim: #ffb77c;
    --on-secondary-fixed: #2e1500;
    --on-secondary-fixed-variant: #6d3900;

    --tertiary: #00243b;
    --on-tertiary: #ffffff;
    --tertiary-container: #1a3a52;
    --on-tertiary-container: #86a4c1;
    --tertiary-fixed: #cce5ff;
    --tertiary-fixed-dim: #abcae8;
    --on-tertiary-fixed: #001d31;
    --on-tertiary-fixed-variant: #2b4963;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    --background: #fbf9f4;
    --on-background: #1b1c19;

    --surface: #fbf9f4;
    --surface-dim: #dbdad5;
    --surface-bright: #fbf9f4;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f5f3ee;
    --surface-container: #f0eee9;
    --surface-container-high: #eae8e3;
    --surface-container-highest: #e4e2dd;

    --surface-variant: #e4e2dd;
    --on-surface: #1b1c19;
    --on-surface-variant: #50434b;

    --outline: #82737b;
    --outline-variant: #d4c2cb;

    --inverse-surface: #30312e;
    --inverse-on-surface: #f2f1ec;
    --inverse-primary: #ffade6;

    --surface-tint: #8b4679;

    /* Fonts */
    --font-headline: "Space Grotesk", sans-serif;
    --font-body: "Newsreader", serif;
    --font-p: "Montserrat", sans-serif;
    --font-label: "Manrope", sans-serif;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-lg: 0.25rem;
    --radius-xl: 0.5rem;
    --radius-full: 0.75rem;
}

/* Backgrounds */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-surface { background-color: var(--surface); }
.bg-surface-container { background-color: var(--surface-container); }
.bg-surface-container-high { background-color: var(--surface-container-high); }

/* Text Colors */
.text-primary { color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.text-on-primary { color: var(--on-primary) !important; }
.text-on-surface { color: var(--on-surface) !important; }
.text-on-background { color: var(--on-background) !important; }

/* Borders */
.border-outline { border: 1px solid var(--outline); }
.border-outline-variant { border: 1px solid var(--outline-variant); }

/* Border Radius */
.rounded { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Fonts */
.font-headline { font-family: var(--font-headline) !important; }
.font-body { font-family: var(--font-body) !important; }
.font-p { font-family: var(--font-p) !important; }
.font-label { font-family: var(--font-label) !important; }

@import url('https://use.typekit.net/pfk5evz.css');
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6, .elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a {
    font-family: var(--font-headline) !important;
    color: #430639 !important;
    /*font-weight: 400 !important; */
}
p {
    margin-bottom: 5px !important;
}
.elementor-divider .elementor-divider-separator {
    width: 200px;
    border-width: 1px;
    border-style: solid;
    border-color: #9e1f63;
    opacity: 1;
    position: relative;
    display: inline-block;
}
.elementor-divider .elementor-divider-separator:before {
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    background-color: #9e1f63;
    top: -9px;
    opacity: 0.4;
    right: 50%;
    transform: rotate(45deg);
}
.elementor-divider .elementor-divider-separator:after {
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    background: #9e1f63;
    top: -9px;
    left: 45%;
    opacity: 0.4;
    transform: rotate(45deg);
}
body > .elementor:not(.elementor-location-header) > .elementor-element.e-parent {
    padding: calc(100vw *.04) !important;
}
/* Scroll effect css start */
/* Scroll Triggered Animation Classes */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	will-change: transform, opacity;
}
.reveal-fade {
	opacity: 0;
	transition: opacity 1.2s ease-in-out;
	will-change: opacity;
}
.reveal-left {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal-right {
	opacity: 0;
	transform: translateX(20px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.reveal.active, .reveal-fade.active, .reveal-left.active, .reveal-right.active {
	opacity: 1;
	transform: translate(0, 0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }
.reveal-delay-8 { transition-delay: 0.8s; }

html {
	scroll-behavior: smooth;
}
/* Scroll effect css end */
/*top header and navigation css start*/
nav.elementor-nav-menu--main ul li a {
    --tw-text-opacity: 1;
    color: rgb(87 83 78 / var(--tw-text-opacity, 1)) !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    font-family: 'Space Grotesk' !important;
	font-size: 16px;
}
nav.elementor-nav-menu--main ul li a.elementor-item-active, nav.elementor-nav-menu--main ul li a:hover{
	color: rgb(134 25 143 / var(--tw-text-opacity, 1)) !important;
}

/* .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: #9e1f63 !important;
} */
/* .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu .elementor-item {
    font-family: "Lato", Sans-serif !important;
    font-size: 18px !important;
} */
/* .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu--main .elementor-item:hover, .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu--main .elementor-item.elementor-item-active, .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu--main .elementor-item.highlighted, .elementor-20 .elementor-element.elementor-element-b2ea5a4 .elementor-nav-menu--main .elementor-item:focus {
    color: #9e1f63 !important;
    fill: #9e1f63 !important;
} */
/*top header and navigation css end*/

/*Banner CSS Start*/
.bg:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #000000;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.3;
}


@keyframes sf-fly-by-1 {
	from {
		transform: translateZ(-600px);
		opacity: 0.5;
	}
	to {
		transform: translateZ(0);
		opacity: 0.5;
	}
}
@keyframes sf-fly-by-2 {
	from {
		transform: translateZ(-1200px);
		opacity: 0.5;
	}
	to {
		transform: translateZ(-600px);
		opacity: 0.5;
	}
}
@keyframes sf-fly-by-3 {
	from {
		transform: translateZ(-1800px);
		opacity: 0.5;
	}
	to {
		transform: translateZ(-1200px);
		opacity: 0.5;
	}
}
.star-field {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	perspective: 600px;
	-webkit-perspective: 600px;
	z-index: 0;
}
.star-field .layer {
	box-shadow: -411px -476px #161616, 777px -407px #1d1d1d, -387px -477px #363535, -91px -235px #393838, 491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke, 183px 389px #c7c7c7,
		524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #5c5353, 157px 249px #ededed, 81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf, 446px 404px #c2c2c2,
		440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3, 641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6, 952px -70px #e3e3e3,
		-869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb, 654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6, 554px -176px #ededed,
		-85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede, 468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9, -853px 79px #d6d6d6,
		828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa, -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7, 459px 533px #fcfcfc,
		624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc, -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9, -362px 97px #c2c2c2,
		563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4, -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf, 822px -443px #e0e0e0, 795px 497px #e0e0e0,
		-814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6, 808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7, 47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1,
		-598px -50px #c2c2c2, -833px 187px #c4c4c4, 378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb, 98px -412px #c4c4c4, -911px -277px #c9c9c9;
	transform-style: preserve-3d;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 4px;
	width: 4px;
	border-radius: 2px;
}
.star-field .layer:nth-child(1) {
	animation: sf-fly-by-1 5s linear infinite;
}
.star-field .layer:nth-child(2) {
	animation: sf-fly-by-2 5s linear infinite;
}
.star-field .layer:nth-child(3) {
	animation: sf-fly-by-3 5s linear infinite;
}

.button-cta a {
	--tw-bg-opacity: 1;
    background-color: rgb(67 6 57 / var(--tw-bg-opacity, 1)) !important;
	--tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
	padding-left: 2.5rem;
    padding-right: 2.5rem;
	padding-top: 1rem;
    padding-bottom: 1rem;
	border-radius: 0.5rem;
	font-family: Space Grotesk !important;
	font-weight: 700 !important;
	font-size: 1.125rem;
    line-height: 1.75rem;
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
	transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 150ms;
}
.button-cta a:hover {
	--tw-translate-y: -2px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
canvas, .canvas {
	position: absolute !important;
        top: 0;
        left: 0;
        width: 98vw !important;
        *height: 100vh;*
	height: 535px;
      }
.banner {
    *position: relative;
    width: 100%;
    min-height: 535px;*
    overflow: hidden !important;
    height: 535px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center right;
}
.banner-content {
    *position: relative;
    z-index: 2;*
    padding: 40px 15px !important;
}
.banner-content h2 {
    font-size: 2vw;
    font-weight: 400 !important;
    line-height: 2.5vw;
    *text-align: end;*
    font-family: Lato, sans-serif !important;
    text-transform: uppercase;
}
.banner-heading .banner-heading-text-big {
    display: block;
    color: #9e1f64;
    font-size: 95px;
    line-height: 0.9;
    font-weight: 400;
    font-family: "alternate-gothic-no-2-d", sans-serif;
}
.banner-heading .banner-heading-text-small {
    margin: 18px;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.ai-stroke-double {
    position: relative;
    background: transparent;
    z-index: 0;
    color: black !important;
    letter-spacing: 15px;
    left: 15px;
}
.ai-stroke-double:before {
    content: attr(title);
    position: absolute;
    -webkit-text-stroke: 0.11em white;
    left: 0;
    z-index: -1;
}
.ai-stroke-double:after {
    content: attr(title);
    position: absolute;
    -webkit-text-stroke: 0.20em black;
    left: 0;
    z-index: -2;
}
/*Banner CSS End*/

/* Amazon CTA CSS start */
/* Vertical Marquee Animation */
@keyframes verticalMarquee {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-50%);
	}
}

.marquee-container {
	height: 120px;
	overflow: hidden;
	position: relative;
}

.marquee-content {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	animation: verticalMarquee 15s linear infinite;
}

.marquee-container:hover .marquee-content {
	animation-play-state: paused;
}
/* Amazon CTA CSS end */
/* Mantra Wheel CSS Styles start */
.mantra-wheel-container {
	position: relative;
	width: 100%;
	max-width: 700px;
	aspect-ratio: 1/1;
	margin: 0 auto;
}

.mantra-node {
	position: absolute;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	z-index: 20;
}

.mantra-node:hover {
	transform: scale(1.2);
}

.mantra-node:hover .mantra-dot {
	background-color: #9E1E63;
	/* primary-like custom highlight */
	box-shadow: 0 0 20px rgba(158, 30, 99, 0.4);
}

.mantra-dot {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: white;
	border: 2px solid #e4e2dd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	color: #430639;
	transition: all 0.3s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mantra-node:hover .mantra-dot {
	color: white;
	border-color: #9E1E63;
}

/* Interactive Content Display */
.mantra-info-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 10;
}

.mantra-display-card {
	background: white;
	border-radius: 50%;
	width: 65%;
	height: 65%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem;
	box-shadow: inset 0 0 40px rgba(67, 6, 57, 0.03), 0 10px 30px rgba(0, 0, 0, 0.05);
	border: 1px solid rgba(67, 6, 57, 0.05);
	transition: all 0.5s ease;
}

/* Default State Hide/Show */
.mantra-detail {
	opacity: 0;
	transform: translateY(10px);
	/* transition: all 0.4s ease; */
	position: absolute;
	width: 50%;
}

.mantra-node:hover~.mantra-info-overlay .mantra-default-text {
	opacity: 0;
}

/* Positioning Nodes in Circle */
.node-1 {
	top: 10%;
	left: 50%;
}

.node-2 {
	top: 22%;
	left: 80%;
}

.node-3 {
	top: 50%;
	left: 90%;
}

.node-4 {
	top: 78%;
	left: 80%;
}

.node-5 {
	top: 90%;
	left: 50%;
}

.node-6 {
	top: 78%;
	left: 20%;
}

.node-7 {
	top: 50%;
	left: 10%;
}

.node-8 {
	top: 22%;
	left: 20%;
}

/* Dynamic Hover Content Triggering via Siblings */
.mantra-node:nth-child(1):hover~.mantra-info-overlay #content-1,
.mantra-node:nth-child(2):hover~.mantra-info-overlay #content-2,
.mantra-node:nth-child(3):hover~.mantra-info-overlay #content-3,
.mantra-node:nth-child(4):hover~.mantra-info-overlay #content-4,
.mantra-node:nth-child(5):hover~.mantra-info-overlay #content-5,
.mantra-node:nth-child(6):hover~.mantra-info-overlay #content-6,
.mantra-node:nth-child(7):hover~.mantra-info-overlay #content-7,
.mantra-node:nth-child(8):hover~.mantra-info-overlay #content-8 {
	opacity: 1;
	transform: translateY(0);
/* 	position: relative; */
}

.mantra-node:hover~.mantra-info-overlay .mantra-default-text {
	display: none;
}

@media screen and (max-width: 767px) {
	.mantra-wheel-container {
		width: 350px;
	}
	.mantra-dot {
		width: 80%;
		height: 80%;
	}
	.mantra-node {
		width: 50px;
		height: 50px;
		margin-left: -20px;
		margin-top: -20px;
	}
	.mantra-detail {
		width: 65%;
	}
	.mantra-detail h4{
		font-size: 0.875rem;
		margin-bottom: 0;
	}
	.mantra-detail p {
		font-size: 0.75rem;
	}
	.text-5xl {
		font-size: 2rem !important;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
	.mantra-wheel-container {
		max-width: 550px;
	}
	.text-custom-heading {
		font-size: 1.2rem !important;
	}
	.text-custom-paragraph {
		font-size: 0.9rem !important;
	}
}
/* Mantra Wheel CSS Styles end */

/*testimonials css start*/
      .bg-offset-hero::after {
        position: absolute;
        content: '';
        width: 75%;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        background-color: #9e1f64;
      }

      .quote_ {
        opacity: 0.1;
      }
span.swiper-pagination-bullet {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px !important;
    height: 10px !important;
    padding: 0;
    margin-right: 3px !important;
    margin-left: 3px !important;
    text-indent: -999px;
    background-color: #9e1f63 !important;
    background-clip: padding-box !important;
    border: 0 !important;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transition: opacity .6s ease;
    border-radius: 0 !important;
}
.swiper-pagination-bullet-active{
	opacity: 1 !important;
}
/*testimonials css end*/

/*About the Book section CSS Start*/
.btn__secondary a {
    position: relative;
    display: inline-block;
    line-height: 30px;
    text-align: center;
    padding: 10px 30px;
    border-radius: 3px;
    overflow: hidden;
    text-decoration: none !important;
    background-color: transparent !important;
    color: #9e1f63 !important;
    transition: all 0.3s ease;
    cursor: pointer;
}
.btn__secondary a::before {
    top: 0px;
    left: 0px;
    border-right: none !important;
}
.btn__secondary a::after {
    top: 0px;
    right: 0px;
    border-left: none !important;
}
.btn__secondary a::before, .btn__secondary a::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #c27b7f;
    transition: all 0.5s ease;
}
.btn__secondary a:hover {
    text-decoration: none !important;
    background: #9e1f63 !important;
    color: #ffffff !important;
    transition-delay: 0.15s !important;
}
.btn__secondary a:hover::before, .btn__secondary a:hover::after {
    width: 100% !important;
}
/*About the Book Section CSS End*/

/*Video section css start*/
.elementor-custom-embed-play {
    z-index: 10;
    box-sizing: content-box !important;
    display: block;
    width: 30px;
    height: 30px;
    background: #9e1f63;
    border-radius: 50%;
    padding: 20px;
}
.elementor-custom-embed-play:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #9e1f63;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}

.elementor-custom-embed-play:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #9e1f63;
  border-radius: 50%;
  transition: all 200ms;
}

.elementor-custom-embed-play:hover:after {
  background-color: darken(#fa183d, 10%);
}

.elementor-custom-embed-play svg {
    position: relative;
    z-index: 10;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
/*Video section css end*/

/*Key section css start*/
.key-section .elementor-counter {
    width: 40px;
    height: 40px;
    background-color: #9e1f63;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px #876585;
    transition: 0.3s;
    font-size: 35px;
}
.key-section .elementor-element-81755fe:hover .elementor-counter, .key-section .elementor-element-794c5ce:hover .elementor-counter {
    border-radius: 62% 38% 46% 54% / 60% 63% 37% 40%;
    background-color: #1A1718;
    box-shadow: 3px 3px #EFEEE8;
}
.key-section .elementor-element-81755fe:hover, .key-section .elementor-element-794c5ce:hover {
    background-color: #9e1f63;
    transform: translateY(-5px);
}
.key-section .elementor-element-81755fe:hover .elementor-icon-box-title span, .key-section .elementor-element-81755fe:hover .elementor-icon-box-description,
.key-section .elementor-element-794c5ce:hover .elementor-icon-box-title span, .key-section .elementor-element-794c5ce:hover .elementor-icon-box-description{
    color: #ffffff !important;
}
.key-section .elementor-element-81755fe .elementor-icon-box-description,
.key-section .elementor-element-794c5ce .elementor-icon-box-description{
    text-align: left;
}

/*Key section css end*/

/*Possible framework css Start*/
.possible-framework p{
    text-transform: none;
    letter-spacing: 2px;
    font-weight: 600;
    display: inline-block;
    color: #676768;
}
@layers general, demo;

@layer demo {
	.mantras-circle {
		--trans-duration: 150ms;
		--trans-easing: linear(
			0,
			0.453 23.2%,
			1 44.7%,
			0.863 52.2%,
			0.831 55.6%,
			0.821 58.9%,
			0.828 61.8%,
			0.852 64.9%,
			0.999 77.4%,
			0.976 81.1%,
			0.969 84.7%,
			0.996 95.3%,
			1
		);

		/* offset for siblings */
		--hover-step-sibling-1: 5%; /* ≈ 5 deg */
		--hover-step-sibling-2: 3%; /* ≈ 2 deg */
		--hover-step-sibling-3: 1%; /* ≈ 1 deg */

		--angle-step: calc(360deg / var(--total));    /* step between items */

		--radius: min(30vw, 250px);                   /* responsive circle radius */
		--icon-size: calc(var(--radius) / 3);         /* icon size based on circle size */

		--inner-ring-color: rgb(214 211 209 / 20%);       /* bg color of inner ring */
		--inner-ring-size: calc(var(--icon-size) * 2);/* inner ring size, based on buttons size */

		--icon-radius: calc(var(--radius) + (var(--icon-size) / 2) - (var(--inner-ring-size) / 2)); /* radius for positiining the icons - in the middle of the ring*/

		--marker-color: rgba(15 23 43 / 0.15);
		--marker-offset: -45% -40%;

		--label-bg-color: rgba(0 0 0 / .75);
		--label-border-color: rgba(255 255 255 / .25);
		--label-text-color: white;
		--label-font-size: 1.2rem;

		position: relative;
		inline-size: calc((var(--radius) * 2) + var(--icon-size));
		aspect-ratio: 1;
		border-radius: 50%;
	}

	/* inner ring */
	.mantras-circle::before {
		content: "HUMAN EDGE IN THE AI AGE";
		position: absolute;
		inset: 0;
		border-radius: inherit;
		border: var(--inner-ring-size) solid var(--inner-ring-color);
		z-index: 1;
		filter: drop-shadow(0 0 3px rgba(0 0 0 / 0.25))
			drop-shadow(0 0 10px rgba(0 0 0 / 0.25));
		align-content: center;
		text-align: center;
		color: #9e1f63;
		font-weight: 600;
		font-family: 'alternate-gothic-no-2-d', sans-serif;
		font-size: 25px;
	}

	/* icon buttons */
	.item {
		/* Step and positioning */
		--angle-step: calc(100% / var(--total));
		--base-pos: calc((var(--i) - 3) * var(--angle-step));
		--offset-delta: 0%;

		/* Additional angle in degrees for marker use */
		--angle-step-deg: calc(360deg / var(--total));
		--base-angle: calc((var(--i) - 1) * var(--angle-step-deg));

		position: absolute;
		inset: 43%;
		margin: auto;
		inline-size: var(--icon-size);
		aspect-ratio: 1;
		background: transparent;
		border: none;
		outline: none;
		padding: 0;
		cursor: pointer;
		display: grid;
		place-items: center;

		& > img {
			position: absolute;
			inset: 0;
			margin: auto;
			width: 200px;
			max-width: 200px !important;
			height: 200px !important;
			padding: 0;
			border: none;
			outline: none;
			background: transparent;
			cursor: pointer;

			z-index: var(--item-zindex, 1);
			isolation: isolate;
			transition: offset-distance var(--trans-duration) var(--trans-easing);

			/* Offset path settings */
			offset-path: circle(var(--icon-radius) at 50% 50%);
			offset-rotate: 0deg;
			offset-distance: calc(var(--base-pos) + var(--offset-delta));
			filter:drop-shadow(3px 3px  5px rgba(0 0 0 / .25));
		}

		/* icon shown on hover */
		&:is(:hover, :focus-visible) {
			--item-zindex: 10;
			--marker-opacity: 0.7;
			--tooltip-opacity: 1;
			--tooltip-scale: 1;
		}

		&::before,
		&::after {
			content: "";
			position: absolute;
			border-radius: inherit;
			z-index: -1;
			pointer-events: none;
			font-size: 13px;
		}
		/* marker behind current hovered icon */
		&::before {
			offset-path: circle(var(--icon-radius) at 50% 50%);
			offset-distance: calc(var(--base-pos) + var(--offset-delta));
		}

		/* label */
		&::after {
			scale: var(--tooltip-scale,0);
		}
		& > .statement {
			scale: var(--tooltip-scale,0);
		}
	}
	.mantras-circle .item:nth-child(2) img {
		offset-path: circle(var(--icon-radius) at 70% 35%);
		offset-rotate: 1deg;
		z-index: 1;
	}
	.mantras-circle .item:nth-child(4) img {
		offset-path: circle(var(--icon-radius) at 68% 67%);
		offset-rotate: 0deg;
		z-index: 1;
	}
	.mantras-circle .item:nth-child(6) img {
		offset-path: circle(var(--icon-radius) at 30% 70%);
		offset-rotate: 0deg;
		z-index: 1;
	}
	.mantras-circle .item:nth-child(8) img {
		offset-path: circle(var(--icon-radius) at 35% 32%);
		offset-rotate: 0deg;
		z-index: 1;
	}
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
		/* Styles */
		.item {
			& > img {
				width: 92px;
				height: 92px !important;
			}
		}
	}
	/* PREVIOUS SIBLINGS - move backward (subtract offset) */
	/* previous + 1 */
	.item:has(+ .item:is(:hover, :focus-visible)),                            /* +1 has hover/focus  */
	.item:nth-child(1):is(:hover, :focus-visible) ~ .item:last-child{         /* first : last sibling*/
		/*--offset-delta: calc(-1 * var(--hover-step-sibling-1));
		--item-zindex: 9;*/
	}

	/* previous + 2 */
	.item:has(+ .item + .item:is(:hover, :focus-visible)),                      /* +1 has hover/focus  */
	.item:nth-child(1):is(:hover, :focus-visible) ~ .item:nth-last-child(2),    /* 1st : select last -1 */
	.item:nth-child(2):is(:hover, :focus-visible) ~ .item:last-child            /* 2nd : select last -2 */
	{
		/*--offset-delta: calc(-1 * var(--hover-step-sibling-2));
		--item-zindex: 8;*/
	}

	/* previous + 3 */
	.item:has(+ .item + .item + .item:is(:hover, :focus-visible)),              /* +2 has hover/focus  */
	.item:nth-child(1):is(:hover, :focus-visible) ~ .item:nth-last-child(3),    /* 1st : select last -2 */
	.item:nth-child(2):is(:hover, :focus-visible) ~ .item:nth-last-child(2),    /* 2nd : select last -1 */
	.item:nth-child(3):is(:hover, :focus-visible) ~ .item:last-child            /* 3rd : select last */
	{
		/*--offset-delta: calc(-1 * var(--hover-step-sibling-3));
		--item-zindex: 7;*/
	}

	/* NEXT SIBLINGS - move forward (add offset) */
	/* next + 1 */
	.item:is(:hover, :focus-visible) + .item,                                     /* +1  has hover/focus */
	.mantras-circle:has(.item:last-child:is(:hover, :focus-visible)) .item:first-child,   /* last  : select first (using :has() on parent) */
	.mantras-circle:has(.item:nth-last-child(2):is(:hover, :focus-visible))               /* last-1 : select first */
	.item:first-child {
		/*--offset-delta: var(--hover-step-sibling-1);
		--item-zindex: 9;*/
	}

	/* next + 2 */
	.item:is(:hover, :focus-visible) + .item + .item,                               /* +2 has hover/focus  */
	.mantras-circle:has(.item:last-child:is(:hover, :focus-visible)) .item:nth-child(2),    /* last  : select first +1  */
	.mantras-circle:has(.item:nth-last-child(2):is(:hover, :focus-visible)).item:first-child/* last+1  : select first +1  */
	{
		/*--offset-delta: var(--hover-step-sibling-2);
		--item-zindex: 8;*/
	}

	/* next + 3 */
	.item:is(:hover, :focus-visible) + .item + .item + .item,                         /* +3 has hover/focus */
	.mantras-circle:has(.item:last-child:is(:hover, :focus-visible)) .item:nth-child(3),      /* last  : select first +2  */
	.mantras-circle:has(.item:nth-last-child(2):is(:hover, :focus-visible)).item:nth-child(2) /* last+1  : select first +1  */
	{
		/*--offset-delta: var(--hover-step-sibling-3);
		--item-zindex: 7;*/
	}
}

@layer general {
	* {
		box-sizing: border-box;
	}
	body {
		/*display: grid;*/
		place-content: center;
		font-family: "Lato", sans-serif;
		/*background: #efefef;
		color: #222;
		min-height: 100svh;
		font-family: system-ui;

		background-image: radial-gradient(
		circle,
		rgba(70 130 180 / 0.75) 1px,
		#0000 1px
		);
		background-size: 50px 50px;
		background-attachment: fixed;*/
	}
}
.mantras-data{
	top: 100%;
	left: 30%;
	margin-top: 10px;
	width: 40%;
	opacity: 0;
	-webkit-transform: translate3d(0, -15px, 0);
	transform: translate3d(0, -15px, 0);
	-webkit-transition: all 150ms linear;
	-o-transition: all 150ms linear;
	transition: all 150ms linear;
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.4;
	visibility: hidden;
	pointer-events: none;
}
.mantras-circle button:hover + .mantras-data {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.statement {
	width: 240px;
	position: absolute;
	z-index: 10;
	background: #FFF;
	border-radius: 50%;
	width: 400px;
	height: 400px;
	align-content: center;
	padding: 2rem;
	filter: drop-shadow(3px 3px 5px rgba(0 0 0 / .25));
}
.statement h3 {
    font-size: 1.75rem;
    margin: 0;
}
.statement p {
    line-height: 1.8;
    font-size: 1rem;
}
button.item::before {
    content: "»";
    position: absolute;
    opacity: 0;
    top: 3rem;
    right: -20px;
    transition: 0.2s;
}
button.item:hover:before {
    opacity: 1;
    right: 0px;
    z-index: 99;
    font-size: 3vw;
    transform: rotate(90deg);
}
/*Possible framework css end*/

/*Book Preview css start*/
.chapter__preview2-content {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0;
}
.chapter__preview2-container {
    display: flex;
    width: 90vw;
}
.chapter__preview2 .panel {
    background-color: #f5ebe6;
    background-size: cover;
    background-position: 10000px;
    background-repeat: no-repeat;
    height: 60vh;
    border-radius: 10px;
    color: #ffffff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px #876585;
    transition: all 0.5s;
}
.chapter__preview2 .panel {
    background-color: #F6F6F6;
    border: 5px solid #F6F6F6;
}
.chapter__preview2 .panel.active {
    background-position: center;
    flex: 5;
    box-shadow: none;
}
.chapter__preview2 .cover-panel {
    height: 80vh;
    flex: 0.8;
}
.chapter__preview2 .panel.active a {
    position: absolute;
    width: 92%;
    height: 92%;
    z-index: 99;
}
.chapter__preview2 .panel.active h3 {
    opacity: 0;
}
.chapter__preview2 .panel h3 {
    font-size: 28px;
    padding: 10px;
    margin: 0;
    opacity: 1;
    writing-mode: sideways-rl;
    text-orientation: upright;
}
/*Book preview css end*/

/*Social Icons CSS Start*/
.elementor-icon.elementor-social-icon {
    box-shadow: 3px 3px #876585;
}
.elementor-icon.elementor-social-icon:hover {
    box-shadow: none;
}
/*Social Icons CSS End*/

.elementor-alert-info .elementor-alert {
    color: #000000 !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.chapter__preview2 .cover-panel {
		height: 55vh;
	}
	.banner-content h2 {
		font-size: 3vw;
		line-height: 3.5vw;
	}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
   .elementor-8 .elementor-element.elementor-element-08d5132:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-08d5132 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    	background-color: transparent !important;
	}
	.chapter__preview2 .cover-panel {
		height: 40vh;
	}
	.banner-content h2 {
		font-size: 5vw;
		line-height: 5.5vw;
	}
}

@media (min-width: 320px) and (max-width: 767px) {
	.banner-content h2 {
		font-size: 5vw;
		line-height: 6.5vw;
	}
	.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon, .elementor-icon-box-content{
		align-content: center;
	}
	.mantras-circle::before {
		font-size: 20px;
		padding: 10px;
		font-weight: 400;
	}
	.chapter__preview2 .panel.active {
        height: 40vh;
    }
	.chapter__preview2 .cover-panel {
        height: 60px;
    }
	.chapter__preview2-container {
        flex-direction: column;
        display: block;
    }
	.chapter__preview2 .panel h3 {
		writing-mode: horizontal-tb;
	}
}
@media (max-width: 768px) {
    .banner {
        background-position: center left !important;
        background-size: cover !important;
    }
}

@media (max-width: 767.98px) {
.bg-offset-hero::after {
          width: 100%;
   }
}