/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =========================================================================
   Flagship Course (page 45): responsive body map.
   The body image and its modal "circle" buttons live in two columns
   (95355a7 = desktop/tablet, c25338d = mobile). The circles are absolutely
   positioned, so we make each column box exactly match the image box and
   place every circle by the % position of its centre on the image. Circle
   size scales with the image too.
   ========================================================================= */

/* Column == image box */
.elementor-45 .elementor-element.elementor-element-95355a7,
.elementor-45 .elementor-element.elementor-element-c25338d {
	max-width: 600px;
	padding: 0;
}
.elementor-45 .elementor-element-95355a7 > .elementor-widget-image,
.elementor-45 .elementor-element-c25338d > .elementor-widget-image {
	width: 100%;
	max-width: 100%;
}
.elementor-45 .elementor-element-95355a7 .elementor-widget-image img,
.elementor-45 .elementor-element-c25338d .elementor-widget-image img {
	width: 100% !important;
	max-width: 100%;
	height: auto;
	display: block;
}

/* Circle widgets: scale with the image, anchored at their centre */
.elementor-45 .elementor-element-95355a7 > .elementor-widget-bdt-modal,
.elementor-45 .elementor-element-c25338d > .elementor-widget-bdt-modal {
	position: absolute !important;
	width: 14% !important;
	max-width: none;
	margin: 0;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%);
	z-index: 2;
}
.elementor-45 .elementor-element-95355a7 > .elementor-widget-bdt-modal .bdt-modal-wrapper,
.elementor-45 .elementor-element-c25338d > .elementor-widget-bdt-modal .bdt-modal-wrapper {
	width: 100%;
}
.elementor-45 .elementor-element-95355a7 > .elementor-widget-bdt-modal .bdt-modal-wrapper .bdt-modal-button,
.elementor-45 .elementor-element-c25338d > .elementor-widget-bdt-modal .bdt-modal-wrapper .bdt-modal-button {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	border-radius: 50% !important;
}

/* Circle centres, % of the image (desktop / tablet column) */
.elementor-45 .elementor-element.elementor-element-b9b1ae0 { left: 14.35% !important; top: 34.08% !important; } /* wrist */
.elementor-45 .elementor-element.elementor-element-f155e91 { left: 35.85% !important; top: 28.05% !important; } /* elbow */
.elementor-45 .elementor-element.elementor-element-fff24d7 { left: 81.18% !important; top: 18.90% !important; } /* shoulder */
.elementor-45 .elementor-element.elementor-element-c358b4e { left: 75.68% !important; top: 39.00% !important; } /* hip */
.elementor-45 .elementor-element.elementor-element-ab09e85 { left: 70.85% !important; top: 64.23% !important; } /* knee */
.elementor-45 .elementor-element.elementor-element-cde24f8 { left: 44.51% !important; top: 87.76% !important; } /* ankle */

/* Circle centres, % of the image (mobile column) */
.elementor-45 .elementor-element.elementor-element-d9b73ee { left: 13.13% !important; top: 32.24% !important; } /* wrist */
.elementor-45 .elementor-element.elementor-element-2eea42f { left: 33.73% !important; top: 26.83% !important; } /* elbow */
.elementor-45 .elementor-element.elementor-element-f25852b { left: 79.40% !important; top: 18.01% !important; } /* shoulder */
.elementor-45 .elementor-element.elementor-element-7196d75 { left: 74.03% !important; top: 38.00% !important; } /* hip */
.elementor-45 .elementor-element.elementor-element-9d53ac9 { left: 68.06% !important; top: 61.05% !important; } /* knee */
.elementor-45 .elementor-element.elementor-element-d517c70 { left: 42.69% !important; top: 83.74% !important; } /* ankle */

/* =========================================================================
   Modal content: hover-video course template (Wrist, template 195) on
   tablet and mobile. Element Pack lays the four layer buttons out as a
   wrapping flex row with a -30px bottom margin, so once they wrap they
   overlap each other. Below 1024px we switch the layer buttons and the
   matching "Coming Soon" row to equal-column grids: 4 columns on tablet,
   2 columns on phones.
   ========================================================================= */
@media (max-width: 1024px) {
	.bdt-modal .bdt-hover-video.skin-default .bdt-hover-btn-wrapper {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		padding: 0 12px;
		margin: 12px 0 0;
		box-sizing: border-box;
	}
	.bdt-modal .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn {
		display: flex;
		margin: 0 !important;
		padding: 10px 6px 14px;
		min-width: 0;
		justify-content: center;
		text-align: center;
	}
	.bdt-modal .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-btn-text {
		font-size: 14px;
		line-height: 1.2;
	}

	/* "Coming Soon" row under the layer buttons: same grid and gutters */
	.bdt-modal .elementor-195 .elementor-element.elementor-element-747227a {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		padding: 8px 12px 0 !important;
		box-sizing: border-box;
	}
	.bdt-modal .elementor-195 .elementor-element-747227a > .elementor-widget-button {
		width: 100%;
		max-width: 100%;
		margin: 0;
	}
	.bdt-modal .elementor-195 .elementor-element-747227a .elementor-button-wrapper,
	.bdt-modal .elementor-195 .elementor-element-747227a .elementor-button {
		width: 100%;
	}
	.bdt-modal .elementor-195 .elementor-element-747227a .elementor-button {
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		padding: 8px 6px !important;
		font-size: 12px;
		white-space: nowrap;
	}
}
@media (max-width: 767px) {
	.bdt-modal .bdt-hover-video.skin-default .bdt-hover-btn-wrapper,
	.bdt-modal .elementor-195 .elementor-element.elementor-element-747227a {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-left: 10px;
		padding-right: 10px;
	}
	.bdt-modal .bdt-hover-video.skin-default .bdt-hover-btn-wrapper .bdt-hover-btn .bdt-hover-btn-text {
		font-size: 13px;
	}
}