/* Moxes SEO  & Digital Marketing Agency HTML-5 Template */

/*** 

====================================================================
	Services One
====================================================================

***/

.service-one{
	position:relative;
	padding:120px 0px 120px;
}

.service-one .swiper-container{
	padding-top:60px;
}

.service-one .five-item-carousel-pagination{
	position: relative;
	z-index: 999;
	margin-top:-40px;
	text-align:center;
}

.service-one .five-item-carousel-pagination .swiper-pagination-bullet{
	position: relative;
	opacity: 1;
	width: 10px;
	height: 10px;
	background: none;
	border-radius: 50px;
	display: inline-block;
	margin: 0px 12px !important;
	transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	background-color:var(--white-color);
}

.service-one .five-item-carousel-pagination .swiper-pagination-bullet::before{
	position: absolute;
	content: '';
	left: -8px;
	top: -8px;
	right: -8px;
	bottom: -8px;
	opacity:0;
	border-radius:50px;
	border:1px solid var(--white-color);
}

.service-one .five-item-carousel-pagination .swiper-pagination-bullet:hover,
.service-one .five-item-carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
	opacity: 1;
	background-color:var(--main-color);
}

.service-one .five-item-carousel-pagination .swiper-pagination-bullet:hover::before,
.service-one .five-item-carousel-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{
	opacity: 1;
	border-color:var(--main-color);
}

.service-one .auto-container{
	max-width:1820px;
}

.service-one .swiper-slide.swiper-slide-active .service-block_three{
	transform:translateY(-60px);
}

.service-one_bg{
	position:absolute;
	left:20px;
	top:20px;
	right:20px;
	bottom:20px;
	border-radius:25px;
	background-color:var(--black-color);
}

.service-one_icon{
	position:absolute;
	right:80px;
	top:120px;
}

.service-one_shadow{
	background-position:left top;
	background-repeat: no-repeat;
}

.service-one_shadow2{
	background-position:right bottom;
	background-repeat: no-repeat;
}



.service-block_three{
	position:relative;
	margin-bottom:30px;
}

.service-block_three-inner{
	position:relative;
	overflow:hidden;
	text-align:center;
	border-radius:20px;
	padding: 60px 30px 40px;
	border:1px solid rgba(var(--white-color-rgb), 0.15);
}

.service-block_three-inner:hover::before{
	opacity:1;
	transform:scale(1,1);
}

.service-block_three-inner:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0;
	transform:scale(0.5,1);
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
	background-color:var(--main-color);
}

.service-block_three-inner:after{
	position:absolute;
	content:'';
	left:0px;
	bottom:65px;
	right:0px;
	height:1px;
	opacity:0.15;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
	background-color:var(--white-color);
}

.service-block_three-inner:hover::after{
	background-color:var(--black-color);
}

.service-block_three-inner:hover .service-block_three-title a,
.service-block_three-inner:hover .service-block_three-text{
	color:var(--black-color);
}

.service-block_three-icon{
	position:relative;
	font-size:80px;
	line-height:1em;
	display:inline-block;
	color:var(--white-color);
	font-family: "flaticon_moxes";
}

.service-block_three-inner:hover .service-block_three-icon{
	color:var(--black-color);
	-webkit-transform: scale(-1) rotate(180deg);
    -moz-transform: scale(-1) rotate(180deg);
    -ms-transform: scale(-1) rotate(180deg);
    -o-transform: scale(-1) rotate(180deg);
    transform: scale(-1) rotate(180deg);
}

.service-block_three-title{
	position:relative;
	margin-top:30px;
}

.service-block_three-title a{
	position:relative;
	color:var(--white-color);
}

.service-block_three-text{
	position:relative;
	font-size:16px;
	line-height: 30px;
	margin-top: 20px;
	margin-bottom:40px;
	color:var(--white-color);
}

.service-block_three-arrow{
	position:relative;
	width:48px;
	height:48px;
	z-index:10;
	margin:0 auto;
	font-size:18px;
	line-height:48px;
	border-radius: 50px;
	text-align: center;
	display:inline-block;
	color:var(--black-color);
	transform: rotate(-45deg);
	background-color: var(--white-color);
}

.service-block_three-inner:hover .service-block_three-arrow{
	transform: rotate(0deg);
}


/*** 

====================================================================
	Services Two
====================================================================

***/

.service-two{
	position:relative;
}

	.service-two.style-two {		
		padding: 110px 0px 90px;
		position: relative;
		/* padding: 120px 0px 95px; */
		background-position: left center;
		background-repeat: no-repeat;
	}

.service-block_one{
	position:relative;
	margin-bottom: 40px;
}

.service-block_one-inner{
	position:relative;
}

.service-block_one-image{
	position:relative;
	overflow:hidden;
	border-radius: 30px;
}

.service-block_one-image img{
	position:relative;
	width:100%;
	display:block;
}

.service-block_one-content{
	position:relative;
	z-index:1;
	margin-top: 70px;
	padding: 50px 50px;
	border-radius:30px;
	margin-left:-120px;
	background-color:var(--white-color);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.10);
}

.service-block_one-subtitle{
	position:relative;
	font-weight:700;
	font-size: 16px;
	letter-spacing: 2px;
	color:var(--black-color);
}

.service-block_one-title{
	position:relative;
	font-weight:700;
	margin-top:20px;
	margin-bottom:25px;
}

.service-block_one-title a{
	position:relative;
	color:var(--black-color);
}

.service-block_one-title a:hover{
	color:var(--main-color);
}

.service-block_one-text{
	position:relative;
	font-size: 18px;
	line-height: 32px;
	margin-bottom:30px;
}

.service-block_two{
	position:relative;
	margin-bottom:30px;
}

.service-block_two-inner{
	position:relative;
	border-radius:20px;
	padding: 35px 27px 60px;
	border:1px solid rgba(var(--black-color-rgb), 0.05);
}

.service-block_two-title{
	position:relative;
}

.service-block_two-title a{
	position:relative;
	color:var(--black-color);
}

.service-block_two-text{
	position:relative;
	font-size:16px;
	line-height: 30px;
	margin-top: 20px;
	color:var(--black-color);
}

.service-block_two-arrow{
	position:absolute;
	right:15px;
	bottom:15px;
	width:48px;
	height:48px;
	font-size:18px;
	text-align: center;
	line-height:48px;
	border-radius: 50px;
	color:var(--white-color);
	transform: rotate(-45deg);
	background-color: var(--black-color);
}

.service-block_two-overlay{
	overflow:hidden;
	border-radius:20px;
	background-position:left top;
	background-repeat: no-repeat;
	background-color:var(--black-color);
	
	transition: -webkit-transform 0.4s ease;
	transition: transform 0.4s ease;
	transition: transform 0.4s ease,-webkit-transform 0.4s ease;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transform-origin: right center;
	-ms-transform-origin: right center;
	transform-origin: right center;
}

.service-block_two-inner:hover .service-block_two-overlay{
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1);
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
}

.service-block_two-inner:hover .service-block_two-arrow{
	color:var(--white-color);
	transform: rotate(0deg);
	background-color: var(--main-color);
}

.service-block_two-inner:hover .service-block_two-text,
.service-block_two-inner:hover .service-block_two-title a{
	color: var(--white-color);
}

/***

====================================================================
	Sidebar Page Container
====================================================================

***/

.sidebar-page-container{
	position:relative;
	padding:120px 0px 90px;
}

.sidebar-page-container .content-side,
.sidebar-page-container .sidebar-side{
	margin-bottom:30px;
}

/* Sidebar Title */

.sidebar-widget{
	position:relative;
	margin-bottom:30px;
}

.sidebar-title{
	position:relative;
	margin-bottom:15px;
}

.sticky-top{
	z-index:1;
	top:110px;
}

/* Category List */

.category-list{
	position: relative;
	z-index:1;
}

.category-list li{
	position: relative;
	z-index:1;
	margin-bottom: 15px;
}

.category-list li a{
	position: relative;
	display: block;
	font-size: 20px;
	z-index:1;
	font-weight:700;
	border-radius:50px;
	color: var(--black-color);
	text-transform: capitalize;
	padding: 28px 25px 28px 85px;
	background-color: var(--main-color);
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.category-list li a:hover::before{
	opacity:0;
}

.category-list li a:before{
	position: absolute;
	content:'';
	left:3px;
	top:3px;
	right:3px;
	bottom:3px;
	z-index:-1;
	border-radius:50px;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
	background-color:var(--white-color);
}

.category-list li span{
	position: absolute;
	left: 10px;
	top:10px;
	width:58px;
	height:58px;
	font-size:24px;
	line-height:60px;
	text-align:center;
	border-radius:50px;
	display:inline-block;
	color: var(--white-color);
	background-color: var(--main-color);
	font-family: "flaticon_moxes";
}

.category-list li a:hover span{
	background-image:none;
	background-color: var(--black-color);
}

.category-list li a:hover{
	color: var(--white-color);
	transform: rotate(2deg);
}

.category-list li:last-child{
	margin-bottom: 0px;
}

/* Question Widget */

.question-widget{
	position:relative;
}

.question-widget .inner-box{
	position:relative;
	padding:60px 40px;
	border-radius:20px;
	text-align:center;
	background-position: right top;
	background-repeat: no-repeat;
	background-color:var(--black-color);
}

.question-widget-shadow{
	position: absolute;
    left: 0px;
    bottom: 0px;
    width: 107px;
    height: 114px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.question-widget .icon{
	position:relative;
	font-size:90px;
	line-height:1em;
	color:var(--main-color);
	font-family: "flaticon_moxes";
}

.question-widget .title{
	position:relative;
	margin-top: 30px;
	color:var(--white-color);
}

.question-widget .text{
	position:relative;
	margin-top: 20px;
	font-size:18px;
	line-height:30px;
	margin-bottom:25px;
	color:var(--white-color);
}

.question-widget .phone{
	position:relative;
	font-size: 24px;
	display: flex;
	gap: 15px;
    align-items: center;
    justify-content: center;
	color:var(--white-color);
}

.question-widget .phone .phone-icon{
	position:relative;
	width:44px;
	height:44px;
	font-size: 18px;
	font-weight:700;
	line-height:44px;
	text-align:center;
	border-radius: 50px;
	display: inline-block;
	color:var(--black-color);
	background-color:var(--white-color);
}

.question-widget .phone:hover{
	color:var(--main-color);
}

.service-detail{
	position:relative;
}

.service-detail .inner-box{
	position:relative;
}

.service-detail .image{
	position:relative;
	overflow:hidden;
	border-radius:25px;
}

.service-detail .image img{
	position:relative;
	width: 100%;
	display:block;
}

.service-detail .content-box{
	position:relative;
	padding-top:30px;
}

.service-detail .title{
	position:relative;
	margin-bottom: 15px;
	color: var(--black-color);
}

.service-detail p{
	position:relative;
	line-height: 32px;
	margin-bottom: 15px;
}

.service-detail h3{
	position:relative;
	margin-bottom: 15px;
	color: var(--black-color);
}

.service-detail .two-column{
	position:relative;
	margin-top: 30px;
}

.service-detail .two-column .column{
	position:relative;
	margin-bottom:30px;
}

.process-outer{
	position:relative;
	margin-top: 30px;
}

.faq-outer{
	position:relative;
	margin-top: 30px;
}

.faq-outer h3{
	position:relative;
	margin-bottom:25px;
}

/* Service One List */

.service-detail_list{
	position:relative;
}

.service-detail_list li{
	position:relative;
	padding-left:30px;
	font-size: 15px;
	font-weight:500;
	margin-bottom:18px;
	color: var(--black-color);
	text-transform:capitalize;
}

.service-detail_list li:before{
	position:absolute;
	content:'\f560';
	left: 0px;
	top: 0px;
	font-weight:700;
	color:var(--main-color);
	font-family: 'Font Awesome 6 Free';
}

.service-detail_list li:last-child{
	margin-bottom:0px;
}