/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css");


/*
==============
Heading
==============
*/
.heading h1{
	color: #eb2353;
	font-size: 130px;
	-webkit-text-fill-color: #101010;
	-webkit-text-stroke-width: 2px;
}

/*
==============
Section Title
==============
*/
.section-title.style-one h1{
	color: #fff;
	font-size: 72px;
	font-weight: bold;
	margin-bottom: 3px;
}
.section-title.style-one span{
	display: inline-block;
	height: 5px;
	width: 172px;
	background: #eb2353;
}
/* Style Two */
.section-title.style-two h1{
	font-size: 60px;
	font-weight: bold;
}
.section-title.style-two .title-one{
	color: #fff;
	margin-right: 27px;
	display: inline-block;
}
.section-title.style-two .title-two{
	color: #eb2353;
	display: inline-block;
}
.section-title.style-two .title-two:before{
	content: '';
	height: 60px;
	width: 5px;
	background: #eb2353;
	display: inline-block;
	margin-right: 30px;
	vertical-align: middle;
}

/*
==============
Slider
==============
*/
.slider{
	position: relative;
}
.slider .single-image{
	height: 900px;
	width: 100%;
}
.slider .single-image img{
	height: 100%;
	width: 100%;
}
.slider .hero-carousel{
	position: absolute;
	right: 15px;
	bottom: 30px;
	width: 520px;
}
.slider .slider-item{
	height: 170px;
	margin: 0 15px;
}
.slider .slider-item img{
	height: 100%;
	width: 100%;
}
.slider .hero-carousel .owl-nav{
	position: absolute;
	left: -325px;
	top: 50%;
	transform: translateY(-50%);
}
.slider .hero-carousel .owl-nav .owl-prev{
	margin-right: 20px;
}
.slider .hero-carousel .owl-nav .owl-prev,
.slider .hero-carousel .owl-nav .owl-next{
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	height: 45px;
	width: 45px;
	line-height: 45px;
	font-size: 24px;
}

/*
==============
Hero Text
==============
*/
.hero-text .subtitle h1{
	color: #eb2353;
}
.hero-text .typing h1{
	font-size: 70px;
	margin: 0 0 15px;
}
.hero-text a{
	position: relative;
	display: inline-block;
	color: #fff;
	padding: 10px 30px;
	border: 2px solid #eb2353;
	margin-top: 20px;
	background-color: #000;
	z-index: 1;
}
.hero-text a:hover{
	color: #fff;
}
.hero-text a::before{
    content: '';
    position: absolute;
    top: 0;
    left: auto;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 0;
    background-color: #eb2353;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.hero-text a:hover::before {
	width: 100%;
	left: 0;
	right: auto;
}

/*
==============
Social Icons
==============
*/
.social-icons ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}
.social-icons ul li{
	margin-bottom: 10px;
}
.social-icons ul li a {
	display: inline-block;
	color: #fff;
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
}
.social-icons ul li a:hover{
	color: #eb2353;
}

/*
==============
Skill Bar
==============
*/
.skill-bar{
	position: relative;
}
.skill-bar .num{
	width: 0;
	text-align: end;
}
.skill-bar .title{
	position: absolute;
	top: 0;
	left: 0;
}
.skill-bar .animated-progress {
	position: relative;
	background-color: #555;
	margin-top: 10px;
	height: 5px;
	overflow: hidden;
}
.skill-bar .animated-progress span {
	background-color: #eb2353;
	height: 100%;
	display: block;
	width: 0;
	color: rgb(255, 251, 251);
	line-height: 30px;
	position: absolute;
	text-align: end;
}

/*
==============
Service Box
==============
*/
.service-box{
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 50px 30px;
}
.service-box .icon{
	margin-bottom: 20px;
}
.service-box .icon i{
	font-size: 30px;
}
.service-box h2{
	margin-bottom: 20px;
}

/*
==============
Icon Box
==============
*/
.icon-box{
	display: flex;
}
.icon-box .icon-box-icon{
	margin-right: 25px;
}
.icon-box .icon-box-icon .icon{
	width: 40px;
	margin-top: 5px;
}
.icon-box .icon-box-icon .icon i{
	color: #eb2353;
	font-size: 40px;
}
.icon-box .icon-box-content .description p{
	font-size: 16px;
}

/*
==============
Text Box
==============
*/
.text-box .head{
	margin-bottom: 25px;
}
.text-box .head h4{
	color: #eb2353;
}
.text-box .head h6{
	color: #bebebe;
}
.text-box .body p{
	font-size: 16px;
}

/*
=========
Counter
=========
*/
.single_counter {
	display: flex;
	align-items: center;
}
.counter_icon {
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	float: left;
	margin-right: 20px;
}
.counter_icon i {
	color: #eb2353;
	font-size: 50px;
	-webkit-transition: .5s;
	-o-transition: .5s;
	transition: .5s;
	display: inline-block;
}
.single_counter .countr_text{
	margin-right: 18px;
}
.countr_text h1{
	color: #eb2353;
	font-size: 72px;
	font-weight: bold;
	margin: 0;
}
.counter_title {
	padding: 0 0 0;
}
.counter_title h4 {
	color: #010101;
	font-size: 24px;
	margin-top: 2px;
}
.single_counter.center{
	text-align: center;
}

/*
==============
Portfolio
==============
*/
.portfolio-grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.portfolio-grid .portfolio-item{
	position: relative;
	min-height: 480px;
}
.portfolio-grid .portfolio-item .protfolio-details{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.portfolio-grid .portfolio-item:hover .protfolio-details{
	opacity: 1;
}
.portfolio-grid .portfolio-item .protfolio-details ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.portfolio-grid .portfolio-item .protfolio-details ul li a{
	color: #fff;
}
.portfolio-grid .portfolio-item .search-icon{
	position: absolute;
	right: 60px;
	bottom: 60px;
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.portfolio-grid .portfolio-item:hover .search-icon{
	opacity: 1;
}
.portfolio-grid .portfolio-item .search-icon i{
	color: #fff;
}
.portfolio-grid .portfolio-item::before{
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(235, 35, 83, 0.8);
	opacity: 0;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}
.portfolio-grid .portfolio-item:hover::before{
	opacity: 1;
}
.portfolio-grid .portfolio-item img{
	height: 100%;
	width: 100%;
}
.portfolio-grid .portfolio-item:nth-child(3){
	grid-column: 3/5;
}
.portfolio-grid .portfolio-item:nth-child(4){
	grid-row: 2;
	grid-column: 1/3;
}

/*
==============
Testimonials
==============
*/
.single-testimonial .testimonial-thumb-section{
  position: relative;
  margin-right: 60px;
}
.single-testimonial .testimonial-shape {
  position: relative;
  top: 110px;
  left: 33%;
}
.single-testimonial .testimonial-shape img{
	width: inherit;
}
.single-testimonial .testimonial-thumb {
  overflow: hidden;
  position: relative;
}
.testimonial-content p {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 30px;
}
.testimonial-intro h1 {
  color: #eb2353;
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}
.testimonial-intro span {
  font-size: 18px;
}
.testimonial-carousel .owl-nav{
  position: absolute;
  right: 0;
  bottom: 60px;
}
.testimonial-carousel .owl-prev, .testimonial-carousel .owl-next{
  display:inline-block;
  margin: 0 15px;
  color: #222;
}
.testimonial-carousel .owl-prev i,
.testimonial-carousel .owl-next i{
	font-size: 45px;
}
.testimonial-carousel .owl-next:hover, .testimonial-carousel .owl-prev:hover {
  color: #fff;
}

/*
==============
Button
==============
*/
.button.style-one a{
	color: #fff;
	padding: 20px 60px;
	background-image: url(../images/button-bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.button.style-one a:hover{
	color: #000;
}

/* Style Two */
.button.style-two a {
	position: relative;
	display: inline-block;
	color: #fff;
	padding: 10px 30px;
	border: 2px solid #eb2353;
	z-index: 1;
}
.button.style-two a::before {
	content: '';
	position: absolute;
	top: 0;
	left: auto;
	bottom: 0;
	right: 0;
	z-index: -1;
	width: 0;
	background-color: #eb2353;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.button.style-two a:hover::before {
	width: 100%;
	left: 0;
	right: auto;
}

/*
==============
Brand
==============
*/
.brand-carousel.owl-carousel .owl-item img{
	width: inherit;
}

/*
==============
Blog Posts
==============
*/
.blog-posts .single-blog{
	margin: 0 15px;
}
.blog-posts .single-blog .blog-thumb img{
  width: 100%;
}
.blog-posts .blog-content {
  padding: 32px 0 20px;
}
.blog-posts .blog-meta {
  margin-bottom: 8px;
}
.blog-posts .blog-meta span{
  color: #bebebe;
  font-size: 14px;
  text-transform: uppercase;
}
.blog-posts .blog-title h4 {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 25px;
  transition: .5s;
}
.blog-posts .blog-title h4:hover{
  text-decoration: underline;
}
.blog-posts .read_more_btn a{
  color: #eb2353;
  font-size: 18px;
  opacity: 0;
  transition: .5s;
}
.blog-posts .single-blog:hover .read_more_btn a {
  opacity: 1;
}
.blog-posts .read_more_btn a span i {
  font-size: 15px;
  border-radius: 50%;
  border: 1px solid #eb2353;
  height: 20px;
  width: 20px;
  line-height: 20px;
  text-align: center;
}