.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;
		}

		.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;
		}

		.img-thumbnail {
			padding: .25rem;
			background-color: #fff;
			border: 1px solid #dee2e6;
			border-radius: .25rem;
			max-width: 100%;
			height: auto;
		}

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

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

		.banner_headout .cs_mainbanner_head span {
			color: #fbbc07;
		}

		.banner_headout {
			padding-top: 15%;
			padding-bottom: 6%;
		}


		.cs_cardmain {
			background-color: rgb(241, 245, 248);
		}

		.cs_cardout {
			position: relative;
			max-width: 370px;
			margin: 0 auto;
			margin-bottom: 30px;
			padding: 0px 20px;
		}

		.cs_cardout::before {
			position: absolute;
			content: "";
			left: 0px;
			top: 0px;
			bottom: 38px;
			right: 0px;
			-webkit-box-shadow: rgb(0 0 0 / 20%) 0px 0px 50px 0px;
			box-shadow: rgb(0 0 0 / 20%) 0px 0px 50px 0px;
			-webkit-transform: translateY(38px);
			-ms-transform: translateY(38px);
			transform: translateY(38px);
			background: rgb(255, 255, 255);
			border-radius: 6px;
			-webkit-transition: all 0.5s ease 0s;
			-o-transition: all 0.5s ease 0s;
			transition: all 0.5s ease 0s;
		}

		.cs_cardout .cs_cardimg {
			position: relative;
			border-radius: 6px;
			overflow: hidden;
			-webkit-transition: all 0.5s ease 0s;
			-o-transition: all 0.5s ease 0s;
			transition: all 0.5s ease 0s;
		}

		.cs_cardout:hover .cs_cardimg {
			z-index: -1;
		}

		.cs_cardout .cs_cardimg img {
			height: auto;
			width: 100%;
			max-width: 100%;
			border: none;
			-webkit-border-radius: 0;
			border-radius: 0;
			-webkit-box-shadow: none;
			box-shadow: none;
			object-fit: cover;
			background-color: #fff;
			min-height: 225px;
			max-height: 225px;
			/* min-height: 230px;
			max-height: 230px; */
		}

		.cs_cardout .cs_cardhd {
			position: relative;
			text-align: center;
			padding: 20px 0px 24px;
			min-height: 89px;
			display: flex;
			align-items: center;
		}
		.cs_cardout:hover .cs_cardhd.hvrnone {
			opacity: 0;
		}

		.cs_cardout .cs_cardhd h4 {
			position: relative;
			font-size: 19px;
			margin-bottom: 0;
			font-family: 'Fira Sans', sans-serif;
			font-weight: 600;
			text-transform: capitalize;
			margin: 0 auto;
		}

		.cs_cardout:hover::before {
			-webkit-transform: translateY(0px);
			-ms-transform: translateY(0px);
			transform: translateY(0px);
		}

		.cs_cardout:hover img,
		.cs_cardout:hover .cs_crdhed {
			opacity: 0;
			visibility: hidden;
		}

		.cs_cardout .overlay {
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			visibility: hidden;
			opacity: 0;
			border-radius: 6px;
			padding: 0px 20px;
			-webkit-transition: all 0.5s ease 0s;
			-o-transition: all 0.5s ease 0s;
			transition: all 0.5s ease 0s;
		}

		.cs_cardout:hover .overlay {
			opacity: 1;
			visibility: visible;
		}

		.cs_cardout .text {
			position: relative;
			color: #fff;
			text-align: center;
			padding: 38px 30px 0px;
			border-radius: 6px;
		}

		.cs_cardout .text::before {
			position: absolute;
			content: "";
			opacity: 0.7;
			left: 0px;
			top: 0px;
			right: 0px;
			bottom: 0px;
			background: rgb(0, 0, 0);
			border-radius: 6px;
		}

		.cs_cardout .text p {
			color: #fff;
			position: relative;
			font-size: 17px;
			font-weight: 400;
			margin-bottom: 0px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 5;
			-webkit-box-orient: vertical;
			font-family: 'Fira Sans', sans-serif;
		}

		.cs_cardout .text .link-btn {
			position: relative;
			-webkit-transform: translateY(50%);
			-ms-transform: translateY(50%);
			transform: translateY(50%);
		}


		.cs_cardout .link-btn i {
			position: relative;
			width: 60px;
			height: 60px;
			line-height: 60px;
			text-align: center;
			color: #000 !important;
			font-size: 24px;
			display: inline-block;
			-webkit-transform: scale(0.5);
			-ms-transform: scale(0.5);
			transform: scale(0.5);
			opacity: 0;
			border-radius: 50%;
			-webkit-transition: all 0.3s ease 0.3s;
			-o-transition: all 0.3s ease 0.3s;
			transition: all 0.3s ease 0.3s;
			background-color: #fbbc07;
		}

		.cs_cardout:hover .link-btn i {
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			opacity: 1;
		}

		@media (max-width: 768px) {
			.cs_cardout .overlay {
				position: relative;
				visibility: unset;
				opacity: 1;
				padding: 0px;
			}

			.cs_cardout .overlay .cs_cardhd {
				display: none;
			}

			.cs_cardout .text {
				position: relative;
				color: #000;
				text-align: left;
				padding: 0;
				background-image: unset !important;
			}

			.cs_cardout .cs_cardhd {
				text-align: left;
				padding: 20px 0px 12px;
			}

			.cs_cardout .text p {
				color: #000;
			}

			.cs_cardout .text::before {
				background: transparent;
			}

			.cs_cardout:hover::before {
				-webkit-transform: translateY(38px);
				-ms-transform: translateY(38px);
				transform: translateY(38px);
			}

			.cs_cardout:hover img,
			.cs_cardout:hover .cs_crdhed {
				opacity: 1;
				visibility: unset;
			}

			.cs_cardout .text .link-btn {
				text-align: center;
			}

			.cs_cardout .link-btn i {
				position: relative;
				width: 50px;
				height: 50px;
				line-height: 51px;
				font-size: 20px;
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
				opacity: 1;
				-webkit-transition: unset;
				-o-transition: unset;
				transition: unset;
			}

			.cs_cardout .cs_cardimg img {
				min-height: auto;
				max-height: auto;
			}
		}

		@media (max-width: 600px) {
			.banner_headout {
				padding-top: 36%;
				padding-bottom: 12%;
			}

			.banner_headout .cs_mainbanner_head {
				font-size: 30px;
			}

			.section_pd {
				padding: 40px 0;
			}

			.cs_cardout {
				padding: 0px 12px;
				margin-bottom: 46px;
			}

			.cs_cardout .cs_cardhd h4 {
				font-size: 18px;
			}

			.cs_cardout .cs_cardhd {
				padding: 15px 0px 18px;
				min-height: auto;
			}

		}