@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--primary-heading: 'Syne', sans-serif;
	--secondary-heading: 'Urbanist', sans-serif;
	--primary-color: #f56c02;
	--secondary-color: #0044c0;
	--linear-gradient: #0044c0;
	--default-color: #333333;
	--body-color:#666666;

	/* For Responsive Purposes */
	--smallFont: 25px;
	--largeFont: 65px;
}

#serv_con { padding: 45px 20px 40px; }

#nh_serv{background:#ffff;padding: 0 20px;font-size: 16px; font-family: var(--secondary-heading);}
#nh_serv .wrapper{max-width: 1375px;}

	.serv_con{min-height:0;padding:50px 0;}
	.serv_info{text-align: center;margin-bottom: 110px;}
	.serv_info h2::after { content: ""; background: var(--linear-gradient); width: 26px; height: 7px; border-radius: 50px; margin: 34px auto 25px; display: block; }
	.serv_info h2{font: bold var(--largeFont)/100% var(--primary-heading);}
	.serv_info h2 small{}
	.serv_info p{max-width: 1000px;width: 100%;margin: 0 auto !important;text-align: center;line-height: 27px;}
	.serv_info a{}
	.serv_info a q{}
	.serv_info a:hover{}

	.serv_boxes{display: flex; justify-content: space-between; flex-wrap: wrap;margin: 0 auto 115px; gap: 40px 0;}
	.serv_boxes section{display: inline-block; max-width: 325px;width: 24%;height: auto; padding: 45px 33px 120px;background: #fff;box-shadow: #f7f7f7 -35px 20px 40px 5px;text-align: center;border-radius: 20px 160px 170px 170px;position: relative;}
	.serv_boxes section figure{overflow: hidden;border-radius: 50%;max-width: 226px;width: 100%;aspect-ratio: 1/1;margin: 0 auto;}
	.serv_boxes section h2{position: relative;font: bold 25px/100% var(--primary-heading);margin: 46px auto 27px;color: var(--default-color);}
	.serv_boxes section h2 span{display: block;}
	.serv_boxes section p{line-height: 30px;width: 100%;margin: 0 auto;text-align: center;}
	.serv_boxes section a{display:block;width: 53px;aspect-ratio: 1/1;background: url("images/arrow-right.png") no-repeat center center, var(--secondary-color);border-radius: 50%;position: absolute;left: 0;right: 0;margin: 0 auto;bottom: 48px;}
	.serv_boxes section a:hover{  background: url("images/arrow-right.png") no-repeat center center, var(--primary-color);}

	.serv_btm_info{position: relative;}
	.serv_btm_info h2{font: bold var(--largeFont)/100% var(--primary-heading);position: relative;color: var(--default-color);}
	.serv_btm_info h2 span{display: block;}
	.serv_btm_info h2::after{content: "";background: #e5e5e5;width: 7px;height: 129px;position: absolute;left: 434px;top: 50%;transform: translateY(-50%);border-radius: 50px;}
	.serv_btm_info p{max-width: 807px;width: 59%;line-height: 25px;position: absolute;right: 0;top: 50%;transform: translateY(-50%);}
	.serv_btm_info a mark{background: var(--linear-gradient); background-clip: border-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none;font-weight: bold;}
	.serv_btm_info a:hover{text-decoration: underline;}




@media only screen
and (max-width : 1400px) {
  .serv_boxes section h2 span { display: block; }
}
@media only screen
and (max-width : 1300px) {
  .serv_btm_info h2::after { left: 380px; }
  .serv_boxes section { padding: 45px 25px 120px; }
  .serv_boxes section p { width: 100%; }
}
@media only screen
and (max-width : 1090px) {
	.serv_boxes section h2 { font-size: 21px; }
  .serv_btm_info p { width: 53%; }
}

@media only screen
and (max-width : 1000px) {
  .serv_con { padding: 40px 0; }
  .serv_info { margin-bottom: 50px; }
  .serv_info h2 { font-size: 55px; }
  .serv_boxes { justify-content: center; margin: 0 auto 100px; gap: 30px; }
  .serv_boxes section { width: 47%; }
  .serv_boxes section p{text-align: center;}
  .serv_btm_info { text-align: center; }
  .serv_btm_info h2::after { width: 129px; height: 7px; margin: 30px auto; position: static; display: block; transform: none; }
  .serv_btm_info p { width: 100%; position: static; max-width: 100%; transform: none;text-align: center; }
}

@media only screen
and (max-width : 600px) {
	.serv_con { padding: 0; }
  .serv_info h2 { font-size: 40px; }
  .serv_boxes section { width: 100%; }
  .serv_btm_info h2 { font-size: 40px; }
}