@charset "UTF-8";
/*!
Theme Name:		Patron Child
Theme URI:		https://unicoderbd.com/themes/wordpress/patron/
Author:			Unicoder
Author URI:		https://unicoderbd.com/ 
Description:	Povital Child Theme
License:		ThemeForest Split License
License URI:	https://themeforest.net/licenses/standard
Template:		patron
Text Domain:	patron-child
Domain Path:	/languages
Version:		1.0.7
Tags:			security, guard
*/
/*


*/

/***** Custom Style Start In Here *****/

/* X logo in header and footer social icons */
.header .social-icon .fa-x-twitter,
.social-footer .social-icon .fa-x-twitter,
#footer .social-icon .fa-x-twitter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-style: normal;
}

.header .social-icon .fa-x-twitter:before,
.social-footer .social-icon .fa-x-twitter:before,
#footer .social-icon .fa-x-twitter:before {
	content: none !important;
}

.header .social-icon .fa-x-twitter svg,
.social-footer .social-icon .fa-x-twitter svg,
#footer .social-icon .fa-x-twitter svg {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
}

/* Team overlay is informational only — no link to individual profiles */
.team-overlay {
	cursor: default;
}

/* Name and role must stay readable on the dark hover overlay */
.team-member:hover .team-overlay .team-title {
	opacity: 1 !important;
	transform: scale(1) !important;
	-webkit-transform: scale(1) !important;
	-ms-transform: scale(1) !important;
	-moz-transform: scale(1) !important;
}

.team-member:hover .team-overlay .team-title h6,
.team-member:hover .team-overlay .team-title .designation,
.team-member:hover .team-overlay h6 {
	color: #fff !important;
	opacity: 1 !important;
}

/* ========== Site-wide: stop horizontal scroll, fit content to viewport ========== */
html {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
video {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

table {
	max-width: 100%;
}

pre,
code {
	max-width: 100%;
	overflow-x: auto;
	word-wrap: break-word;
}

.wpb_wrapper,
.wpb_text_column,
.wpb_content_element,
.page-content,
.blog-text,
.single-content,
.vc_column-inner,
.welcome-item,
.service-item {
	max-width: 100%;
}

/* Nested Bootstrap containers (fixed widths) overflow their parent */
.container .container,
.container .container-fluid,
.vc_column_container .container {
	width: auto !important;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.vc_row.vc_row-fluid,
.full-row {
	max-width: 100%;
}

.rev_slider_wrapper,
.rs-module-wrap {
	max-width: 100%;
}

/* Header: wrap contact row instead of overflowing */
.header,
.header-top,
.main-nav,
.navbar {
	max-width: 100%;
}

.flex-align {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.top-left {
	flex-wrap: wrap;
	max-width: 100%;
	padding-left: 0;
}

.top-left > ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 100%;
}

.top-left > ul > li {
	float: none;
}

.main-nav .row {
	margin-left: 0;
	margin-right: 0;
}

.main-nav .col-md-12.p-0 {
	padding-left: 0;
	padding-right: 0;
}

/* 992-1199px: align the main nav with the top bar.
   .navbar-default is a flex row with space-between, and Bootstrap's clearfix
   :before/:after become extra flex items, so the logo and menu get pushed
   inward by an even share of the free space. Above 1199px the menu wrapper is
   already stretched, which is why only this range is affected. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
	.main-nav .navbar-default:before,
	.main-nav .navbar-default:after {
		content: none;
	}

	.main-nav .navbar-collapse.collapse {
		display: flex;
		justify-content: flex-end;
		flex: 1 1 auto;
	}
}

/* Banner: title and image must stay inside the viewport */
.banner-new,
#banner {
	overflow: hidden;
	max-width: 100%;
}

.banner-new img,
.banner-new img.bg_image {
	width: 100%;
	max-width: 100%;
	display: block;
	object-fit: cover;
}

#banner .page-titile,
#banner > div > div > div > div > div > h1,
#banner > div > div > div > div > div > h1.page-titile,
.page-titile {
	max-width: 100% !important;
	width: auto !important;
	white-space: normal !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.banner-content {
	width: 100%;
	max-width: 100%;
}

.banner-nav,
.banner-nav.pull-right {
	max-width: 100%;
	float: none;
}

.banner-nav ul,
.banner-nav li {
	white-space: normal;
}

/* Service pages */
.service-post-content,
.service-post-content .row,
.services-single-related,
.related-services {
	max-width: 100%;
}

.service-side-image {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.service-post-content img,
.img-responsive.image-right,
.related-services img,
#first-services img {
	max-width: 100% !important;
	height: auto !important;
}

#first-services a.overflow-hidden {
	position: relative;
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

#first-services a.overflow-hidden img {
	display: block;
	width: 100%;
	height: auto;
	transition: 0.3s ease-in-out;
}

#first-services a.overflow-hidden:hover img {
	filter: brightness(50%);
}

#first-services a.overflow-hidden::after {
	content: "+";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

#first-services a.overflow-hidden:hover::after {
	opacity: 1;
}

/* Footer */
#footer,
#footer-bottom,
.bottom-nav,
.copyright {
	max-width: 100%;
}

.bottom-nav {
	display: flex;
	flex-wrap: wrap;
}

@media (max-width: 1199px) {
	.navbar-nav > li {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (max-width: 991px) {
	.service-post-content .col-md-6,
	.service-post-content .col-sm-12 {
		width: 100%;
		float: none;
	}

	.service-side-image {
		margin-top: 24px;
		justify-content: flex-start;
	}

	.img-responsive.image-right {
		max-width: 100% !important;
		max-height: none !important;
		width: 100%;
	}

	.related-services .vc_col-sm-4,
	.related-services .col-md-4 {
		width: 50%;
	}

	.page-titile {
		font-size: 2em !important;
		line-height: 1.2 !important;
		text-align: left;
	}

	.banner-nav.pull-right {
		display: block !important;
		float: none !important;
		margin: 12px 0 0 !important;
		padding: 0 !important;
		text-align: left;
	}

	.service-item {
		height: auto !important;
	}
}

@media (max-width: 767px) {
	.container,
	.container-fluid {
		width: 100%;
		max-width: 100%;
	}

	.row {
		margin-left: -15px;
		margin-right: -15px;
	}

	.related-services .vc_col-sm-4,
	.related-services .col-md-4,
	.related-services .col-sm-6,
	.vc_row .vc_col-sm-4,
	.vc_row .vc_col-sm-6,
	.vc_row .vc_col-sm-3,
	.vc_inner .vc_col-sm-4,
	.vc_inner .vc_col-sm-6,
	#services-three > div > div > div > div > div,
	#teamAplineID > div > div > div > div > div > div > div,
	#teamMemdersID > div > div > div > div > div > div > div {
		width: 100% !important;
		float: none;
		max-width: 100%;
	}

	.page-titile {
		font-size: 1.75em !important;
		width: 100% !important;
	}

	.banner-nav.pull-right {
		margin: 8px 0 0 !important;
	}

	.banner-nav li {
		float: none;
		display: inline;
		padding-left: 0;
	}

	.header-top .col-lg-8,
	.header-top .col-md-8,
	.header-top .col-sm-8,
	.header-top .col-lg-4,
	.header-top .col-md-4,
	.header-top .col-sm-4 {
		width: 100%;
	}

	.top-right ul {
		float: none;
	}

	.footer-widget,
	.social-footer,
	.foot-nav {
		width: 100%;
		max-width: 100%;
	}

	.copyright,
	.copyright span {
		display: block;
		text-align: left;
		word-break: break-word;
	}

	.wpcf7 input,
	.wpcf7 select,
	.wpcf7 textarea,
	.form-control {
		max-width: 100%;
		width: 100%;
	}
}

