/*-----------------------------------------------------------------------------------
	Template Name: Halari - Software Digital Agency and IT Solutions HTML Template
	Version: 1.2.0
	Author: ashishmaraviya
	Author URI: https://themeforest.net/user/ashishmaraviya
----------------------------------------------------------------------------------- */
/*------------------------------------------------------------------
	[ Master css file, Table of contents ]
	
	00. General css
		- Body, a, button, img, li, p, h1 to h6
		- loader
		- .section_bg, header, .nav_sec, section, .global_title
		- Color panel
	01. Hero section css / .slider_sec, .hero_slider
		- Home page hero section
		- Inner pages hero section
	02. About section css / .about_sec
	03. Services section css / .service_sec
		- Home page service section css 
		- Inner pages service section css 
	04. Skills section css / .skill_sec
	05. Portfolio section css / .portfolio_sec
	06. Counter section css / .count_sec
	07. Team section css / .team_sec
		- Home page team section css
		- Inner pages team section css
	08. Packages section css / .package_sec
		- Home page package css
		- Inner pages package css
			- Pricing 1
			- Pricing 2
			- Pricing 3
	09. Testimonial section css / .testimonial_sec
	10. Work section css / .work_sec
	11. Blog section css / .blog_sec 
		- Home page blog section css
		- Inner pages blog section css
	12. Instagram section css / .instagram_sec
	13. Contact us section css / .form_info
		- Home page contact us css
		- Inner pages contact us css
	14. Footer / .footer_detail
		- Back to top button / #return-to-top
------------------------------------------------------------*/

/*------------------------------------------------------------------
	# [Color codes]
	Halari template use many colors, to see all color code in css files - color-1.css, color-2.css color-3.css, color-4.css color-5.css and color-6.css
# */

/*------------------------------------------------------------------
	[Typography]
	
	Title copy:      font-family: 'Poppins', sans-serif;
	Body copy:      font-family: 'Open Sans', sans-serif;
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');



/** [15. WhatsChat css] **/
.wc-style {
	display: inline-block;
	position: fixed;
	letter-spacing: 0.1px;
	font-family: 'red hat display', sans-serif;
	z-index: 999; 
}
.wc-style .wc-button {
    width: 45px;
    height: 45px;
    background-color: #5bc86d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
.wc-style .wc-button i {
	display: table;
	margin-right: 0;
	font-size: 23px;
	text-align: center;
	line-height: 38px;
	cursor: pointer;
	color: #fff; 
}
.wc-style .wc-panel {
    display: none;
    margin-bottom: 5%;
    width: 275px;
    box-shadow: 0 3px 7px rgba(12, 12, 12, 0.18);
    background-color: #ffffff; 
}
.wc-style .wc-panel .wc-header {
	padding: 12px 15px 15px;
	text-align: center;
	color: #ffffff;
	background: linear-gradient(to right, #26c281, #09e072); 
}
.wc-style .wc-panel .wc-body {
	min-width: 250px;
	white-space: nowrap;
	list-style: none;
	overflow-y: auto; 
}
.wc-style .wc-header strong {
    font-size: 18px;
    line-height: 20px;
    font-weight: 500; 
}
.wc-style .wc-header p {
    margin: 5px 0 0 0;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px; 
}
.wc-style .wc-list .d-flex {
    display: flex; 
}
.wc-style .wc-list .wc-img-cont {
    position: relative; 
    display: flex;
    align-items: center;
}
.wc-style .wc-list .wc-user-img {
    height: 40px;
    width: 40px;
    vertical-align: middle;
    border-radius: 50%; 
}
.wc-style .wc-list .wc-status-icon {
    position: absolute;
    bottom: 5px;
    right: 1px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: #a0a0a0; 
}
.wc-style .wc-list .wc-online {
    background-color: #26c281; 
}
.wc-style .wc-list .wc-offline {
    background-color: #d6d5d5; 
}
.wc-style .wc-list .wc-user-info {
    margin-top: 0;
    margin-bottom: auto;
    margin-left: 15px; 
}
.wc-style .wc-list .wc-user-info span {
	font-size: 15px;
	color: #333;
	font-weight: 400;
	line-height: 22px; 
}
.wc-style .wc-list .wc-user-info p {
	margin: 5px 0 0 0;
	color: #888;
	font-size: 13px;
	font-family: 'red hat display', sans-serif;
	line-height: 15px;
	font-weight: 300; 
}
.wc-style .wc-list .wc-chat-icon {
    margin-top: -40px;
    right: -10px;
    position: absolute;
    color: #d4d4d4;
    font-size: 55px;
    opacity: 0.5;
    transition: all .05s ease-in-out;
    overflow: hidden; 
}
.wc-style .wc-body:hover {
    text-decoration: none;
    cursor: pointer; 
}
.wc-style .wc-body:hover .wc-user-img {
	transition: all .3s ease-in-out; 
}
.wc-style .wc-body li {
    display: block;
    padding: 10px;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    border-bottom: 1px solid #f5f5f5;
    list-style-type: none;
    transition: all .3s ease-in-out; 
}
.wc-style .wc-body li:hover .wc-chat-icon {
	color: #26c281;
	transition: all .05s ease-in-out; 
}
.wc-style .wc-body li:hover .wc-chat-icon i {
	transition: all .3s ease-in-out; 
}
.wc-style .wc-body .wc-chat-icon i {
    transition: all .3s ease-in-out; 
}

.wc-right-bottom {
	bottom: 15px;
	right: 15px;
	float: right; 
}
@keyframes wc-fadein {
	from {
		opacity: 0; 
	}
	to {
		opacity: 1; 
	} 
}
@-moz-keyframes wc-fadein {
	from {
		opacity: 0; 
	}
	to {
		opacity: 1; 
	} 
}
@-webkit-keyframes wc-fadein {
	from {
		opacity: 0; 
	}
	to {
		opacity: 1; 
	}
}
@-ms-keyframes wc-fadein {
	from {
		opacity: 0; 
	}
	to {
		opacity: 1; 
	} 
}
@-o-keyframes wc-fadein {
	from {
		opacity: 0; 
	}
	to {
		opacity: 1; 
	} 
}
.rotateForward {
	animation-name: rotateF;
	animation-duration: 0.65s;
	animation-iteration-count: 1; 
}

@keyframes rotateF {
	from {
		transform: rotate(0deg); 
	}
	to {
		transform: rotate(360deg); 
	} 
}
.rotateBackward {
	animation-name: rotateB;
	animation-duration: 0.65s;
	animation-iteration-count: 1;
}

@keyframes rotateB {
	from {
		transform: rotate(360deg); 
	}
	to {
		transform: rotate(0deg); 
	}
}
.wc-panel .wc-body ul {
	margin: 0;
	padding: 0; 
}