.HOMESOLUTIONS {
	border-radius: 20rem;
	background: #EBEEF5;
	overflow: hidden;
}

.HOMESOLUTIONS .head {
	width: 1200rem;
	height: 580rem;
	position: relative;
	background: url(head-bg.svg) no-repeat center / 100%;
}

.HOMESOLUTIONS .body {
	padding: 32rem;
}

.HOMESOLUTIONS .foot {
	width: 1200rem;
	height: 630rem;
	position: relative;
	background: url(foot-bg.svg) no-repeat center / 100%;
}


.HOMESOLUTIONS .primary-heading {
	position: absolute;
	top: 96rem;
	left: 50%;
	width: var(--col-8);
	max-height: 75rem;
	overflow: hidden;
	text-align: center;
	transform: translate(-50%, -50%);
	color: #fff;
}

.HOMESOLUTIONS .box-1 {
	position: absolute;
	top: 204rem;
	left: 214rem;
	width: 354rem;
	height: 123rem;
	overflow: hidden;
	line-height: 1.5;
	font-size: 16rem;
}

.HOMESOLUTIONS .box-2 {
	position: absolute;
	top: 204rem;
	left: 780rem;
	width: 354rem;
	height: 123rem;
	overflow: hidden;
	line-height: 1.5;
	font-size: 16rem;
}

.HOMESOLUTIONS .secondary-heading {
	margin: 0 auto 48rem;
	text-align: center;
	width: var(--col-10);
}

.HOMESOLUTIONS .bottom-content {
	position: absolute;
	top: 391rem;
	left: 32rem;
	width: 570rem;
	max-height: 420rem;
	overflow: hidden;
	color: #fff;
	transform: translate(0, -50%);
}

.HOMESOLUTIONS .box {
	position: relative;
	height: 496rem;
	border-radius: 10rem;
	overflow: hidden;
	background: linear-gradient(#1C6BFF, #D2E3FB);
}

.HOMESOLUTIONS .box .label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 32rem 50rem;
	color: #fff;
	background: #1C6BFF;
	font-size: 16rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	transition: background 0.25s;
	text-wrap: balance;
}

.HOMESOLUTIONS .box .label a {
	color: #fff;
}

.HOMESOLUTIONS .box .label a::after {
	content: '';
	position: absolute;
	top: -359px;
	left: 0px;
	width: 260rem;
	height: 494rem;
}

.HOMESOLUTIONS .box:hover .label {
	background: #252E80;
}

.HOMESOLUTIONS .box .text {
	color: #fff;
	padding: 24rem 12rem 0;
	font-size: 16rem;
	line-height: 1.25;
	text-align: center;
	transform: translate(0, -100%);
	opacity: 0;
	transition: opacity 0.25s, transform 0.25s;
	text-wrap: balance;
}

.HOMESOLUTIONS .box:hover .text {
	transform: translate(0, 0);
	opacity: 1;
}

.HOMESOLUTIONS .box .image {
	background: rgba(0, 0, 0, 0.25);
	position: absolute;
	opacity: 0;
	transition: opacity 0.25s, transform 0.25s;
	background: no-repeat center / cover;
}

.HOMESOLUTIONS .box:hover .image {
	transform: translate(0, 0) scale(1);
	opacity: 1;
}

.HOMESOLUTIONS .box .image-1 {top: 140rem; left: 108rem; width: 175rem; height: 375rem; transform: translate(-65rem, -30rem); opacity: 1;
	background-image: url(img-1.png);}
.HOMESOLUTIONS .box .image-2 {top: 105rem; left: 20rem; width: 150rem; height: 190rem; transform: translate(210rem, 0);
	background-image: url(img-2.png);}
.HOMESOLUTIONS .box .image-3 {top: 115rem; left: 50rem; width: 470rem; height: 320rem; transform: translate(0, 0) scale(0.9); opacity: 1;
	background-image: url(img-3.png);}
.HOMESOLUTIONS .box .image-4 {top: 95rem; left: 10rem; width: 220rem; height: 190rem; transform: translate(-110rem, 0);
	background-image: url(img-4.png);}
.HOMESOLUTIONS .box .image-5 {top: 115rem; right: 50rem; width: 470rem; height: 320rem; transform: translate(0, 0) scale(0.9); opacity: 1;
	background-image: url(img-5.png);}
.HOMESOLUTIONS .box .image-6 {top: 95rem; left: 30rem; width: 220rem; height: 190rem; transform: translate(-20rem, 90rem); opacity: 1;
	background-image: url(img-6.png);}
.HOMESOLUTIONS .box .image-7 {top: 140rem; right: 108rem; width: 175rem; height: 375rem; transform: translate(65rem, -30rem); opacity: 1;
	background-image: url(img-7.png);}
.HOMESOLUTIONS .box .image-8 {top: 105rem; right: 20rem; width: 150rem; height: 190rem; transform: translate(210rem, 0);
	background-image: url(img-8.png);}

@media screen and (max-width: 960px) {
	.HOMESOLUTIONS {border-radius: 10rem; background: #e3e3eb;}

	.HOMESOLUTIONS .head {width: auto; height: 710rem; background: url(head-bg-mobile.svg) no-repeat center / 400rem 710rem;}
	.HOMESOLUTIONS .body {padding: 24rem;}
	.HOMESOLUTIONS .foot {width: auto; height: 970rem; background: url(foot-bg-mobile.svg) no-repeat center / 400rem 970rem;}

	.HOMESOLUTIONS .primary-heading {width: 90%; top: 116rem; max-height: 164rem;}
	.HOMESOLUTIONS .box-1 {top: 240rem; left: 50%; width: 194rem; height: 105rem; margin-left: -60rem; font-size: 12rem;}
	.HOMESOLUTIONS .box-2 {top: 390rem; left: 50%; width: 194rem; height: 105rem; margin-left: -60rem; font-size: 12rem;}
	.HOMESOLUTIONS .secondary-heading {width: 90%; margin-bottom: 24rem;}
	.HOMESOLUTIONS .bottom-content {width: auto; left: 24rem; right: 24rem; text-align: center}

	.HOMESOLUTIONS .box {max-width: 260rem; margin: 0 auto;}
	.HOMESOLUTIONS h5 {font-size: 12rem; margin-bottom: -4rem;}
}