/*
Theme Name: Human Edge in the AI Age
Theme URI: https://www.humanedgeintheaiage.com
Author: Human Edge in the AI Age
Author URI: #
Description: A custom WordPress theme.
Version: 1.0.0
*/
@import url('https://use.typekit.net/pfk5evz.css');
h1, h2, h3, h4, h5, h6 {
    font-family: alternate-gothic-no-2-d, sans-serif !important;
    color: #575757;
    font-weight: 400 !important;
}
p {
    margin: 0;
}
.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);
}

/*top header and navigation css start*/
.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*/
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*/
/*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: 3px !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;
	}
	.statement {
		width: 350px;
		height: 350px;
	}
	.statement p {
		line-height: 1.5;
		font-size: 0.9rem;
	}
}
@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%;
   }
}