.bg-span1 {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.8);
		}

		.section_pd {
			padding: 80px 0;
		}

		.section_pd2 {
			padding: 30px 0;
		}

		.div_pd {
			padding: 15px 0;
		}

		.bg_f7 {
			background: #f7f7f7;
		}

		.color_000 {
			color: #000 !important;
		}

		.cs_com i {
			font-style: italic !important;
		}

		.cs_com i.fa, .cs_com i.fas, .cs_com i.far {
			font-style: normal !important;
		}

		.cs_com p {
			font-size: 19px;
			color: #888;
			font-weight: 300;
			line-height: 1.5;
			font-family: 'Roboto', sans-serif;
		}

		.cs_com p span {
			font-weight: 500;
		}

		.linepat {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			background-image: url('../images/portfolio/linepat.png');
			background-repeat: repeat;
			z-index: -1;
			background-color: #f7f7f7;
		}

		.linepat2 {
			position: absolute;
			left: 0;
			bottom: 0;
			right: 0;
			top: 0;
			background-image: url('../images/portfolio/linepat.png');
			background-repeat: repeat;
			z-index: -1;
			background-color: #6c757d;
		}

		/* ===================================== sec 1 ======================================= */

		.cs_banner {
			background-attachment: revert;
			min-height: 100vh;
			padding-bottom: 30px;
		}

		.banner_head {
			padding-top: 15%;
		}

		.banner_head .cs_head {
			font-size: 26px;
			font-weight: 700;
			font-family: 'Roboto', sans-serif;
			margin-bottom: 24px;
			text-transform: uppercase;
		}

		.banner_head .cs_head span {
			text-decoration: underline;
			/* color: #fbbc07; */
		}

		.banner_head .cs_prod_head {
			font-size: 70px;
			line-height: 1.2;
			color: #fff;
			font-family: 'Roboto', sans-serif;
			font-weight: 800;
			margin-bottom: 30px;
		}

		.banner_head .cs_prod_head span {
			color: #fbbc07;
		}

		.techicons {
			width: 100%;
			text-align: center;
		}

		.techicons .techicons_inn {
			background: #fff;
			border-radius: 4px;
			width: 60px;
			padding: 8px;
			margin-right: 5px;
			margin-bottom: 10px;
			margin-left: 5px;
			transition: all 0.5s;
			-moz-transition: all 0.5s;
			-webkit-transition: all 0.5s;
			-ms-transition: all 0.5s;
			-o-transition: all 0.5s;
			cursor: pointer;
			box-shadow: 0px 0px 30px 0px rgb(82 63 105 / 15%);
			display: inline-block;
		}

		.techicons .techicons_inn:hover {
			transform: scale(1.2);
			-moz-transform: scale(1.2);
			-ms-transform: scale(1.2);
			-o-transform: scale(1.2);
			-webkit-transform: scale(1.2);
		}

		.techicons .techicons_inn img {
			position: relative;
			z-index: 1;
		}

		/* ===================================== sec 2 ======================================= */

		.lapibanner_out img {
			margin-top: -18%;
		}

		/* ===================================== sec 3 ======================================= */

		/* Heading */

		.title-box-out {
			margin-bottom: 50px;
		}

		.title-box {
			position: relative;
			z-index: 1;
			display: flex;
			align-items: center;
			min-height: 118px;
		}

		.title-box h2 {
			font-size: 40px;
			position: relative;
			z-index: 1;
			line-height: 1.1;
			margin-bottom: 8px;
			font-weight: 700;
			display: block;
			color: #000;
			font-family: 'Roboto', sans-serif;
		}

		.title-box h6 {
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 15px;
			letter-spacing: 3px;
			font-family: 'Roboto', sans-serif;
		}

		.title-box .dlab-separator {
			height: 3px;
			width: 88px;
			display: inline-block;
			position: relative;
			background-color: #d92027;
		}

		.title-box:after {
			content: attr(data-name);
			font-size: 150px;
			opacity: 0.05;
			position: absolute;
			color: #523f69;
			top: 0;
			z-index: -1;
			left: 0;
			right: 0;
			line-height: 118px;
			-moz-transform: translate(-50%, -50%);
			-o-transform: translate(-50%, -50%);
			-ms-transform: translate(-50%, -50%);
			text-transform: capitalize;
			white-space: nowrap;
			font-weight: 900;
		}

		/* =====================================  Screens =====================================  */

		.web-screen {
			border-radius: 10px;
			overflow: hidden;
			border: 3px solid #fff;
		}

		.web-screen .scroll-bg {
			position: relative;
			background-repeat: no-repeat;
			background-size: cover;
			overflow: hidden;
			display: block;
			height: 220px;
			transition: background-position 0.6s linear;
			margin-top: -1px;
		}

		.web-screen .scroll-bg:hover {
			background-position: center bottom;
			transition: background-position 4.5s linear;
		}

		.cs_mobscreens.owl-carousel .owl-item img{
			margin: 0 auto;
		}

		.linebg:before {
			content: ' ';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			opacity: 0.4;
			background-image: url('../images/case-study/linebg.png');
			background-color: #f7f7f7;
			background-repeat: repeat;
			background-position: top;
			background-size: auto;
			z-index: 0;
		}

		.more_cs_inn {
			position: relative;
			padding: 15px;
			border-radius: 8px;
			overflow: hidden;
		}

		.more_cs_inn:hover {
			padding: 15px 15px 15px 32px;
			-webkit-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
		}

		.more_cs_inn h5 {
			font-size: 18px;
			font-family: 'Roboto', sans-serif;
			color: #000;
		}

		.more_cs_inn i {
			font-size: 20px;
			-webkit-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
		}

		.more_cs_inn:hover i {
			font-size: 0;
		}

		.more_cs_inn img {
			width: 64px;
			height: 64px;
			object-fit: cover;
			border-radius: 50%;
			border: 3px solid rgb(254, 205, 26, 0.7);
		}

		.more_cs_inn .cs_more {
			width: 29%;
			transform-origin: 0px 0;
			transform: rotate( 270deg);
			position: absolute;
			left: -30px;
			top: 100%;
			bottom: 0;
			height: 26px;
			background-color: #fecd1a;
			-webkit-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
		}

		.more_cs_inn .cs_more p {
			padding: 5px;
			font-size: 11px;
			font-weight: 600;
			text-transform: uppercase;
			text-align: center;
			color: #000;
			font-family: 'Roboto', sans-serif;
		}

		.more_cs_inn:hover .cs_more {
			left: 0px;
		}

		.cs_morelink .owl-nav {
			position: absolute !important;
			top: 32% !important;
			left: 0 !important;
			right: 0 !important;
			margin: 0 !important;
			z-index: -1 !important;
		}

		.cs_morelink .owl-nav .owl-prev,
		.cs_morelink .owl-nav .owl-next {
			padding: 10px 10px 12px !important;
			background: #ffcf1e !important;
			position: relative !important;
			font-size: 30px !important;
			line-height: 10px !important;
		}

		.cs_morelink .owl-nav .owl-prev {
			float: left !important;
			margin: 0 0 0 -32px !important;
			border-radius: 5px 0 0 5px !important;
		}

		.cs_morelink .owl-nav .owl-next {
			float: right !important;
			margin: 0 -32px 0 0 !important;
			border-radius: 0 5px 5px 0 !important;
		}

		.cs_morelink .owl-carousel .owl-stage-outer {
			z-index: 1 !important;
		}

		.other_cs .other_cs_slider {
			padding: 0 30px;
		}

		.other_cs .title-box h2 {
			font-size: 28px;
			position: relative;
			z-index: 1;
			line-height: 1.1;
			margin-bottom: 4px;
			font-weight: 700;
			display: block;
			color: #000;
			font-family: 'Roboto', sans-serif;
		}

		.other_cs .title-box h2 span {
			color: #ffcf1e;
		}

		.other_cs .title-box {
			min-height: 98px;
			padding-left: 36px;
		}

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

		.clientbg {
			position: absolute;
			left: -8px;
			top: -17px;
		}

		.clientbg img {
			width: 70%;
			opacity: 0.4;
		}

		.testi_card_client {
			margin-left: 64px !important;
			margin-top: 30px !important;
		}

		.testi_card {
			border-radius: 10px;
			padding: 30px;
			min-height: 196px;
			/* overflow: hidden; */
		}

		.testi_card:before {
			position: absolute;
			content: '';
			left: 78px;
			bottom: -40px;
			border: 20px solid transparent;
			border-top-color: #fff;
		}

		.testi_card_out p {
			font-family: 'Roboto', sans-serif;
		}

		.testi_card_out p:first-child {
			font-size: 18px;
		}

		.testi_card_out p b {
			color: #000;
		}

		.testi_card_out img.clientimg {
			width: 70px;
			height: 70px;
			object-fit: cover;
			border-radius: 50%;
			border: 4px solid #f2f2f2;
		}

		.testi_card_out .quote {
			position: absolute;
			font-size: 60px;
			color: #e0e0e4;
			bottom: -32px;
			right: 40px;
			text-align: center;
			line-height: 40px;
			-webkit-transition: .5s;
			-o-transition: .5s;
			transition: .5s;
		}

		.testi_card_out:hover .quote {
			bottom: 0;
		}

		/* =====================================  Features =====================================  */
		.cs_feature_content {

		}
		.cs_feature_content img{
			width: 375px;
			display: block;
			object-fit: contain;
			margin-right: 15px;
		}
		.cs_feature_content_text{

		}

		/* =====================================  Contact =====================================  */

		.cs_contact_out {
			padding: 115px 0 60px;
		}

		.cs_contact {
			width: 75%;
			margin: 0 auto;
		}

		.cs_contact h1 {
			font-size: 50px;
			position: relative;
			z-index: 1;
			line-height: 1.1;
			margin-bottom: 20px;
			font-weight: 800;
			display: block;
			color: #fff;
			font-family: 'Roboto', sans-serif;
		}

		.cs_contact h1 span,
		.cs_contact1 h1 span {
			color: #fbbc07;
		}

		.cs_contact h5 {
			font-size: 22px;
			position: relative;
			z-index: 1;
			line-height: 1.2;
			margin-bottom: 30px;
			font-weight: 500;
			display: block;
			color: #fff;
			font-family: 'Roboto', sans-serif;
		}

		/* =====================================  btn  ===================================== */

		.formbtn {
			position: relative;
			display: inline-block;
			font-size: 18px;
			letter-spacing: 0.5px;
			line-height: 30px;
			color: #fff;
			font-weight: 700;
			text-transform: capitalize;
			border-radius: 3px;
			overflow: hidden;
			vertical-align: middle;
			background-color: transparent;
			padding: 0;
			margin: 0;
			border: none;
			font-family: 'Poppins', sans-serif;
			-webkit-box-shadow: rgb(0 0 0 / 20%) 0px 0px 50px 0px;
			box-shadow: rgb(0 0 0 / 12%) 0px 0px 50px 0px;
		}

		.formbtn:hover {
			color: #ffffff;
		}

		.formbtn .btn-title {
			position: relative;
			display: block;
			z-index: 1;
			font-family: 'Roboto', sans-serif;
			padding: 12px 40px;
			-webkit-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s;
			border-radius: 3px;
			overflow: hidden;
			background: #484848;
		}

		.formbtn:hover .btn-title {
			color: #202020;
		}

		.formbtn .btn-title::before {
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: -1;
			height: 100%;
			width: 100%;
			background-color: #ffcf1e !important;
			content: "";
			background-color: rgb(34, 34, 34);
			-webkit-transform: scale(0, 1);
			-ms-transform: scale(0, 1);
			transform: scale(0, 1);
			-webkit-transform-origin: right top;
			-ms-transform-origin: right top;
			transform-origin: right top;
			transition: transform 500ms cubic-bezier(0.96, 0, 0.07, 1) 0s, -webkit-transform 500ms 0s;
		}

		.formbtn:hover .btn-title:before {
			-webkit-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			transform: scale(1, 1);
			-webkit-transform-origin: top left;
			-ms-transform-origin: top left;
			transform-origin: top left;
		}

		/* =====================================  Conatct 1 =====================================  */

		.cs_contact1_inn {
			border-radius: 20px;
		}

		.cs_contact1 {
			width: 60%;
			margin: 0 auto;
		}

		.cs_contact1 h1 {
			font-size: 40px;
			position: relative;
			z-index: 1;
			line-height: 1.1;
			margin-bottom: 10px;
			font-weight: 800;
			display: block;
			color: #fff;
			font-family: 'Roboto', sans-serif;
		}

		.cs_contact1 h5 {
			font-size: 20px;
			position: relative;
			z-index: 1;
			line-height: 1.2;
			margin-bottom: 24px;
			font-weight: 500;
			display: block;
			color: #fff;
			font-family: 'Roboto', sans-serif;
		}

		.cs_contact1 .formbtn {
			font-size: 17px;
		}

		.cs_contact1 .formbtn .btn-title {
			padding: 10px 30px;
		}

		/*  ===================================== METALSTREET  ===================================== */

		/* =====================================  Benifits =====================================  */

		.cs_com ul li {
			font-size: 19px;
			color: #888;
			font-weight: 300;
			line-height: 1.5;
			font-family: 'Roboto', sans-serif;
			list-style: inside;
		}

		.cs_benifits {
			padding: 30px;
			border-bottom: 1px solid #dee2e6;
			border-right: 1px solid #dee2e6;
		}

		.cs_benifits:last-child,
		.cs_benifits:nth-child(7) {
			border-bottom: 0px solid #dee2e6;
		}

		.cs_benifits h3 {
			position: relative;
			font-size: 21px;
			transition: all 500ms ease;
			color: #ff5956;
			margin-bottom: 10px;
			font-weight: 700;
		}

		.cs_benifits h3 span {
			position: relative;
			font-size: 21px;
			line-height: 30px;
			padding-left: 80px;
			margin-bottom: 8px;
			transition: all 500ms ease;
			color: #000;
		}

		.cs_benifits:hover h3 span {
			padding-left: 14px;
		}

		.cs_benifits h3 span:before {
			position: absolute;
			content: '';
			width: 50px;
			height: 2px;
			left: 16px;
			top: 14px;
			transition: all 500ms ease;
			background: #ff5956;
		}

		.cs_benifits:hover h3 span:before {
			opacity: 0;
		}

		/* =====================================  maas =====================================  */

		.benifits_cs_inn {
			border-radius: 8px;
			padding: 20px;
			min-height: 338px;
		}

		.benifits_cs_inn .stroke_text {
			font-size: 80px;
			font-weight: 800;
			z-index: 1;
			line-height: 1;
			position: relative;
			margin-bottom: 10px;
			display: inline-block;
			color: #000;
			font-family: 'Roboto', sans-serif;
			-webkit-text-fill-color: transparent;
			-webkit-text-stroke-width: 1px;
			-webkit-text-stroke-color: #000;
		}

		.benifits_cs_inn .stroke_text:before {
			content: "";
			position: absolute;
			top: 0;
			left: -20px;
			width: 40px;
			height: 40px;
			background-color: #d6a77b;
			opacity: .4;
			border-radius: 50%;
			z-index: -1;
		}

		.benifits_cs_inn h2 {
			position: relative;
			font-size: 21px;
			font-weight: 700;
			line-height: 30px;
			margin-bottom: 8px;
			transition: all 500ms ease;
			color: #000;
			font-family: 'Roboto', sans-serif;
		}

		/*  =====================================  =====================================  =====================================  */
		/* =====================================  Responsive =====================================  */
		/*  =====================================  =====================================  =====================================  */
		@media (min-width: 1050px) and (max-width: 1400px), (min-height: 560px) and (max-height: 630px){
			.cs_banner {
				min-height: 110vh;
			}
		}
		@media (max-width: 1024px){
			.cs_banner {
				min-height: 44vh;
			}
			.res100{
				flex: 0 0 100% !important;
				max-width: 100% !important;
			}
			.title-box:after {
				font-size: 75px;
			}
			.benifits_cs_inn {
				min-height: 424px;
			}
			.testi_card {
				min-height: 220px;
			}
		}

		@media (max-width: 768px){
			.cs_banner {
				min-height: 62vh;
			}
			.cs_benifits {
				border-right: 0px solid #dee2e6;
			}
			.cs_contact1 {
				width: 90%;
			}
			.benifits_cs_inn {
				min-height: 364px;
			}
			.title-box h2 {
				font-size: 26px;
			}
			.title-box-out {
				margin-bottom: 0px;
			}
			.section_pd {
				padding: 40px 0;
			}
			.cs_feature_content .d-flex{
				display: block !important;
			}
			.cs_feature_content img{
				width: 100%;
				margin-right: 0;
			}
			.cs_feature_content_text{
				width: 100%;
			}
		}

		@media (max-width: 767px){
			.banner_head {
				padding-top: 30%;
			}
			.banner_head .cs_prod_head {
				font-size: 40px;
				margin-bottom: 15px;
			}
			.banner_head .cs_head {
				font-size: 20px;
				margin-bottom: 15px;
			}
			.techicons .techicons_inn {
				border-radius: 2px;
				width: 40px;
				padding: 5px;
				margin-right: 4px;
				margin-left: 0px;
			}
			/* .lapibanner_out img {
				margin-top: -8%;
			} */
			.cs_com p {
				font-size: 16px;
				margin-bottom: 10px;				
			}
			.cs_com ul li {
				font-size: 16px;
			}
			.title-box:after {
				font-size: 42px;
				line-height: 96px;
			}
			.title-box h2 {
				font-size: 18px;
			}
			.title-box h6 {
				font-size: 14px;
				margin-bottom: 8px;
				letter-spacing: 1px;
			}
			.cs_benifits h3 {
				font-size: 17px;
				margin-bottom: 8px;
			}
			.cs_benifits h3 span:before {
				width: 32px;
			}
			.cs_benifits h3 span {
				font-size: 17px;
				line-height: 22px;
				padding-left: 56px;
				margin-bottom: 8px;
			}
			.cs_benifits {
				padding: 20px;
			}
			.title-box {
				min-height: 100px;
			}

			.cs_contact1 h1 {
				font-size: 20px;
			}
			.cs_contact1 h5 {
				font-size: 16px;
			}
			.cs_contact1 .formbtn {
				font-size: 15px;
			}
			.cs_contact1 .formbtn .btn-title {
				padding: 7px 15px;
			}
			.div_pd {
				padding: 10px 0;
			}

			.other_cs .title-box {
				min-height: auto;
				padding-left: 0;
			}
			.section_pd {
				padding: 30px 0;
			}
			.section_pd2{
				padding: 15px 0;
			}
			.title-box .dlab-separator {
				height: 2px;
				width: 60px;
			}
			.other_cs .title-box h2 {
				font-size: 18px;
			}
			.other_cs .other_cs_slider {
				padding: 0 15px;
			}
			.more_cs_inn h5 {
				font-size: 16px;
			}
			.more_cs_inn img {
				width: 52px;
				height: 52px;
				border: 2px solid rgb(254, 205, 26, 0.7);
			}
			.more_cs_inn i {
				font-size: 16px;
			}
			.more_cs_inn .cs_more {
				display: none;
			}
			.more_cs_inn {
				padding: 10px;
			}
			.cs_morelink .owl-nav .owl-prev, .cs_morelink .owl-nav .owl-next {
				padding: 8px 8px 10px !important;
			}
			.cs_morelink .owl-nav .owl-prev {
				margin: 0 0 0 -28px !important;
			}
			.cs_morelink .owl-nav .owl-next {
				margin: 0 -28px 0 0 !important;
			}

			.testi_card_out p:first-child{
				font-size: 16px;
			}
			.testi_card{
				padding: 20px;
				min-height: auto;
			}
			.testi_card_out .quote {
				font-size: 35px;
			}

			.cs_contact {
				width: 100%;
			}
			.cs_contact h1 {
				font-size: 20px;
				margin-bottom: 15px;
			}
			.cs_contact h5 {
				font-size: 16px;
			}
			.formbtn {
				font-size: 15px;
			}
			.cs_contact .formbtn .btn-title {
				padding: 7px 15px;
			}
			.cs_contact_out {
				padding: 36px 0 16px;
			}
		}