body {
	&.home {

		h1,
		.h1 {
			font-size: 45px;
			line-height: 1.1em;

			/* Desktop Styles */
			@media (width >= 1024px) {
				font-size: 55px;
			}
		}

		h2,
		.h2 {
			font-size: 30px;
			line-height: 1.13em;

			/* Desktop Styles */
			@media (width >= 768px) {
				font-size: 50px;
			}
		}

		h3,
		.h3 {

			/* Desktop Styles */
			@media (width >= 1024px) {
				font-size: 39px;
				line-height: 1.25em;
			}
		}

		h4,
		.h4,
		h5,
		h6 {

			/* Desktop Styles */
			@media (width >= 1024px) {
				font-size: 31px;
			}
		}

		.rm-module {
			max-width: 100%;
			overflow: hidden;
			scrollbar-width: none;
		}

		.module-preheading {
			color: var(--primary-alt);
			font-family: var(--primary-font);
			font-size: 18px;
			font-weight: var(--fw-bold);
			letter-spacing: .06em;
			margin-bottom: 10px;
			display: block;
			text-transform: uppercase;
			line-height: 1em;
			@media (width >= 768px) {
				font-size: 26px;
			}
			@media (width >= 1024px) {
				font-size: 26px;
			}
		}
	}
}

/*=======================================
=            Home Procedures            =
=======================================*/
.home-procedures {
	&.mod-procedures {
		position: relative;
		.heading-group {
			@media (width >= 1024px) {
				position: absolute;
				width: 50%;
				left: 50%;
				text-align: center;
				padding-left: 16px;
			}
			@media (width >= 1560px) {
				padding-right: calc(40px + (50vw - (var(--og-full) / 2)));;
			};
		}
		.module-preheading {
			@media (width >= 1024px) {
				margin-top: 100px;
			}
		}
		.module-heading {
			margin-top: 0;
		}
	}
}

/*===================================
=            Home Doctor            =
===================================*/

.home-doctor {
	&.mod-doctors {
		padding: 0;
		.module-heading {
			margin-top: 0;
		}
	}
}


/*==================================
=            Home Staff            =
==================================*/

.home-staff {
	&.mod-staff {
		background-position: center top;
		background-size: 100%;
		background-repeat: no-repeat;
		background-image: linear-gradient(to bottom, rgb(from var(--light-alt) r g b / 0.0) 24vw, rgb(from var(--light-alt) r g b / 0.91) 54vw, rgb(from var(--light-alt) r g b / 1) 60vw), url('/wp-content/themes/rm-basetheme/images/wpsg-team.jpg');
		padding-top: 60vw;
		@media (width < 1024px) {
			padding-left: 0;
			padding-right: 0;
		}
		@media (width >= 1024px) {
			padding-right: 0;
			padding-top: 60vw;
		}
		.heading-group {
			@media (width >= 1560px) {
				padding-right: calc(40px + (50vw - (var(--og-full) / 2)));
			}
		}
		.split-wrapper {
			width: 100%;
			overflow: hidden; /* CRITICAL: Prevents native scroll conflict with GSAP */
			cursor: grab;
		}

		.split-wrapper:active {
			cursor: grabbing;
		}
		.icon-content {
			padding: 20px;
			@media (width >= 768px) {
				padding: 40px;
			}
			@media (width >= 1024px) {
				padding-left: 0;
			}
			@media (width >= 1024px) {
				padding-right: calc(40px + (50vw - (var(--og-full) / 2)));
			}
		}
		.icon-items {
			display: flex;
			width: max-content; /* CRITICAL: Allows ul to calculate full width beyond screen */
			column-gap: 0 !important;
			padding: 0;
			margin: 0;
			list-style: none;
			will-change: transform;
			
			li {
				min-width: 200px;
				background-color: #f0f0f0;
				flex-shrink: 0;
				/* width: 25vw; */
				position: relative;
				user-select: none; /* Prevents text/image selection while dragging */
				&:hover {
					.icon-img {
						img {
							opacity: 0;
						}
					}
					.item-content {
						background: linear-gradient(to bottom, rgb(from var(--dark-color) r g b / 0.0) 32%, rgb(from var(--dark-color) r g b / 0.60) 100%);
					}
				}

				img {
					pointer-events: none; /* Prevents native image drag behavior in browsers */
					opacity: 1;
					transition: opacity .3s;
				}

				.icon-img {
					max-width: 100% !important;
					margin-bottom: 0!important;
					width: 100%;
					height: 100%;
					background-size: cover;
					background-position: center;
					background-color: var(--primary-color);
					background-blend-mode: multiply;
					width: 321px!important;
					@media (width >= 768px) {
						width: 384px!important;
					}
					@media (width >= 1024px) {
						width: 435px!important;
					}
				}

				.icon-content-link {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					flex-direction: column;
					align-items: center;
					text-decoration: none;
				}

				.item-content {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					padding-bottom: 30px;
					transition: all .3s;
					mix-blend-mode: normal;
					background: linear-gradient(to bottom, rgb(from var(--dark-color) r g b / 0.0) 32%, rgb(from var(--dark-color) r g b / 0.80) 100%);

					h3 {
						color: var(--light-color);
						font-weight: var(--fw-bold);
					}
					.staff-title {
						font-size: 16px;
						color: var(--primary-alt);
						letter-spacing: .05em;
						text-align: center;
						@media (width >= 768px) {
							font-size: 18px;
						}
					}

				}
			}
		}
		
		/* Custom Scrollbar */
		.custom-scrollbar {
			margin-top: 26px;
			margin-bottom: 26px;
			padding: 0 20px;
			@media (width >= 768px) {
				margin-top: 46px;
				margin-bottom: 46px;
				padding: 0 40px;
			}
			@media (width >= 1024px) {
				margin-top: 86px;
				margin-bottom: 86px;
			}
			@media (width >= 1560px) {
				padding-right: calc(40px + (50vw - (var(--og-full) / 2)));
			}
		}

		.custom-scrollbar-track {
			width: 100%;
			height: 8px;
			background-color: var(--tertiary-alt);
			position: relative;
			overflow: hidden;
			cursor: pointer;
			@media (width >= 1024px) {
				max-width: 820px;
				margin: 0 auto;
			}
		}

		.custom-scrollbar-thumb {
			height: 100%;
			width: 20%; /* Will be dynamically resized via JS, or set fixed */
			background-color: var(--primary-alt);
			position: absolute;
			top: 0;
			left: 0;
			cursor: grab;
			will-change: transform;
		}

		.custom-scrollbar-thumb:active {
			background-color: var(--primary-color);
			cursor: grabbing;
		}

		.read-more-button-container {
			@media (width >= 1560px) {
				padding-right: calc(40px + (50vw - (var(--og-full) / 2)));;
			}
		}
	}
}


/*=======================================================
=            Home Enhanced Skin & Aesthetics            =
=======================================================*/

.home-enhanced {
	&.mod-basic {
		background-image: linear-gradient(to bottom, rgb(from var(--primary-color) r g b / 0.0) 40vw, rgb(from var(--primary-color) r g b / 1) 150vw), url('/wp-content/themes/rm-basetheme/images/bg-enhanced-skin-aesthetics.jpg');
		background-position: -110vw top;
		background-size: 300%;
		padding-top: 60vw;
		margin-bottom: -168vw;
		@media (width >= 768px) {
			background-image: linear-gradient(to bottom, rgb(from var(--primary-color) r g b / 0.0) 40vw, rgb(from var(--primary-color) r g b / 1) 120vw), url('/wp-content/themes/rm-basetheme/images/bg-enhanced-skin-aesthetics.jpg');
			padding-top: 50vw;
			background-size: 210%;
			background-position: -62vw top;
		}
		@media (width >= 1024px) {
			background-image: linear-gradient(to bottom, rgb(from var(--primary-color) r g b / 0.0) 26vw, rgb(from var(--primary-color) r g b / 1) 44vw), url('/wp-content/themes/rm-basetheme/images/bg-enhanced-skin-aesthetics.jpg');
			margin-bottom: -500px;
			background-size: 100vw;
			padding-top: 24vw;
			background-position: center top;
		}
		/* grid styling */
		.home-enhanced-grid {
			@media (width >= 1024px) {
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 32px;
				row-gap: 32px;
				grid-template-rows: repeat(6, minmax(50px, auto));
			}
			
		}
		.enhanced-heading {
			grid-column: 1;
			grid-row-start: 1;
			grid-row-end: span 3;
		}
		.enhanced-content {
			grid-column: 2;
			grid-row-start: 3;
			grid-row-end: span 2;
		}
		.enhanced-photo-1 {
			grid-column: 1;
			grid-row-start: 4;
			grid-row-end: span 3;
			margin-bottom: 20px;
		}
		.enhanced-photo-2 {
			grid-column: 2;
			grid-row-start: 5;
			grid-row-end: span 2;
		}

		/* basic styling */
		h2 {
			img {
				width: 100%;
			}
		}
		.enhanced-content {
			h3 {
				font-size: 26px;
			}
			h4 {
				font-size: 18px;
			}
		}
	}
}

/*=========================================
=            Home Testimonials            =
=========================================*/

.home-testimonials {
	&.mod-testimonial {
		background-position: center top;
		background-color: var(--light-color);
		/* background: linear-gradient(to bottom, var(--light-alt), var(--light-color)); */
		padding-top: 172vw;
		@media (width < 1024px) {
			background-image: none!important;
		}
		@media (width >= 1024px) {
			padding-right: 50vw;
			padding-top: 600px!important;
		}
		h2 {
			color: var(--primary-alt);
			font-family: var(--primary-font);
			font-size: 18px;
			font-weight: var(--fw-bold);
			letter-spacing: .06em;
			margin-bottom: 10px;
			display: block;
			text-transform: uppercase;
			line-height: 1em;
			position: relative;
			padding-top: 70px;
			@media (width >= 768px) {
				padding-top: 100px;
				font-size: 26px;
			}
			@media (width >= 1024px) {
				font-size: 26px;
				text-align: left;
			}
			&:before {
				content: '';
				background-image: url('/wp-content/themes/rm-basetheme/images/svg/five-stars.svg');
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				width: 225px;
				height: 39px;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
				@media (width >= 768px) {
					width: 327px;
					height: 54px;
				}
				@media (width >= 1024px) {
					left: 0;
					transform: translateX(0);
				}
			}
		}
		.module-subheading {
			font-size: 26px;
			line-height: 1.07em;
			font-weight: var(--fw-normal);
			font-family: var(--secondary-font);
			text-transform: none;

			/* Tablet Styles */
			@media (width >= 768px) {
				font-size: 36px;
			}
			@media (width >= 1024px) {
				text-align: left;
			}
		}
		.split-wrapper {
			padding: 0;
			border: none;
		}
		blockquote,
		figcaption {
			@media (width >= 1024px) {
				text-align: left;
			}
		}
		.owl-dots {
			@media (width >= 1024px) {
				justify-content: flex-start;
			}
		}
	}
}

/*===================================
=            Home Social            =
===================================*/

.home-social {
	&.mod-basic {
		background-position: center top;
		padding-left: 0;
		padding-right: 0;
		@media (width < 1024px) {
			background-image: none!important;
		}
		h2 {
			position: relative;
			padding-top: 50px;
			@media (width >= 768px) {
				padding-top: 80px;
			}
			&:before {
				content: '';
				background-image: url('/wp-content/themes/rm-basetheme/images/svg/soc-instagram.svg');
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				width: 50px;
				height: 50px;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				@media (width >= 768px) {
					width: 80px;
					height: 80px;
				}
			}
		}
		.soc-link {
			text-align: center;
			margin-bottom: 30px;
			a {
				text-decoration: none;
				font-size: 18px;
				font-weight: var(--fw-bold);
				color: var(--primary-alt);
				text-transform: uppercase;
				@media (width >= 768px) {
					font-size: 22px;
				}
			}
		}
	}
}