/*------------------------------------------------------------------
	[Master Stylesheet]

	Author        : Abbas Rafeeq (https://themeforest.net/user/webfulcreations/portfolio)
	Template Name : Computer Repair Website Template
	Version       : 1.0
	CopyRight     : 2018 August @ www.webfulcreations.com


	- Main CSS file is inside assets/css/theme-style.css
-------------------------------------------------------------------*/

@import 'css/animate.css';	   		   /* Including Animations CSS file */
@import 'css/owl.carousel.css';		   /* Owl Carousel CSS File */
@import 'css/foundation.min.css';       /* Including Foundation CSS File */
@import 'css/theme-styles.css';		   /* Main Theme CSS File */
@import 'css/responsive-styles.css';	   /* Main Theme CSS File */
@import 'css/twentytwenty-no-compass.css';   /* TwentyTwenty JQuery Plugin */
@import 'css/all.min.css';	   /* Including Font Awesome Icons */
/*@import 'css/fontawesome-all.min.css'; */	   /* Including Font Awesome Icons */


/**
 * Import Website Main Fonts 
 *
 * To change Fonts Get Google Fonts replace in following Link, 
 * AFter replacing below go to theme-style.css and update
 * Font Families
 *
 */
@import 'https://fonts.googleapis.com/css?family=Niconne|Poppins:400,600,700|Roboto:400,500,700" rel="stylesheet';

/*=========================================
	Below This Line You Can add Your CSS
	Please Do not Edit Files above if you 
	are not sure what you are doing!
==========================================*/

.slider-img-sk{
	margin-top:25px;
	box-shadow: 0 0 50px #ccc;
	border-radius: 10px 10px 0px 0px;
}
.main-sd-text-box{
	padding-top:170px;
}

.aa-cart-notify {
	background-color: #b42a26;
	padding: 0px 5px;
	font-size: 12px;
	border-radius: 50%;
	line-height: 18px;
	position: absolute;
	top: 0px;
	right: 3px;
	color: #ffffff;
	border: 1px solid #fff;
}

.search-wrap .fa {
	font-size: 1.4em;
}

/* Tooltip container */
.tooltip1 {
	position: relative;
	display: inline-block;
	/* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: #b42a26;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	font-size: 10px;
	border-radius: 6px;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	bottom: 90%;
	left: 50%;
	margin-left: -60px;
}

.tooltip1 .tooltiptext::after {
	content: " ";
	position: absolute;
	top: 100%;
	/* At the bottom of the tooltip */
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #b42a26 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip1:hover .tooltiptext {
	visibility: visible;
}
.banner-bg-img{
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center;
}
.promo-bg-img{
	background-image: url('images/bg-social.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
  	background-position: right; 
}
.slider-bg-blur{
	background-image: url('images/slider-bg.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
  	background-position: right; 
}
.cart_cart_icon{
	color:#b42a26;
}
.main_text_color{
	color: #b42a26;
}
.yallow_colar{
	color: yellow;
}
.pt_120{
	padding-top:120px;
}
.mt-2{
	margin-top: 20px;
}
.mb-2{
	margin-bottom: 25px!important;
}
.pt_60{
	padding-top:60px;
}
.pb_60{
	padding-bottom:60px;
}
.mh-500{
	min-height: 540px;
}
.pb_0{
	padding-bottom:0px;
}
.mb_0{
	margin-bottom:0px!important;
}
.mt-0{
	margin-top: 0px!important;
}
.mzero{
	margin: 0px!important;
}
.laser-img img{
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border: 1px solid #fff;
  	cursor: pointer;

	  --_g: 10% /45% 45% no-repeat linear-gradient(#000 0 0);
	  --m:
		left   var(--_i,0%) top    var(--_g),
		bottom var(--_i,0%) left   var(--_g),
		top    var(--_i,0%) right  var(--_g),
		right  var(--_i,0%) bottom var(--_g);
	  -webkit-mask: var(--m);
			  mask: var(--m);
	  filter: grayscale(0);
	  transition: .3s linear;
}
.laser-img img:hover{
	--_i: 10%;
	filter: grayscale(0);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border: 1px solid #fff;
}
.icon-fa i{
	font-size: 50px;
    color: #b42a26;
}
.icon-fa i:hover{
	color:#a71d18;
	cursor:pointer;
}
.login_error_mesg{
	color:red;
	padding-bottom:10px;
}
.user_profile_img{
	width: 30px;
	margin-top: -9px;
}
.fs_30{
	font-size: 30px!important;
	margin-bottom: 20px!important;
}
.div_mh_300{
	min-height: 305px;
}
.pro-rating i.active{
	color:#b42a26;
}
.cart_product_img{
	width: 80px;
	border:1px solid #ccc;
}
.cart-view-total a.button{
	float: right;
}
.clear{
	clear: both;
}
.ulogin_box{
	background-color: #ebe9e9;
    border-top: 20px solid #b42a26;
    border-bottom: 20px solid #b42a26;
    padding: 30px 25px;
    border-radius: 0px 30px 0px 30px;
	box-shadow: #a9a9a9 3px 5px 11px 0px;
}
.cart-btn{
	cursor: pointer;
}
.cart-btn:hover {
    background: #b42a26;
}
.select_doctor{
	padding:10px 30px!important;
	height: 60px!important;
}
.select_service{
	padding:10px 30px!important;
	height: 60px!important;
}
.alert{
	padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-success{
	color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger{
	color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
.alert-info{
	color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning{
	color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}
.socialicons1 a {
	font-size: 25px;
	margin-right: 5px;
	transition: 0.3s;
}
.socialicons1 li a{
	font-size: 30px!important;
	padding-right: 10px!important;
	padding-left: 0px!important;
	transition: 0.3s!important;
}
.facebook{
	color:#3b5998!important;
}
.facebookbtn{
	color: #3b5998!important;
    color: #fff!important;
    font-size: 20px;
    padding: 20px;
    border-radius: 35px;
}
.twitter{
	color:#00acee!important;
}
.instagrambtn{
	background-color: red;
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	/* Set the background size and repeat properties. */
	color: #fff!important;
    font-size: 20px;
    padding: 20px;
    border-radius: 35px;
}
.instagram{
	background-color: red;
	background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	/* Set the background size and repeat properties. */
	background-size: 100%;
	background-repeat: repeat;

	/* Use the text as a mask for the background. */
	/* This will show the gradient as a text color rather than element bg. */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
}
.youtube{
	color:#FF0000!important;
}
.whatsapp{
	color:#25D366!important;
}
.facebook:hover{
	color:#213b73!important;
}
.twitter:hover{
	color:#0276a3!important;
}
.instagram:hover{
	background-color: rgb(195, 2, 2);
	background: linear-gradient(45deg, #c6751e 0%,#ba4b22 25%,#ab1128 50%,#8e0f42 75%,#8e0d65 100%);
	/* Set the background size and repeat properties. */
	background-size: 100%;
	background-repeat: repeat;

	/* Use the text as a mask for the background. */
	/* This will show the gradient as a text color rather than element bg. */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
}
.youtube:hover{
	color:#b30101!important;
}
.whatsapp:hover{
	color:#028e36!important;
}

.single_service_box{
	margin-top:30px;
}
.fa-user-circle{
	font-size: 1.6em!important;
}
.price_normal{
	color:#b42a26!important;
}
.mrp_rate{
	font-size: 16px;
	padding-right: 10px;
	text-decoration: line-through;
}
.mrp_rate_h{
	font-size: 0.9rem!important;
	text-decoration: line-through;
}
.contact_info_heading{
	font-size: 1.2rem;
}

/* top header*/
  #aa-header{
	background-color: #2e323e; 
	/*background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);*/
  }
  #aa-header .aa-header-top .aa-header-top-area {
	display: inline;
	float: left;
	width: 100%;
  }
  #aa-header .aa-header-top .aa-header-top-left {
	float: left;
  }
  #aa-header .aa-header-top .aa-header-top-left .cellphone {
	float: left;
  }
  #aa-header .aa-header-top .aa-header-top-left .cellphone p {
	font-size: 12px;
	margin-bottom: 0;
	padding: 0px 10px;
	color: #FFF;
  }
  #aa-header .aa-header-top .aa-header-top-left .cellphone p span {
	margin-right: 5px;
	color: #FFF;
	font-size:12px;
  }
  #aa-header .aa-header-top .aa-header-top-right {
	float: right;
  }
  #aa-header .aa-header-top .aa-header-top-right {
	float: right;
  }
  #aa-header .aa-header-top .aa-header-top-right .aa-head-top-nav-right {
	display: inline-block;
	text-align: right;
	margin: 0px!important;
  }
  #aa-header .aa-header-top .aa-header-top-right .aa-head-top-nav-right li {
	display: inline-block;
	text-align: right;
  }
  #aa-header .aa-header-top .aa-header-top-right .aa-head-top-nav-right li a {
	display: inline-block;
    color: #ffffff;
    border-right: 1px solid #ddd;
    font-size: 12px;
    padding: 0px 10px;
	font-weight: 100;
  }


.video-box {
  position: relative;
  width: 100%;
  max-width: 400px;
}

/* Make the image to responsive */
.image {
  width: 100%;
  height: auto;
}

/* The overlay effect (full height and width) - lays on top of the container and over the image */
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .3s ease;
}

/* When you mouse over the container, fade in the overlay icon*/
.video-box:hover .overlay {
  opacity: 1;
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
  color: #00000096;
  font-size: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}