.wp-block {} /*  (.wp-block {} ensures MT files load in Gutenberg editor) */

/*  MICROTHEMER STYLES  */


/*= General =================== */

/** General >> Elementor post **/
.elementor-post__badge {
	margin-top: 150px !important;
}

/** General >> Heading 3 (#1) bold **/
.mt-2436 .elementor-text-editor > h3:nth-of-type(1) > b {
	font-size: 24px !important;
}

/** General >> Heading 3 (#3) bold _2 **/
.mt-2436 .elementor-text-editor > h3:nth-of-type(3) > b {
	font-size: 24px !important;
}

/** General >> Heading 3 bold **/
.mt-2436 h3 b {
	font-size: 34px !important;
}

/** General >> Mt 3715 shc form **/
.mt-3715 #shc-form {
	font-size: 16px !important;
}

/** General >> Mt 3715 shc url input **/
.mt-3715 #shc-url-input {
	font-size: 16px !important;
}

/** General >> Mt 3715 shc email input **/
.mt-3715 #shc-email-input {
	font-size: 16px !important;
}

/** General >> Mt 3715 shc name input **/
.mt-3715 #shc-name-input {
	font-size: 16px !important;
}

/** General >> Mt 3715 shc submit button **/
.mt-3715 #shc-submit-button {
	font-size: 16px !important;
}

/** General >> Content elementor heading title **/
.mt-4135 #content .elementor-heading-title {
	padding-bottom: 5px !important;
	border-bottom: 9px solid #F02184 !important;
	display: inline-block !important;
}

/** General >> Calendly elementor widget container **/
.calendly .elementor-widget-container {
	color: rgb(255, 255, 255) !important;
	font-size: 22px !important;
}

/** General >> Blog text elementor heading title **/
.mt-1751 .blog_text .elementor-heading-title {
	font-size: 22px !important;
}

/** General >> Blog text heading 2 **/
.blog_text h2 {
	font-size: 18px !important;
}

/** General >> Link **/
.ST_links_footer a {
	color: rgb(255, 255, 255) !important;
}

/** General >> Link (:hover) **/
.ST_links_footer a:hover {
	color: rgb(241, 33, 132) !important;
}

/** General >> Paragraph **/
.ST_postcontent h2 {
	font-size: 22px !important;
	font-weight: 600 !important;
}
.ST_postcontent h3 {
	font-size: 22px !important;
	font-weight: 400 !important;
}
.ST_postcontent h4 {
	font-size: 22px !important;
	font-weight: 300 !important;
}
.ST_postcontent h5 {
	font-size: 22px !important;
}

/** General >> Elementor heading title **/
.ST_underline h1::after {
	background-color: #F12184 !important;
	width: 100px !important;
	height: 5px !important;
	margin-top: 5px !important;
	position: absolute !important;
	top: 100% !important;
	bottom: 0 !important;
	left: 0 !important;
	content: '' !important;
}
.ST_underline h2::after {
	background-color: #F12184 !important;
	width: 100px !important;
	height: 5px !important;
	margin-top: 5px !important;
	position: absolute !important;
	top: 100% !important;
	bottom: 0 !important;
	left: 0 !important;
	content: '' !important;
}
.ST_underline h3::after {
	background-color: #F12184 !important;
	width: 100px !important;
	height: 5px !important;
	margin-top: 5px !important;
	position: absolute !important;
	top: 100% !important;
	bottom: 0 !important;
	left: 0 !important;
	content: '' !important;
}
.ST_underline h4::after {
	background-color: #F12184 !important;
	width: 100px !important;
	height: 5px !important;
	margin-top: 5px !important;
	position: absolute !important;
	top: 100% !important;
	bottom: 0 !important;
	left: 0 !important;
	content: '' !important;
}

/** General >> List item (#1) **/
.ST_bullets ul {
	list-style: none !important;
	padding-left: 0 !important;
	/* Remove default bullet points */
	/* Add space for the custom icons */
}
.ST_bullets ul li {
	position: relative !important;
	/* Position for the custom icon */
	padding-left: 2em !important;
	/* Space between the icon and the text */
	margin-bottom: .em !important;
	/* Add spacing between list items */
}
.ST_bullets ul li::before {
	content: '✅ !important;
	/* U check mark */
	position: absolute !important;
	left: 0 !important;
	/* Align the check mark to the left */
	color: #75A7AA !important;
	/* Set the check mark color */
	font-weight: bold !important;
	/* Make it bold */
	font-size: 1.3em !important;
	/* Adjust the size of the check mark */
}

/** General >> Unordered list (::marker) **/
.ONE ::marker {
	font-family: 'Font Awesome 5 Free' !important;
	color: var(--clr-primary) !important;
	font-size: 1em !important;
	font-weight: 900 !important;
	content: '\f00c' !important;
	color: #75a77a !important;
}
.ONE li {
	padding-left: 1em !important;
}

/** General >> .ST_bullets **/
.ST_bullets li {
	list-style: none !important;
	background: url("https://shorttech.co.uk/wp-content/uploads/circle-check-solid.svg") no-repeat 0 !important;
	padding-left: 1em !important;
	margin-bottom: 10px !important;
	background-size: 1.5em !important;
}
.ST_bullets ul {
	padding-left: 0px !important;
}

/** General >> ST span style **/
.mt-867 .ST_span_style {
	color: rgb(102, 102, 102) !important;
	font-size: 16px !important;
}

/** General >> Peeking heart (::before) **/
/* 1. Set your parent container to relative positioning */.peeking-heart {
	border: 0 none rgba(0, 0, 0, 0) !important;
}
.peeking-heart {
	position: relative !important;
	/* Add other styles for your container, e.g., padding, width */
	padding: 20px !important;
	border: 1px solid #ccc !important;
	/* 2. Style the ::before pseudo-element */
}
.peeking-heart::before {
	/* --- Core Positioning --- */
	content: "" !important;
	/* Required for a pseudo-element to show */
	position: absolute !important;
	/* Positions relative to the parent */
	top: 40px !important;
	/* 40px from the top edge */
	right: 40px !important;
	/* 40px from the right edge */
	/* --- Image & Sizing --- */
	/* Set a size for your pseudo-element */
	width: 150px !important;
	height: 150px !important;
	/* Add your image */
	background-image: url('https://shorttech.co.uk/wp-content/uploads/9.png') !important;
	/* <-- REPLACE WITH YOUR IMAGE PATH */
	/* Ensure the image fits well */
	background-size: contain !important;
	/* or 'cover' */
	background-repeat: no-repeat !important;
	background-position: center !important;
	/* (Optional) Uncomment to see the element's box */
	/* border: 1px solid red; */
}

/** General >> ST dots (::before) **/
.mt-5987 .ST_dots::before {
	background-image: url("/wp-content/uploads/11.png") !important;
	background-size: 250px !important;
	background-repeat: no-repeat !important;
}
.ST_dots::before {
	background-color: #ffffff !important;
	position: relative !important;
	z-index: 1 !important;
	/* 1. This is crucial. It creates the "anchor" for our
     pseudo-element to be positioned against. */
	/* 2. IMPORTANT: Give your container its own background.
     If this is transparent, the pseudo-element will show
     right through it. */
	/* Or whatever your container's bg color is */
	/* 3. This ensures the container's content (like text)
     stays on top of the pseudo-element. */
	/* 4. This creates the pseudo-element */
	content: "" !important;
	position: absolute !important;
	/* 5. This is your image */
	background-image: url('"/wp-content/uploads/11.png') !important;
	/* 6. Make the image cover the area */
	/* Stretches image to fit container's size */
	background-repeat: no-repeat !important;
	/* 7. Size it to be the same as the container */
	width: 100% !important;
	height: 100% !important;
	/* 8. Position it up and to the left */
	top: px !important;
	left: px !important;
	/* 9. THE FIX: This sends the pseudo-element *behind*
     the container it's attached to. */
	z-index: -1 !important;
}

/** General >> Button link **/
.wp-block-button__link {
	color: rgb(255, 255, 255) !important;
	background-color: rgb(117, 167, 170) !important;
}


/*( Large Desktop )*/
@media (min-width: 1200px) {
	/** General >> Peeking heart (::before) **/
	/* 1. Set your parent container to relative positioning */.peeking-heart {
	border-width: 0 !important;
	border-style: none !important;
}

}


/*( Desktop & Tablet )*/
@media (min-width: 768px) and (max-width: 979px) {
	/** General >> Peeking heart (::before) **/
	/* 1. Set your parent container to relative positioning */.peeking-heart {
	border-top-width: 0 !important;
	border-style: none !important;
}

}


/*( Tablet & Phone )*/
@media (max-width: 767px) {
	/** General >> Peeking heart (::before) **/
	/* 1. Set your parent container to relative positioning */.peeking-heart {
	border-style: none !important;
}

	/** General >> ST inline img **/
	.mt-1166 .ST-inline-img {
	width: 250px !important;
	object-fit: cover !important;
}

}


/*( Phone )*/
@media (max-width: 480px) {
	/** General >> Blog text elementor heading title **/
	.mt-1751 .blog_text .elementor-heading-title {
	font-size: 18px !important;
}

}