
h1,
h2,
h3,
h4,
h5,
h6 {
 	font-family: "Termina W00 Demi";
 	line-height:1.3em;
}

p,
span {
    line-height:1.3em;
	font-family: 'Manrope', sans-serif;
}

@media (min-width:320px) and (max-width: 768px) {

	.page-title .title {
		font-size: 40px !important;
	}

	.about-content h3 {
		font-size: 20px !important;
	}

	#we-offer {
		height: 600px !important;
	}

	.pricing-table {
		padding: 10px !important;
	}
	.plan-box {
		height: 75px!important;
	}
	#b2b,#Watch,#seo-smo,#content,#content-writing,#current{
		padding: 15px;
	}
	.global h3 {
		font-size: 28px!important;
	}
	.box {
		height: 340px!important;
	}
	.contact_field{
		padding: 15px!important;
	}
	.contact_info_sec{
		position: relative!important;
		width: 100%!important;
	}
	.job-card{
		height: 100%!important;
		margin: 15px 0px!important;
	}
	.popup-inner-form {
        width: 90%!important;
    }
	.popup-inner,.apply-form-section{
		padding: 10px!important;
	}
	.job-explain{
		margin: 15px 0px!important;
	}
}

/* side pop form */
.input-text {
	height: calc(1.8rem + 32px);
	padding: 14px 20px;
	outline: 0;
	background-color: rgba(241, 238, 246, .5);
	border: 1px solid rgba(241, 238, 246, .5);
	color: #686a6f;
	font-size: 1rem;
	width: 100%;
	margin-bottom: 10px;
}

/* global */
span.title-span {
	text-transform: capitalize !important;
}

/*.global {*/
/*	padding-left: 25px*/
/*}*/

.global span {
	color: #fd9b5f;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 5px;
	font-family: "Termina W00 Demi";
	/* display: block */
}

.global h3 {
	font-size: 38px;
	margin: 0 0 15px
}
/*All Page Banner*/
.about-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/about-banner.webp);
}
.canada-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/canada-banner.webp);
    	
}
.india-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/india-banner.webp);
}
.usa-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/usa-banner.webp);
    
}
.price-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/price-banner.webp);
}
.blog-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/blog-banner.webp);
}
.career-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/career-banner.webp);
}
.contact-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/contact-banner.webp);
}
.seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/seo-banner.webp);
}
.enterprise-seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/enterprise-seo-banner.webp);
}
.ecommerce-seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/ecommerce-seo-banner.webp);
}
.small-businesses-seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/small-businesses-seo-banner.webp);
}
.organic-seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/organic-seo-banner.webp);
}
.white-label-seo-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/white-label-seo-banner.webp);
}
.gmb-services-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/gmb-services-banner.webp);
}

.internet-marketing-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/internet-marketing-banner.webp);
}
.mobile-marketing-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/mobile-marketing-banner.webp);
}
.web-design-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/web-design-banner.webp);
}
.app-development-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/app-development-banner.webp);
}
.ecommerce-development-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/ecommerce-development-banner.webp);
}
.smm-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/smm-banner.webp);
}
.enterprise-smm-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/enterprise-smm-banner.webp);
    
}
/**/
.email-marketing-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/email-marketing-banner.webp);
}
.ppc-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/ppc-banner.webp);
}
.brand-development-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/brand-development-banner.webp);
}
.digital-marketing-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/digital-marketing-banner.webp);
}
.content-writing-banner{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/content-writing-banner.webp);
}
.refund-policy{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/refund-policy.webp);
}
.privacy-policy{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/privacy-policy.webp);
}
.TERMS-AND-CONDITION{
    background-image: url(https://payexelsolutions.com/assests/images/page-banner/TERMS-AND-CONDITION.webp);
    
}
.page-title {
	/*background-image: url(https://payexelsolutions.com/assests/images/pagetitle-bg.jpg);*/
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 100px 0 0;
	min-height: 480px;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-box;
	align-items: center;
	-ms-flex-align: center;
	-webkit-box-align: center;
}

.page-title .title {
	font-size: 64px;
	color: #ffffff;
	margin-bottom: 17px;
}

.page-title .text {
	position: relative;
	color: #ffffff;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.05em;
	max-width: 520px;
}

.page-breadcrumb {
	position: relative;
	margin-top: 5px;
}

.page-breadcrumb li {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	padding-right: 13px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;
}

/* .page-breadcrumb li:after {
    position: absolute;
    content: "➣";
    right: -6px;
    top: 1px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    font-family: "Font Awesome 6 Pro";
    color: #ffffff;
  } */
.page-breadcrumb li:last-child {
	font-family: "Termina W00 Demi";
	padding-right: 0px;
	margin-right: 0px;
}

.page-breadcrumb li:last-child::after {
	/* display: none; */
	content: "";
	position: absolute;
	left: -13px;
	top: 6px;
	height: 12px;
	width: 1px;
	background: linear-gradient(to right top, #fdb084, #ff9870, #ff7e62, #ff5f59, #ff3656);
}

.page-breadcrumb li a {
	font-family: "Termina W00 Demi";
	text-decoration: none;
	color: #fe9435;
	font-weight: 500;
	text-transform: capitalize;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.page-breadcrumb li a:hover {
	color: #ffffff;
}

.page-title.style-two {
	background-position: center center;
}

/* about-page */
video {
	/* override other styles to make responsive */
	width: 100% !important;

}

.about-area .container-fluid {
	padding-left: 0
}

.about-content {
	padding-left: 25px
}

.about-content span {
	color: #fd9b5f;
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: 5px;
	/* display: block */
}

.about-content h3 {
	font-size: 38px;
	margin: 0 0 15px
}

.bar {
	height: 4px;
	width: 85px;
	background: linear-gradient(to right top, #fdb084, #ff9870, #ff7e62, #ff5f59, #ff3656);
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 25px
}

.bar:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 5px;
	background: #fff;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: MOVE-BG;
	animation-name: MOVE-BG
}

.about-content strong {
	color: #6b6b84;
	font-weight: 600
}

.about-content p {
	color: #6b6b84;
	margin: 15px 0 0
}

.about-content .about-btn {
	margin-top: 25px;
	margin-bottom: -3px
}

.about-content.style-width {
	max-width: 630px
}
.org-title{
        font-family: "Termina W00 Demi";
      
    color: #fd9b5f;
}
.about-content .about-inner-content {
	margin-top: 20px;
	position: relative;
	padding-left: 45px;
	transition: .5s
}

.about-content .about-inner-content .icon i {
	display: inline-block;
	height: 30px;
	width: 30px;
	line-height: 30px;
	background: #fd9b5f;
	color: #fff;
	text-align: center;
	font-size: 15px;
	border-radius: 30px;
	position: absolute;
	left: 0;
	top: 0;
	transition: .5s
}

.about-content .about-inner-content h4 {
	font-size: 20px;
	margin-bottom: 5px
}

.about-content .about-inner-content p {
	margin-top: 0
}

.about-content .about-inner-content:hover .icon i {
	background: #fe9435
}

/* .about-content.warp {
    max-width: 630px
} */

@-webkit-keyframes MOVE-BG {
	0% {
		-webkit-transform: translateX(0)
	}

	to {
		-webkit-transform: translateX(85px)
	}
}

@keyframes MOVE-BG {
	0% {
		transform: translateX(0)
	}

	to {
		transform: translateX(85px)
	}
}

/* team */
.section-title>.bar {
	margin-left: auto;
	margin-right: auto;
}

.single-team {
	text-align: center;
	position: relative;
	margin-bottom: 30px;
	border: 1px solid #fbe4d4;
	border-radius: 5px
}

.single-team .image {
	position: relative;
	transition: .5s
}

.single-team .image img {
	border-radius: 5px 5px 0 0
}

.single-team .image .social {
	position: absolute;
	top: 20px;
	right: 20px;
	margin: 0;
	padding: 0;
	list-style: none
}

.single-team .image li {
	transform: translateY(30px);
	transition: all .3s ease-in-out 0s;
	opacity: 0;
	visibility: hidden;
	transform: perspective(1000px) rotateY(90deg);
	margin-bottom: 8px
}


.single-team .image .content {
	background-color: #fff;
	box-shadow: 0 0 1.25rem rgba(108, 118, 134, .1);
	padding: 25px 15px;
	position: relative;
	z-index: 1;
	transition: .5s;
	border-radius: 0 0 5px 5px
}

.single-team .image .content h3 {
	margin-bottom: 5px;
	font-size: 20px;
	transition: .5s
}

.single-team .image .content h3 a {
	color: #202647
}

.single-team .image .content span {
	transition: .5s;
	color: #fe9435;
	font-size: 15px
}

.single-team .image .content:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	background: #fe9435;
	/* background: linear-gradient(to right top,#fdb084,#ff9870,#ff7e62,#ff5f59,#ff3656); */
	z-index: -1;
	transition: .5s
}

.single-team:hover .image .social li {
	transform: translateY(0);
	opacity: 1;
	visibility: visible
}

.single-team:hover .image .content:before {
	height: 100%
}

.single-team:hover .image .content h3,
.single-team:hover .image .content span {
	color: #fff
}

.single-team-box {
	margin-bottom: 30px;
	text-align: center
}

.single-team-box .image {
	position: relative;
	transition: .5s;
	overflow: hidden
}

.single-team-box .image img {
	border-radius: 5px;
	transition: .5s
}

.single-team-box .content {
	margin-top: 20px
}

.single-team-box .content h3 {
	margin-bottom: 0;
	font-size: 22px;
	font-weight: 600
}

.single-team-box .content span {
	display: block;
	color: #fe9435;
	font-size: 15px;
	margin-top: 6px
}

.single-team-box:hover .image .social li {
	transform: translateY(0);
	opacity: 1;
	visibility: visible
}

.single-team-box:hover .image img {
	transform: rotate(-5deg) scale(1.1)
}

/*  */
.vision>.container {
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.77);
}

#baner-sec-about {
	height: 400px;
	background-image: linear-gradient(rgb(0 0 0 / 70%) 100%, rgb(0 0 0)100%), url(../images/about/ab-banner.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin-bottom: -200px;
	z-index: 1;

}

/* web-designing-development page */
.services {
	padding: 60px 0px;
}

.services-box {
	display: inline-block;
	padding: 20px;
	margin-bottom: 20px;
	border-bottom: 1px dashed #dfe0e1;
	padding-top: 40px;
}

.services-box:hover {
	background: #f2f2f2;
	cursor: pointer;

	transition: all 1s;
	-moz-transition: all 1s;
	/* Firefox 4 */
	-webkit-transition: all 1s;
	/* Safari and Chrome */
	-o-transition: all 1s;
	/* Opera */
}

.services-box:hover i {
	background: #fe9435;
	border-radius: 100px;

	transition: all 1s;
	-moz-transition: all 1s;
	/* Firefox 4 */
	-webkit-transition: all 1s;
	/* Safari and Chrome */
	-o-transition: all 1s;
	/* Opera */
}

.icon {
	padding: 0px;
	float: left;
	margin-right: 20px;
	padding-bottom: 30px
}

.icon i {
	width: 70px;
	height: 70px;
	background: #fe9435;
	color: #ffffff;
	line-height: 70px;
	text-align: center;
	font-size: 44px;
}



.service-content h4 {
	font-size: 18px;
	font-weight: 900;
	height: 35px;
}

p.feature-list {
	text-align: center;
	/* margin: auto; */
	padding: 10px;
	border-radius: 1px;
	background: #fff;
	transition: all;
}

#we-offer {
	height: 400px;
	background-image: linear-gradient(rgb(0 0 0 / 92%) 100%, rgb(0 0 0)100%), url(http://localhost/demo/payexcel/assests/images/about/ab-banner.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

/* price */
.pricing-table {
	background: #fff;
	box-shadow: 0px 1px 10px -6px rgba(0, 0, 0);
	/* padding: 2rem; */
	padding: 0.5rem;
	border-radius: 4px;
	transition: .3s;
}

.pricing-table:hover {
	box-shadow: 0px 1px 10px -4px rgba(0, 0, 0, .15);
}

.pricing-table .pricing-label {
	border-radius: 2px;
	padding: .25rem .5rem;
	margin-bottom: 1rem;
	display: inline-block;
	font-size: 12px;
	font-weight: 500;
}

.pricing-table h2 {
	background-image: linear-gradient(135deg, #f0e5e5 0%, #fe9435 100%);
	padding: 15px;
	margin-bottom: 10px;
	color: #3b3b3b;
	font-size: 21px;
	font-weight: 500;
}

.pricing-table h5 {
	color: #000;
	font-size: 14px;
	font-weight: 400;
}

.pricing-table .pricing-features {
	margin-top: 2rem;
}

.pricing-table .pricing-features .feature {
	border-left: 5px solid #27ae60;
	font-size: 14px;
	margin: .5rem 0;
	color: #27ae60;
	padding: 10px 15px;
	border-bottom: 1px solid #dedede;
}
.feature.no-background{
	border-left: 5px solid red!important;
	color: red!important;

}
.pricing-table .pricing-features .feature:hover {
/* 
	background: #000000;
	color: #fff; */
}

.pricing-table .pricing-features .feature span {
	display: inline-block;
	float: right;
	color: #27ae60;
	font-weight: 600;
	
}

/* .no-background {
	background: #ff8e8e;
} */

.no {
	color: red!important;
	text-decoration: line-through;
}

.pricing-table .price-tag {
	margin-top: 2rem;
	text-align: center;
	font-weight: 500;
}

.pricing-table .price-tag .symbol {
	font-size: 24px;
}

.pricing-table .price-tag .amount {
	font-family: "Termina W00 Demi";
	letter-spacing: -2px;
	font-size: 64px;
}

.pricing-table .price-tag .after {
	font-family: "Termina W00 Demi";
	color: #3b3b3b;
	font-weight: 500;
}

.pricing-table .price-button {
	display: block;
	color: #fff;
	margin-top: 2rem;
	padding: .75rem;
	border-radius: 2px;
	text-align: center;
	font-weight: 500;
	transition: .3s;
}

.pricing-table .price-button:hover {
	text-decoration: none;
}

.purple .pricing-label {
	background: #000;
	color: #fff;
}

.purple .price-tag {

	color: #fe9435;
}


.purple .price-button {
	text-decoration: none;
	background: #193E5D;
}

.purple .price-button:hover {
	background: #000;
	color: #fff;
	border: 1px solid;
	border-radius: 15px;
}

.turquoise .pricing-label {
	background: #b9edee;
	color: #000;
}

.turquoise .price-tag {
	color: #000;
}

.turquoise .price-button {
	text-decoration: none;
	background: #fe9435;
}

.turquoise .price-button:hover {
	background: #000;
	color: #fff;
	border: 1px solid;
	border-radius: 15px;
}

.red .pricing-label {
	background: #ffc4c4;
	color: #ff5e5e;
}

.red .price-tag {
	color: #fe9435;
}

.red .price-button {
	text-decoration: none;
	background: #193E5D;
}

.red .price-button:hover {
	background: #000;
	color: #fff;
	border: 1px solid;
	border-radius: 15px;

}

#price {
	margin: 50px;
}

/*  */

.btn-primary-line {
	width: 160px;
	margin: auto;
	display: inline-block;
	height: 44px;
	line-height: 45px;
	text-align: center;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #fff;
	/* margin-bottom: 10px; */
	font-weight: 700;
	font-size: 12px;
	color: #fff;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	outline: none !important;
	cursor: pointer;
	text-decoration: none !important;
	position: relative;
}

.btn-primary-line {
	border: 1px solid #fe9435;
	color: #fe9435;
	height: 25px;
	line-height: 25px;
}

.btn-primary-line:hover {
	background: #fe9435;
	color: #fff;
}

/* app development page */
th {
	padding: 10px !important;
	margin: 05px;
	/* background-image: linear-gradient(135deg, #e73d3d 0%, #decb3d 100%); */
	background-image: linear-gradient(135deg, #fe9435 0%, #ffffff 100%);
}

/* digital-marketing page */

.card__container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	width: 100%;
	max-width: 100%;
	margin: auto;
	padding: 60px 0;
}

.card__bx {
	/* --dark-color: #2e2e2e; */
	--dark-alt-color: #777777;
	--white-color: #ffffff;
	--button-color: #333333;
	--transition: 0.5s ease-in-out;

	font-family: inherit;
	height: 450px;
	width: 400px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #000;
	transition: var(--transition);
}

.card__bx .card__data {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 30px;
	text-align: center;
	padding: 0 20px;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.card__bx .card__data .card__icon {
	height: 80px;
	width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3rem;
	color: var(--text-color);
	background-color: #000;
	transition: var(--transition);
}

.card__bx .card__data .card__icon {
	color: var(--clr);
	box-shadow: 0 0 0 4px #000, 0 0 0 6px var(--clr);
}

.card__bx:hover .card__data .card__icon {
	color: #000;
	background-color: var(--clr);
	box-shadow: 0 0 0 4px #000, 0 0 0 300px var(--clr);
}

.card__bx .card__data .card__content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

.card__bx .card__data h3 {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--white-color);
	transition: var(--transition);
}

.card__bx:hover .card__data h3 {
	color: #000;
	transition: var(--transition);
}

.card__bx .card__data p {
	font-size: 0.9rem;
	color: #fff;
	transition: var(--transition);
}

.card__bx:hover .card__data p {
	color: #000;
	transition: var(--transition);
}

.card__bx .card__data a {
	position: relative;
	display: inline-flex;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: 500;
	margin-top: 10px;
	border: 2px solid var(--clr);
	color: #000;
	background-color: var(--clr);
	transition: var(--transition);
}

.card__bx:hover .card__data a {
	color: var(--clr);
	background-color: #000;
}

.card__bx:hover .card__data a:hover {
	border-color: #000;
	color: #000;
	background-color: var(--clr);
}

/*  */
#dm-imp {
	background-image: linear-gradient(rgb(0 0 0 / 92%) 100%, rgb(0 0 0)100%), url(http://localhost/demo/payexcel/assests/images/about/ab-banner.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

.dm-imp p {
	color: #fff;
	text-align: justify;
}

/*  */
.card {
	margin: 10px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05);
	transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12);
	padding: 14px 80px 18px 36px;
	cursor: pointer;
}

.card:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 20px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .06);
}

.card h3 {
	font-weight: 600;
}

.card img {
	position: absolute;
	top: 20px;
	right: 15px;
	max-height: 120px;
}

.card-1 {
	background-image: url(../images/circle-card.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 80px;
}

.card-2 {
	background-image: url(../images/circle-card.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 80px;
}

.card-3 {
	background-image: url(../images/circle-card.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 80px;
}

@media(max-width: 990px) {
	.card {
		margin: 20px;
	}
}

.dm-b-title {
	clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0% 50%);
	background: #000;
	padding: 25px;
	position: relative;
	overflow-x: hidden;
}

.dm-b-title::before {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	background: #CD5C5C;
	left: 0;
	top: 50%;
	transform: translate(-50%, -50%);
}

.dm-b-title::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 2px;
	background: #CD5C5C;
	right: 0;
	top: 50%;
	transform: translate(50%, -50%);
}

/* pricing page */

.box {
	background-color: #12141c;
	overflow: hidden;
	transition: .3s ease;
	height: 420px;
}

.box i {
	color: #fe9435;
	transition: inherit;
	transition-delay: 0s
}

.box h4 {
	color: #fff;
	transition: inherit;
	transition-delay: .05s;
}

.box p {
	color: #fff;
	transition: inherit;
	transition-delay: .1s;
}

a.readmore:hover {
	color: #fe9435;
}

.readmore {
	color: #fff;
	overflow: hidden;
	display: inline-block;
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 700;
	color: #fff;
	position: relative;
	padding-right: 2rem;
}

.readmore:before {
	animation: ts-link-arrow-effect-animation-out;
	animation-fill-mode: forwards;
	animation-duration: .4s;
	animation-timing-function: cubic-bezier(.6, .01, 0, 1);
	background-color: #f26c4f;
	bottom: 0;
	height: .125rem;
	margin: auto;
	left: 0;
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	transform: scaleX(.2);
	transform-origin: left center;
	z-index: 0;
}

.readmore span {
	position: relative;
	transform: translateX(-200%);
	display: inline-block;
	transition: .6s cubic-bezier(.6, .01, 0, 1);
}

.box:hover .readmore span {
	transform: translateX(0%);
}

.box:hover .readmore:before {
	animation: ts-link-arrow-effect-animation-in;
	animation-fill-mode: forwards;
	animation-duration: .4s;
	animation-timing-function: cubic-bezier(.6, .01, 0, 1);
}

.box:hover i,
.box:hover h4,
.box:hover p {
	transform: translateY(-0.625rem);
}

@keyframes ts-link-arrow-effect-animation-out {
	0% {
		transform-origin: right center;
		transform: scaleX(.2);
	}

	70% {
		transform-origin: right center;
	}

	71% {
		transform-origin: left center;
		transform: scaleX(1);
	}

	100% {
		transform-origin: left center;
		transform: scaleX(.2);
	}
}

@keyframes ts-link-arrow-effect-animation-in {
	0% {
		transform-origin: left center;
		transform: scaleX(.2);
	}

	70% {
		transform-origin: left center;
		transform: scaleX(1);
	}

	71% {
		transform-origin: right center;
	}

	100% {
		transform-origin: right center;
		transform: scaleX(.2);
	}
}

/* ecommerce-development Page */
.g-price>span {
	color: #fd9b5f;
	font-weight: 800;
	text-transform: uppercase;
}

.p-4.py-5 {
	color: #3b3b3b;
	font-weight: 600;
	background-image: linear-gradient(135deg, #f0e5e5 0%, #fe9435 100%);
	border-radius: 15px;
}

.p-4.py-5>p {
	margin: 10px 05px;
	padding: 10px 10px;
	background: #fff;
	border-radius: 10px;
	color: #27ae60;

}

.p-4.py-5>p:hover {
	margin: 10px 05px;
	padding: 10px 10px;
	background: #000;
	color: #fff;
	border-radius: 10px;

}

.comman-price-btn {
	display: block;
	color: #fff;
	margin-top: 2rem;
	padding: 0.75rem;
	border-radius: 2px;
	text-align: center;
	font-weight: 500;
	transition: .3s;
	text-decoration: none;
	background: #000;
}

.comman-price-btn:hover {
	background: #fff;
	color: #000;
	border: 1px solid;
	border-radius: 15px
}

/* Branding Steps */
.process {
	width: 100%;
	padding: 0 15px;
	text-align: center;
}

.process__item {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align: center;
	position: relative;
	padding: 15px 35px;
	transition: 0.4s ease-in-out;
}

.process__item:hover {
	background: #f2f2f2;
}

.process__item:hover .process__number {
	transform: translateY(5px);
	color: #fe9435;
}

.process__number {
	font-size: 90px;
	-webkit-text-stroke: 1px #fe9435;
	display: block;
	color: transparent;
	font-family: "Roboto Condensed";
	font-weight: 700;
	transition: 0.4s ease-in-out;
}

.process__title {
	display: block;
	font-family: "Roboto Condensed";
	font-weight: 700;
	letter-spacing: 1.5px;
	font-size: 35px;
	color: #fe9435;
	text-transform: uppercase;
	margin-top: 30px;
}

.process__subtitle {
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 20px;
	color: #000;
	margin-top: 30px;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.process {
		display: inline-block;
	}

	.process__item {
		width: 49%;
		display: inline-block;
	}
}

@media (min-width: 1200px) {
	.process {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.process__item {
		width: 100%;
	}

	.process__item:not(:last-of-type)::after {
		content: "";
		width: 1px;
		height: 75%;
		background: #000;
		position: absolute;
		right: 0;
		top: 50%;
		opacity: 0.2;
		transform: translateY(-50%);
	}
}

.plan-box {
	width: 100%;
	min-width: 250px;
	display: block;
	height: 50px;
	position: relative;
	border-radius: 5px;
	background: linear-gradient(to right, #fe9435 35%, #ffffff 100%);
	margin-bottom: 40px;
	padding: 15px 25px 0 40px;
	color: #000;
	box-shadow: 1px 2px 1px -1px #777;
	transition: background 200ms ease-in-out;
}

.shadow {
	position: relative;
}

.shadow:before {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 13px;
	right: 7px;
	width: 25%;
	top: 0;
	box-shadow: 0 15px 10px #777;
	transform: rotate(4deg);
	transition: all 150ms ease-in-out;
}

.plan-box:hover {
  color: #fff;
	background: linear-gradient(to right, #000 0%, #fe9435 100%);
}

.shadow:hover::before {
	transform: rotate(0deg);
	bottom: 20px;
	z-index: -10;
}

.circle {
	position: absolute;
	top: 14px;
	left: 15px;
	border-radius: 50%;
	box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, 0.5), inset 0 0 0 25px #000000;
	width: 20px;
	height: 20px;
	display: inline-block;
}

/*  */
ol {
	--column-gap: 1rem;
	--row-gap: 2rem;
	--rocket-aspect: calc(134.13/196.24);
	/* svg viewbox */
	--rocket-width: 3rem;
	--rocket-height: calc(var(--rocket-width) / var(--rocket-aspect));
	--flame-outer-color: #F16E39;
	--flame-inner-color: #FED103;
	--number-circle-size: 2.5rem;
	--number-circle-border-size: 0.25rem;
	--number-line-height: 0.125rem;
	--number-line-length: calc(var(--rocket-width) / 2 + var(--column-gap) / 2);
	--number-line-dot-size: 0.25rem;
	padding-bottom: 5rem;
	list-style: none;
	display: grid;
	column-gap: var(--column-gap);
	row-gap: var(--row-gap);
	grid-template-columns: var(--rocket-width) 1fr;
	counter-reset: liCount;
	font-family: system-ui, sans-serif;
	color: white;
	overflow: hidden;
	width: min(45rem, 100%);
	margin-inline: auto;
}

@media (min-width: 30rem) {
	wrapper {
		padding: 2rem
	}

	ol {
		--column-gap: 2rem;
		--rocket-width: 5rem;
		grid-template-columns: 1fr var(--rocket-width) 1fr;
	}

	ol .rocket {
		grid-column: 2 !important
	}

	ol>li {
		grid-column: 1/-1 !important;
		width: calc(50% - var(--rocket-width) / 2 - var(--column-gap))
	}

	ol>li:nth-of-type(odd) {
		justify-self: end
	}

	ol>li:nth-of-type(even) {
		text-align: right
	}

	ol>li:nth-of-type(even):after {
		left: unset;
		right: calc(var(--circle-pos-x) * -1);
		--dot_pos_multiplier: -1
	}

	ol>li:nth-of-type(even)::before {
		right: unset;
		left: calc(100% + var(--column-gap) / 2);

	}

}

ol::after {
	content: "";
	grid-row: 1;
	grid-column: 1/-1;
}

ol .rocket {
	grid-row: 1;
	grid-column: 1;
	position: relative;
	isolation: isolate;
}

ol .rocket svg {
	width: var(--rocket-width);
	height: var(--rocket-height)
}

ol .rocket::after {
	content: "";
	position: absolute;
	width: 50%;
	height: 200vh;
	top: calc(100% - var(--rocket-height) * .2);
	left: 25%;
	z-index: -1;
	background-image:
		radial-gradient(ellipse at center top, var(--flame-inner-color) 20%, transparent 50%),
		linear-gradient(to right,
			transparent 20%,
			var(--flame-outer-color) 40%,
			var(--flame-inner-color) 50%,
			var(--flame-outer-color) 60%,
			transparent 80%),
		radial-gradient(ellipse at center top, var(--flame-outer-color) 35%, transparent 65%);
	background-repeat: no-repeat;
	background-position: top center;
	background-size:
		100% calc(var(--rocket-height) * 0.4),
		100%,
		100% calc(var(--rocket-height) * 0.4);
}

ol>li {
	counter-increment: liCount;
	grid-column: -2;
	position: relative;
}

ol>li::after {
	content: counter(liCount, decimal-leading-zero);
	width: var(--number-circle-size);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	position: absolute;
	--circle-pos-x: calc(var(--number-circle-size) / 2 + var(--column-gap) + var(--rocket-width) / 2);
	left: calc(var(--circle-pos-x) * -1);
	top: calc(50% - var(--number-circle-size) / 2);
	background-color: var(--accent-color);
	font-weight: 600;
	--dot-size: calc(var(--number-circle-size) / -2 + var(--number-line-dot-size));
	box-shadow:
		inset 0 0 0 var(--number-circle-border-size) currentcolor,
		inset -0.125rem 0.125rem 0.25rem var(--number-circle-border-size) rgb(0 0 0 / .25),
		-0.125rem 0.125rem 0.25rem rgb(0 0 0 / .5),
		calc(var(--number-line-length) * var(--dot_pos_multiplier, 1)) 0 0 var(--dot-size) currentcolor;
}

ol>li::before {
	position: absolute;
	content: "";
	width: var(--number-line-length);
	height: var(--number-line-height);
	background-color: currentcolor;
	right: calc(100% + var(--column-gap) / 2);
	top: calc(50% - var(--number-line-height) / 2);
}

.template_faq {
	background: #edf3fe none repeat scroll 0 0;
}

.panel-group {
	/* background: #fff none repeat scroll 0 0; */
	border-radius: 3px;
	box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.04);
	margin-bottom: 0;
	padding: 30px;
}

#accordion .panel {
	background: #fff;
	border-radius: 23px;
	border: medium none;

	box-shadow: none;
	margin: 0 0 15px 10px;
}

#accordion .panel-heading {
	border-radius: 30px;
	padding: 0;
}

#accordion .panel-title a {
	text-decoration: none;
	background: #fe9435 none repeat scroll 0 0;
	border: 1px solid transparent;
	border-radius: 30px;
	color: #fff;
	display: block;
	font-size: 18px;
	font-weight: 600;
	padding: 12px 20px 12px 50px;
	position: relative;
	transition: all 0.3s ease 0s;
}

#accordion .panel-title a.collapsed {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ddd;
	color: #333;
}

#accordion .panel-title a::after,
#accordion .panel-title a.collapsed::after {
	background: #fe9435 none repeat scroll 0 0;
	border: 1px solid transparent;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
	color: #fff;
	content: "";
	font-family: fontawesome;
	font-size: 25px;
	height: 55px;
	left: -20px;
	line-height: 55px;
	position: absolute;
	text-align: center;
	top: -5px;
	transition: all 0.3s ease 0s;
	width: 55px;
}

#accordion .panel-title a.collapsed::after {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ddd;
	box-shadow: none;
	color: #333;
	content: "";
}

#accordion .panel-body {
	background: transparent none repeat scroll 0 0;
	border-top: medium none;
	padding: 20px 25px 10px 9px;
	position: relative;
}

#accordion .panel-body p {
	border-left: 1px dashed #8c8c8c;
	padding-left: 25px;
}

/* PPC page */
.pricing-card {
	width: 100%;
	font-family: 'Open Sans';
	display: flex;
	/* margin: 75px auto; */
	box-shadow: 3px 6px 5px 0 rgb(0 0 0 / 15%)
}

.card-left {
	text-align: center;
	background: linear-gradient(266deg, #ffffff, #fe9435);
	color: #fff;
	width: 30%;
	padding: 85px 20px;
	border-radius: 6px 0 0 6px;
}

.card-left h3 {
	text-transform: uppercase;
	margin-bottom: 2px;
	font-size: 24px;
	color: #000;
	margin-bottom: 50px;
}

.card-left p {
	font-size: 60px;
}

.dollar {
	font-size: 24px;
	position: relative;
	top: -26px;
}

.card-right {
	text-align: left;
	background: #fff;
	width: 70%;
	color: #000;
	border-radius: 0 6px 6px 0;
	padding: 40px 40px;
}

.card-right h1 {
	margin-bottom: 15px;
	color: #292e31;
	opacity: 0.9;
}

/* content-writing page */

.content-box {
	width: 100%x;
	background-color: #000;
	color: #fff;
	margin: 50px auto;
	padding: 10px 10px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.content-box:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	border-width: 0 25px 25px 0;
	border-style: solid;
	border-color: #fe9435 #FFF;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-bottom-left-radius: 8px;
	border-bottom-left-radius: 8px;
	-webkit-box-shadow: 0 0 5px #555;
	-moz-box-shadow: 0 0 5px #555;
	box-shadow: 0 0 5px #555;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out
}

.right-line {

	border-left: 5px solid #f39c12;
	font-size: 14px;
	margin: 0.5rem 0;
	color: #000;
	padding: 10px 25px;
	border-bottom: 1px solid #dedede;
}
/* contact us Page */
.right_conatct_social_icon{
  background: linear-gradient(to top right, #fe9435 -5%, #ffffff 100%);
}
.contact_us{
 background-color: #fff;
 
}

.contact_inner{
 background-color: #f1f1f1;;
 position: relative;
 box-shadow: 20px 22px 44px #cccc;
 border-radius: 25px;
}
.contact_field{
 padding: 60px 100px 90px 100px;
}
.right_conatct_social_icon{
 height: 100%;
}

.contact_field h3{
color: #000;
 font-size: 40px;
 letter-spacing: 1px;
 font-weight: 600;
 margin-bottom: 10px
}

.contact_field .form-control{
 border-radius: 0px;
 border: none;
 border-bottom: 1px solid #ccc;
}
.contact_field .form-control:focus{
 box-shadow: none;
 outline: none;
 border-bottom: 2px solid #1325e8;
}
.contact_field .form-control::placeholder{
 font-size: 13px;
 letter-spacing: 1px;
}

.contact_info_sec {
 position: absolute;
 background-color: #2d2d2d;
 right: 1px;
 top: 10%;
 height: 540px;
 width: 340px;
 padding: 40px;
 border-radius: 25px 0 0 25px;
}
.contact_info_sec h4{
  color: #fff;
 letter-spacing: 1px;
 padding: 15px 0px;
}
.contact-info-d{
  text-decoration: none;
  color: #fff;
}

.info_single{
 margin: 30px 0px;
}
.info_single i{
 margin-right: 15px;
}
.info_single span{
  color: #fff;
 font-size: 14px;
 letter-spacing: 1px;
}

button.contact_form_submit {
 background: linear-gradient(to top right, #1325e8 -5%, #8f10b7 100%);
 border: none;
 color: #fff;
 padding: 10px 15px;
 width: 100%;
 margin-top: 25px;
 border-radius: 35px;
 cursor: pointer;
 font-size: 14px;
 letter-spacing: 2px;
}

.map_sec{
 padding: 50px 0px;
}
.map_inner h4, .map_inner p{
 color: #000;
 text-align: center
}
.map_inner p{
 font-size: 16px;
}
.map_bind{
margin-top: 50px;
 border-radius: 30px;
 overflow: hidden;
}
/* thank you */
.thankyoucontent{
 
 text-align: center;
            
}
.thankyoucontent h1{
  font-size:4.5em;
}
.home-custom-btn {
width: 130px;
height: 40px;
color: #fff;
border-radius: 5px;
padding: 10px 25px;
font-family: 'Lato', sans-serif;
font-weight: 500;
background: transparent;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: inline-block;
box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
7px 7px 20px 0px rgba(0,0,0,.1),
4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
}
.home-btn {
width: 130px;
height: 40px;
line-height: 42px;
padding: 0;
border: none;
background: rgb(255,27,0);
background: linear-gradient(0deg, #fe9435  0%, #fe9435  100%);
}
.home-btn:hover {
color: #000;
background: transparent;
box-shadow:none;
}
.home-btn:before,
.home-btn:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #000;
box-shadow:
-1px -1px 5px 0px #fff,
7px 7px 20px 0px #0003,
4px 4px 5px 0px #0002;
transition:400ms ease all;
}
.home-btn:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.home-btn:hover:before,
.home-btn:hover:after{
width:100%;
transition:800ms ease all;
}
/* careers  p */

.careers-box .arrow {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	margin-top: 5px;
	margin-right: 8px;
	z-index: 1;
	cursor: pointer;
  }
  .careers-box > .card h3{
	position: relative;
	font-size: 23px;
	text-align: left;
	margin-bottom:25px;
  }
  .careers-box > .card h3:after{
	content: "";
	position: absolute;
	width: 15%;
	height: 2px;
	left: 0;	
	margin: 10px 0px;
	background: #000;
	display: block;
	
  }
  .careers-box > .card {
	position: relative;
	overflow: hidden;
	/* width: 350px;*/
	/* height: 260px;  */
	/* height: 100%; */
	margin: 10px 0px;
	background: #fff;
	/* display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column; */
	padding: 40px;
	/* padding: 1rem .5rem; */
	box-shadow: 0 1px 1px rgb(0,0,0,0.1),
	  0 2px 2px rgb(0,0,0,0.1),
	  0 4px 4px rgb(0,0,0,0.1),
	  0 8px 8px rgb(0,0,0,0.1);
	transition: transform 0.3s ease-in-out;
  }
  .careers-box > .card:hover {
	transform: scale(1.05);
  }
  
  .careers-box > .card:before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	background: #fe9435;
	clip-path: 
	  polygon(0 0, 100% 0, 100% 100%);
	transition: 
	  width 0.3s ease, height 0.3s ease;
	z-index: 0;
  }
  .careers-box > .card:hover:before {
	width: 200%;
	height: 200%;
	z-index: -1;
  }
  .careers-box > .card:hover h2 {
	color: #fff;
	transition: all 0.3s ease;
  }
  .careers-box > .card:hover p {
	color: #f1f1f1;
	transition: all 0.3s ease;
  }
  /* filter */


.filter-cat {
	display: flex;	
    margin: 2em 0;
}


.filter-cat-results .f-cat {
    opacity: 0;
    display: none;
    
    &.active {
        opacity: 1;
        display: block;
	    -webkit-animation: fadeIn 0.65s ease forwards;
	    animation: fadeIn 0.65s ease forwards;
    }
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
/*  */
.note{
	width: auto;
	text-align: center;
	background: #000;
	color: #fff;
	padding: 10px 0px 2px 10px;
	
}
.job-card-header {
    display: flex;
    align-items: flex-start;
}
.job-card a{
	color: black;
	text-decoration: none;
}
.job-card {
	color: black;
	text-decoration: none;
	height: 100%;
    padding: 20px 16px;
    /* background-color: #f1f1f1; */
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.78); 
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.78);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.job-card:hover {
	transform: scale(1.02);
  }
.menu-dot {
	background-color: #000;
	box-shadow: -6px 0 0 0 #000, 6px 0 0 0 #000;
	width: 4px;
	height: 4px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	margin-left: auto;
	margin-right: 8px;
  }
  
  .job-card-title {
	font-family: "Termina W00 Demi";
    font-weight: 600;
    margin-top: 16px;
    font-size: 14px;
}
.job-card-subtitle {
    color: #000;
	font-family: 'Manrope', sans-serif;
    
    margin-top: 14px;
    line-height: 1.6em;
}
.detail-button {
    background-color: black;
    color: white;
    font-size: 11px;
    font-weight: 500;
    padding: 6px 8px;
    border-radius: 4px;
}
.apply-now{
	text-decoration: none;
	margin-right: 12px;
	text-align: center;
	padding: 10px;
    width: 100%;
    cursor: pointer;
	border: none;	
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 14px;
	background: #fe9435!important;
	color: #000!important;
}
.apply-now:hover{
	font-size: 15px;
	border: 1px solid #000!important;
	color: #fe9435!important;
	background: #000!important;
}
.message-btn{
	background: #f1f1f1!important;
	color: #000!important;
}
.message-btn:hover{
	font-size: 15px;
	border: 1px solid #fe9435!important;
	color: #fe9435!important;
	background: #000!important;
}
.search-buttons {
    border: none;
	background-color: #fe943554;
    color: #000;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 14px;
}
.job-card-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
}
.card-buttons {
    margin-right: 12px;
}
.card-buttons, .card-buttons-msg {
    padding: 10px;
    width: 100%;
    font-size: 12px;
    cursor: pointer;
}
.popup {
	
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.75);
	z-index: 999;
  }
  
  .popup-inner {
	margin: 50px 0px;
	height: 100%;
	max-width: 90%;
	overflow-y: scroll;
	overflow-x: hidden;
	width: 100%;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
	border-radius: 3px;
	background: #fff;
  }
  .popup-inner-form {
	
	
	width: 70%;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 2px 6px rgba(0, 0, 0, 1);
	border-radius: 3px;
	background: #fff;
  }
  
  .popup-close {
	width: 30px;
	height: 30px;
	padding-top: 4px;
	display: inline-block;
	position: absolute;
	top: 23px;
	right: 25px;
	
	transition: ease 0.25s all;
	/* -webkit transform:translate(50%, -50%); */
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	
	font-family: Arial, sans-serif;
	font-size: 20px;
	text-align: center;
	line-height: 100%;
	color: #fff;
  }
  
  .popup-close:hover {
	background: rgba(0,0,0,1);
	text-decoration: none;
	color: #fff;
  }
  /* job description section */
  .job-explain {
    background-color: #f1f1f1;
    margin: 40px;
    border-radius: 0 0 8px 8px;
}
.job-bg {
    border-radius: 8px 8px 0 0;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 180px;
    transition: 0.3s;
    position: relative;
}
.job-logos {
    margin-top: -30px;
    position: relative;
    margin-bottom: -36px;
    padding: 0 20px;
}
.job-explain-content {
    padding: 50px 25px 30px;
}
.job-title-wrapper {
    display: flex;
    align-items: center;
}
.job-title-wrapper .job-card-title {
    font-size: 20px;
    margin-top: 0;
    font-weight: 600;
}
.job-action {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.job-subtitle-wrapper {
    display: flex;
	justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.job-subtitle-wrapper .company-name {
    color: #fe9435;
    font-weight: 600;
    font-size: 14px;
}
.job-subtitle-wrapper .comp-location {
    position: relative;
    margin-left: 10px;
}
.job-subtitle-wrapper .comp-location, .job-subtitle-wrapper .posted {
    color: blue;
    font-size: 16px;
    font-weight: 500;
}
.job-subtitle-wrapper .comp-location, .job-subtitle-wrapper .posted {
	color: #000;
    font-size: 14px;
    font-weight: 500;
	padding: 6px 8px;
	background: #000;
    color: #fff!important;
	border-radius: 10px;
}

.job-subtitle-wrapper .app-number {

    color: #fe9435;
    position: relative;
    margin-left: 14px;
}
span.app-number::before{
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	border-left: 1px solid #fff;
	left: -7px;
    
}
.explain-bar {
    margin-top: 20px;
    border: 1px solid red;
    border-radius: 8px;
    display: flex;
    height: 66px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}
.explain-contents {
    height: 66px;
}
.explain-title {
	font-family: 'Manrope', sans-serif;
    color: #000;
    font-size: 16px;
    line-height: 40px;
    white-space: nowrap;
}
.explain-subtitle {
    font-size: 13px;
    font-weight: 800;
    margin-top: -2px;
    white-space: nowrap;
}
.explain-contents + .explain-contents {
    border-left: 1px solid #fe9435;
    padding-left: 16px;
}
@media screen and (max-width: 990px){
	.job-subtitle-wrapper {
		flex-direction: column;
		align-items: flex-start;
	}
	.job-subtitle-wrapper .posted {
		margin-left: 0;
		margin-top: 6px;
	}
	.job-title-wrapper .job-card-title{
		font-size: 12px;
	}
	.explain-title{
		font-size: 16px;

	}
.explain-bar {
    flex-wrap: wrap;
    padding-bottom: 14px;
}
.explain-contents {
    width: 100%;
}
.explain-contents + .explain-contents {
    padding: 0;
    border: 0;
}
.explain-contents, .explain-bar {
    height: auto;
}
.explain-contents + .explain-contents {
    margin-top: 16px;
    border-top: 1px solid #000;
}
}

.overview-text {
    margin-top: 30px;
}
.overview-text-header {
    font-weight: 600;
    margin-bottom: 25px;
}
.overview-text-header:after{
	content: "";
    position: absolute;
    width: 10%;
    height: 2px;
    left: 65;
    /* margin: 10px 0px; */
    background: #000;
    display: block;
}
.overview-text-subheader {
    font-size: 13px;
    line-height: 2em;
}
.overview-text-item {
    font-size: 16px;
    position: relative;
    display: flex;
}
.apply-form-section{
	padding: 25px 50px;
	background: #fff;
}
/*  */
.card {
    padding: 15px !important;
    border-radius: 40px;
    overflow: hidden;
    border: 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.07);
    transition: all 0.15s ease;
}

.card:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1),
        0 10px 8px rgba(0, 0, 0, 0.015);
}

.card-body .card-title {

    color: #121212;
}

.card-text {

    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: #4E4E4E;

}

.card .container {
    width: 70%;
    background: #F0EEF8;
    border-radius: 30px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container:hover>img {
    transform: scale(1.2);
}

img.card-img-top {
    width: 50%;
    /* padding: 75px;  
               margin-top: -40px; */
    /* margin-bottom: -40px; */
    transition: 0.4s ease;
    cursor: pointer;
	max-height: 100%;
}



.card-img-top {
    position: absolute;
    top: auto !important;
    right: auto !important;
    max-height: 120px;
}
/* Web- Design */

.ol-cards {
	--flapWidth: 2rem;
	--flapHeigth: 1rem;
	--iconSize: 3rem;
	--numberSize: 3rem;
	--colGapSize: 2rem;
	width: max(100%, 40rem);
	margin-inline: auto;
	display: flex;margin-bottom:40px;margin-top:50px;
	  column-gap: 70px;
	  justify-content: center;
	counter-reset: ol-cards-count;
	list-style: none;
  }
  .ol-cards > li {
	display: grid;
	width:50%;max-height:100%;
	grid-template-areas:
	  "icon title"
	  "icon descr";
	gap: 0 1rem;border-radius: 1rem 1rem 1rem 1rem;
	align-items: center;
	padding: 19px 15px 19px 1px;
	background-image: linear-gradient(to bottom right, #e9eaec, #ffffff);
	counter-increment: ol-cards-count;
	filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
	box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
  }
  
  .ol-cards > li > .icon {
	grid-area: icon;
	background: var(--accent-color);
	color: white;
	font-size: var(--iconSize);
	width: calc(2 * var(--flapWidth) + var(--iconSize));
	padding-block: 1rem;
	border-radius: 0 5rem 5rem 0;
	margin-inline-start: calc(-1 * var(--flapWidth));
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
	position: relative;
	display: grid;
	place-items: center;
  }
  .ol-cards > li > .icon::before {
	content: "";
	position: absolute;
	width: var(--flapWidth);
  
	height: calc(100% + calc(var(--flapHeigth) * 2));
	left: 0;
	top: calc(var(--flapHeigth) * -1);
	clip-path: polygon(
	  0 var(--flapHeigth),
	  100% 0,
	  100% 100%,
	  0 calc(100% - var(--flapHeigth))
	);
	background-color: var(--accent-color);
	background-image: linear-gradient(
	  90deg,
	  rgba(0, 0, 0, 0.5),
	  rgba(0, 0, 0, 0.2)
	);
	z-index: -1;
  }
  
  .ol-cards > li > .title {
	grid-area: title;margin-bottom: 10px;
	font-weight: 600;color:black;
	font-size: 1.60rem;
  }
  .ol-cards > li > .descr {
	grid-area: descr;color:#47698e;line-height: 28px;
  }
  @media (max-width: 40rem) {
	.ol-cards {
	  --flapWidth: 1rem;
	  --flapHeigth: 0.5rem;
	  --iconSize: 2rem;
	  --numberSize: 2rem;
	  --colGapSize: 1rem;
	}
  }
  .ol-cards li:hover{
  transition: all 0.3s ease;
	  -moz-transition: all 0.3s ease;
	  -webkit-transition: all 0.3s ease;
	  -ms-transition: all 0.3s ease;
	  -o-transition: all 0.3s ease;
	  animation-name: jump;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
  }
  @keyframes jump {
	0% {
	  transform: translateY(0);
	}
	50% {
	  transform: translateY(-10px);
	}
	100% {
	  transform: translateY(0);
	}
  }
  .vis-hid{visibility:hidden;}
  
  #web-d-3{

	background-image: linear-gradient(rgb(0 0 0 / 92%) 100%, rgb(0 0 0)100%), url(../images/about/ab-banner.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
  }
  /* contact loction addresh */
  .mb-60 {
    margin-bottom: 60px;
}
.services-inner {
    border: 2px solid #ff9635;
    margin-left: 35px;
    transition: .3s;
}
.our-services-img {
    float: left;
    margin-left: -36px;
    margin-right: 22px;
    margin-top: 28px;
}
.our-services-text {
    padding-right: 10px;
}
.our-services-text {
    overflow: hidden;
    padding: 28px 0 25px;
}
.our-services-text h4 {
    color: #222222;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
}

.our-services-text h4::before {
    background: #ec6d48 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    position: absolute;
    width: 35px;
}
.our-services-wrapper:hover .services-inner {
    background: #fff none repeat scroll 0 0;
    border: 2px solid transparent;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.our-services-text p a{
    margin-bottom: 0;
	text-decoration: none;
	color: #000!important;
}

/* Location page */
.rt-side{
	position: relative;
}
.side-sec-rt{
	position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;  
  padding: 30px 0;  
  color: #fff;
  top: 20%;
  bottom: auto;

	
}
.side-sec-lt{
	overflow-y: visible;
}
.faq-panel-group {
    /* background: #fff none repeat scroll 0 0; */
    border-radius: 50px;
    box-shadow: 0 5px 30px 0 rgb(0 0 0 / 27%);
    margin-bottom: 0;
    padding: 30px;
}
section#location{
	background-image: linear-gradient(110deg, rgba(255,255,255,97%) 50%, rgba(255,255,255,97%) 50%),url('https://img.freepik.com/premium-vector/location-travel-road-white-background-vector-illustration_547150-348.jpg?w=900');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}