body,
.hero-banner,
.banner-content{
	position: relative;
}
.banner-content{
	z-index: 1;
}
body{
	overflow-x: hidden;
}
.hero-banner{
	padding-top: 24px;
}

.res-card {
	margin-right: 32px;
    position: relative;
	max-width: 261px;
}
.res-card.rs-w {
    margin-right: 0;
}

.res-card:hover a .link {
	text-decoration: underline;
}

.res-card .title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 3.4rem;
	padding: 8px 0;
	text-decoration: none;
	color:#000;
}

.res-card .desc {
	font-size: 1.6rem;
	line-height: 2.4rem;
	padding-bottom: 24px;
	text-decoration: none;
	color:#000;
	font-weight: 400;
}

.res-card .link {
	position: absolute;
	bottom: 40px;
	font-size: 1.4rem;
	line-height: 1.6rem;
	font-family: var( --workSans-font-family);
	font-weight: var(--btn-font-weight);
}

.container.res-card-sec {
	padding: 88px 15px 88px;
	display: flex;
}

.col-sm-6 figure{
	margin: 0;
}

.hero-banner .title {
	margin: 0 0 16px;
}
.cta-container {
	display: flex;
	justify-content: flex-start;
	gap: 20px;
	margin-top: 30px;
}

.cta-container .action-wrapper.col-sm-6 {
	padding-left: 0px;
	padding-right: 0px;
}
.res-card .card-container{
	width:100%;
	height:100%;
	text-decoration: none;
	display: block;
	padding: 24px 24px 54px;
	border-radius: 16px;
	background: var(--light-lav-bg-color);
	box-shadow: 0px 8px 16px 0px rgba(91, 115, 139, 0.16), 0px 0px 2px 0px rgba(91, 115, 139, 0.16);
}
body::after {
    content: "";
    width: 514px;
    height: 514px;
    top: -110px;
    overflow: hidden;
    right: 0px;
    position: absolute;
    border-radius: 50% 0% 0 0;
    background: radial-gradient(50% 50% at 120% 50%, #FFCD7D 0%, rgba(255, 205, 125, 0) 100%);
}
.hero-banner:after {
	content: "";
	width: 24%;
	height: 445px;
	top: 60%;
	left: 0px;
	transform: translate(-50%, -50%);
	position: absolute;
	border-radius: 516px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(123, 209, 253, 0.5) 0%, rgba(229, 246, 255, 0) 100%);
  
}
@media only screen and (min-width: 768px) {
	.col-sm-6 {
		width: 50%;
		float: left;
		padding-left: 15px;
		padding-right: 15px;
	}
	.col-sm-6.banner-content{
		padding-left: 0;
	}
	body:before {
		content: "";
		width: 465px;
		height: 465px;
		border-radius: 465px;
		background: radial-gradient(50% 50% at 50% 50%, #C4BCDC 0%, rgba(196, 188, 220, 0) 100%);
		top: -130px;
		left: 33%;
		transform: translate(-50%, -50%);
		position: absolute;
	  }
	.cta-container .action-wrapper{
		width:48%;
	}

	.banner-content {
		max-width: 600px
	}

	.hero-banner img {
		width: auto;
	}

	.hero-banner .row .col-sm-6:nth-child(2) {
		align-self: center;
		text-align: right;
        padding-right: 40px;
	}

	.hero-banner .row {
		display: flex;
		margin: 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 992px) {

	.hero-banner .title {
		font-size: 5rem;
		line-height: 6rem;
	}

	.hero-banner img {
		margin-top: 30px;
	}

	.hero-banner .desc {
		width: 100%;
		max-width: 586px;
	}
	.cta-container .btn{
		font-size: 1.2rem;
		padding: 16px 5px;
		line-height: 1.4rem;
		height: auto;
	}

	.container.res-card-sec {
		flex-wrap: wrap;
		justify-content: unset;
	}

	.res-card {
		margin-bottom: 20px;
		max-width: none;
		width: 47%;
		margin-right: 3%;
	}

	.res-card:nth-child(even) {
		margin-right: 0px;
	}
    .hero-banner .row .col-sm-6:nth-child(2) {
        padding-right: 30px;
        padding-top: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

	.hero-banner .title {
		font-size: 5.4rem;
		line-height: 6.5rem;
	}

	.btn {
		font-size: 1.6rem;
		padding: 5px 19px;
		line-height: 4.5rem;
	}
}
@media only screen and (min-width: 992px){
	.res-card {
		flex: 1;
	}
}

@media only screen and (max-width: 767px) {
	body::after{
		top: -130px;
        width: 240px;
        height: 370px;
		background: radial-gradient(50% 50% at 110% 50%, rgba(196, 188, 220, 0.6) 0%, #FFFFFF 100%);
	}
	.hero-banner:after {
		width: 360px;
		height: 303px;
		top: 200px;
		background: radial-gradient(50% 50% at 50% 50%, #FFEDCE 0%, #FFF 100%);
	}
	.hero-banner .title {
		margin: 0 0 24px;
	}

	.cta-container {
		flex-direction: column;
		margin-top: 24px;
		gap:0
	}

	.cta-container .go-to-hp{
		margin-top: 24px;
	}

	.hero-banner .container{
		padding: 0 30px;
	}

	.action-wrapper .btn {
		width: 100%;
		max-width: none;
	}

	.hero-banner .row {
		display: flex;
		flex-direction: column;
		margin: 0;
	}

	.container.res-card-sec {
		flex-direction: column;
		padding: 0 30px;
	}
	.banner-content{
		margin-bottom: 40px;
	}

	.res-card {
		width: 100%;
		margin: 0 auto 24px;
		text-align: center;
		max-width: unset;

	}
	.res-card .card-container{
		padding: 24px 24px 40px;
	}
	.res-card .link{
		position: unset;
	}

	.res-card:last-child {
		margin-top: 0px;
	}
    .hero-banner{
		padding: 40px 0;
    }
    .hero-wrap .col-sm-6 figure{
        text-align: center;
        max-width: 300px;
        margin: 0 auto;
    }
	.res-card .title {
		padding: 12px 0 8px;
	}
	.res-card .desc {
		padding-bottom: 30px;
	}
}