/*********************************************************************************

	Template Name: Karbar - Multipurpose Bootstrap 4 Template
	Template URI: https://themeforest.net/user/themes-hub
	Description: Karbar is a best templete for your corporate/business website which comes with unique design and user friendly code.
	Author: Themes-Hub
	Author URI: https://hastech.company/
	Version: 1.0

	Note: This is custom css. All custom styles (user styles) declare here.

**********************************************************************************/

/************ NAV BAR ************/
.header-inner { padding: 0 70px; }
.menu-bar ul li { display: inline-block; }
.header-style-1.transparent-header { background: ##ffffffba; }
.header-style-2.transparent-header { padding: 10px; background: #FFFFFFA1; }
.sticky-header:not(.header-sidemenu).is-sticky { background: #FFFFFF; }
.logo img { width: 35%; }
.header .trigger-menu-icon span { background: #1A3465; }
.header.transparent-header nav.menu ul li a { color: #000000; font-size: 16px; font-family: 'Alegreya', serif; }
.header.transparent-header nav.menu ul li:hover > a { color: #dc322d; }
.header .trigger-menu-icon span { height: 3px; }
.header .trigger-menu-icon.is-active span:first-child { margin-bottom: -14px; }
.header nav.menu ul li a { padding: 30px 0; }
.sticky-header:not(.header-sidemenu).is-sticky nav.menu > ul > li > a { padding: 30px 0; }


/************ HEADER ************/
.bg-image-2 { background-image: url(../img/banner_image.jpg) }
.calendar-slider { background-image: url(../img/home-slider-4.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
[data-black-overlay]:before { background-color: #ffffff00; }
.slider-button { width: 30%; text-align: center; border-radius: 100px; }
.cr-btn, a.cr-btn { background: #EFB947; }
.cr-breadcrumb h1 { font-size: 70px; }


/************ SERVICE AREA ************/
span.service-yellow, span.repair-yellow, span.installation-yellow { color: #EFB947; text-transform: uppercase; }
.section-title { margin-bottom: 0; }
.section-title h2 { font-size: 60px; margin-bottom: 30px; font-family: 'Alegreya', serif; }
.service-padding { padding: 90px 0; }
.service img { width: 35%; }
.service-title { display: inline-block; }
.service-title h2 { margin: auto; padding-top: 35px; padding-bottom: 35px; color: #384866; }
.services-grid { margin-bottom: 70px; }
hr.yellow-line { visibility: visible; max-width: 70%; margin-left: 15%; margin-right: 15%; }
.service-new-desc { padding-left: 40px; padding-right: 40px; }
.service-new-info, .service-new-info2, .service-new-info3, .service-new-info4, .service-new-info5, .service-new-info6 { margin-top: 70px; }
.service-new-info4 { margin-top: 80px; text-align: center; }
.service-new-info4 h3 { margin-bottom: 40px; }
.service-new-info4 h4, .service-new-info6 h4 { text-align: center; margin-top: 5px; }
.service-new-info h3, .service-new-info2 h2, .service-new-info3 h2 { color: #384866; }
.service-new-info2 h2, .service-new-info3 h2 { text-align: center; margin-bottom: 40px; }
.service-new-info2-img { text-align: center; }
.service-new-info2-img h3 { vertical-align: middle; }
.service-new-info2-img img { margin-top: 15px; margin-bottom: 15px; }
.sub-service-area { margin-top: 30px; }
hr { visibility: hidden; }
.service-achive img { width: 30%; margin-right: 20px; }
.service-title-1 h2 { display: inline-block; font-size: 25px; padding-top: 15px; padding-bottom: 15px; }
.service-content { font-size: 14px; }
.popup-gallery div { text-align: center; margin-bottom: 20px; }
img.mfp-img { max-width: 85%; }
.mfp-title { text-align: center; line-height: 30px; color: #EFB947; font-size: 18px; margin-top: 0; font-weight: 700; text-decoration: underline; }
.air-cond-installtion1 h5 { text-align: center; }
.air-cond-installtion1 ul li { display: inline-block; margin-left: 10px; margin-right: 10px; }
.air-cond-installtion1 ul { text-align: center; padding: 0; }
.air-cond-installtion1 ul li i { font-size: 8px; vertical-align: middle; }
.air-cond-installtion1 { margin-bottom: 40px; }
.cooperated-list { border: 1px solid #DDDDDD; border-radius: 20px; margin-left: 15%; margin-right: 15%; padding-top: 10px; }


/************ GOOGLE CALENDAR ************/
.google-calendar { padding: 15px; }
.responsiveCal { position: relative; padding-bottom: 600px; height: 0; overflow: hidden; }
.responsiveCal iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }
iframe.calendar-table { overflow-x: scroll; }


/************ ABOUT-US AREA ************/
.about-btn { border-radius: 100px; background: #EFB947 !important; }
.about-padding { padding-top: 90px; padding-bottom: 90px; }
.about-content h2 { font-size: 55px; }
.about-content ul  { padding-left: 0; }
.about-content ul li { list-style-type: none; padding: 0; }
.about-us-info { margin-top: 50px; margin-bottom: 65px; }
.about-us-info h1 { color: #333333; font-size: 36px; }
.about-us-info p { text-align: justify; }
.business-owner h1 { color: #384866; }
.business-owner h1 .owner-name { color: #FFD700; }
.business-owner h1, .business-owner p { text-align: center; }
.owner-background { margin-bottom: 30px; text-align: center; }
.owner-background img { width: 80%; }
.owner-background p { text-align: center; margin-top: 10px; }
.our-partner { margin-top: 40px; }
.our-partner h1 { font-size: 55px; text-align: center; color: #333333; }
.brand-logo-area-bg-color { background: #FAFAFA !important; margin-top: 30px; border-radius: 50px; }
.cr-border-bottom { border: none; }


/************ PRICING AREA ************/
table.table.table-bordered.fixed_header { border-radius: 10px; }
.table-bordered { border: 1px solid #e9ecef00; box-shadow: 5px 10px 8px #e6e6e6; }
.table-bordered td, .table-bordered th { border: none; }
.table-bordered th { text-align: center; padding: 10px; vertical-align: middle; background-color: #1A3465; }
.table-bordered td { text-align: center; padding: 12px; vertical-align: middle; background-color: #f5f5f5; }
.section-subtitle h6 { font-size: 45px; font-weight: bold; text-align: center; padding: 20px; transform: rotate(270deg); transform-origin: 35% 200%; position: absolute; color: #9e9e9e; }
.section-subtitle-1 h6 { font-size: 40px; font-weight: bold; text-align: center; padding: 20px; transform: rotate(270deg); transform-origin: 35% 250%; position: absolute; color: #9e9e9e; }
span.vip { background-color: #FFD700; color: #FFFFFF; padding: 5px 10px; border-radius: 5px; }
tr { border-bottom: 1px solid #FAFAFA; }
td.hp { background-color: #e2e2e238; font-family: 'Rubik', sans-serif; font-size: 14px; }
td.ccc { background-color: #e2e2e238; font-family: 'Rubik', sans-serif; font-size: 14px; }
td.wall-type { background-color: #DFFCC0; }
td.wall-type-cancel { background-color: #FCC0C0; }
.key-clients { margin-top: 60px; }
.key-customer-img img { width: auto; }
.customer-name { font-size: 16px; }
td.bottom-left { border-bottom-left-radius: 10px; }
td.bottom-right { border-bottom-right-radius: 10px; }
p.hero-desc { text-align: center; }
td.wall-type span { background-color: #3acd7f; padding: 5px 15px; border-radius: 5px; color: #FFFFFF; font-weight: 500; font-family: 'Rubik', sans-serif; font-size: 14px; }
td.wall-type-cancel span { background-color: #f05228; padding: 5px 26px; border-radius: 5px; }
td.wall-type-cancel span img { width: 12%; }
.hero-box { padding: 0 20px 11px; }
th.hero-heading { padding: 27px; }
table.table.hero-header.table-bordered.fixed_header { margin-bottom: 40px; }
.section-subtitle .hero { background-color: #A8E16A; color: #FFFFFF; padding: 5px 10px; border-radius: 5px; }
.hero-header { background-color: 5px 10px 10px #e6e6e659 !important; }
.hero-wall-type { font-weight: bold; font-family: 'Rubik', sans-serif; font-weight: 500; font-size: 16px; }
span.national-hero { font-family: 'Rubik', sans-serif; font-size: 20px;}
.hero-right { right: -3%; }


/************ CONTACT US ************/
.bg-theme { background: #1A3465; }
a.cr-btn.cr-btn-white.contact-us-btn { border-radius: 100px; width: 30%; text-align: center; color: #1A3465; padding-left: 10px; padding-right: 10px; }
.bg-theme .cr-btn.cr-btn-white.contact-us-btn:hover, .bg-theme a.cr-btn.cr-btn-white.contact-us-btn:hover { color: #EFB947; }
.cr-btn.send-now-btn { background: #EFB947; width: 40%; border-radius: 100px !important; }
.breadcrumb-area { background-image: url(../img/home-slider-2.jpg) }


/************ FOOTER AREA ************/
.footer-section { padding: 40px 0; }
p.footer-copyright { text-align: center; }
.footer-widgets .footer-widget-title { margin-bottom: 0; font-family: sans-serif; font-weight: bold; padding: 10px 0; }
.footer-widgets .single-widget.widget-quick-contact { padding-left: 0; }
.footer-widgets .single-widget.footer-widget-about p { color: #FFFFFF; }
.footer-widgets .single-widget ul.menu a { color: #FFFFFF; }
h5.footer-widget-title { font-size: 25px; }
.footer-widgets .single-widget ul li { font-size: 16px; }
.widget-footer { margin-top: 25px; }
#scrollUp { background: #dc322d; border: none; border-radius: 5px; }
.copy-social { text-align: center; }
.copyright { padding: 20px 0; }
.copyright p { font-size: 20px; color: #FFFFFF; }
.copyright ul { padding-left: 0; }
.copyright ul li { list-style-type: none; display: inline-block; margin-top: 10px; }
.copyright ul li img { width: 85%; }
.bg-dark { background: #383838 !important;  }
.section-padding { padding: 60px 0; }
.contact-form { padding: 60px 0; background-color: #D7D7D7; }
.contact-box { padding: 3% 10%; box-shadow: 0px 6px 40px 0px rgba(0,0,0,0.75); -webkit-box-shadow: 0px 6px 40px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 6px 40px 0px rgba(0,0,0,0.75); border-radius: 5px; background-color: #FFFFFF; }
.service-bg { background-color: #FAFAFA; }
.section-padding-lg { padding: 60px 0; }
input { margin-bottom: 20px; }
.submit-button { display: flex; justify-content: center; align-items: center; margin-top: 40px; }
.contact-box form label { font-family: 'Alegreya', serif; font-size: 18px; }
input { color: #dc322d; }

.about-us-info p { font-size: 22px; font-family: 'Rubik', sans-serif; line-height: 1.8; }

span a { font-size: 18px; color: #ccc; text-decoration: none; margin: 0 10px; transition: all 0.4s ease-in-out; }
span a:hover { color: #fff; }
@keyframes float {
	0% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0); transform: translatey(5px); }
	50% { box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0); transform: translatey(-30px); }
	100% { box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0); transform: translatey(5px); }
  }
  .container { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .avatar { animation: float 6s ease-in-out infinite; }
  .avatar img { width: 100%; height: auto; }
  .content { width: 100%; max-width: 600px; padding: 20px 40px; box-sizing: border-box; text-align: center; }

  ul.menu-list li a { font-size: 16px; color: #584e4a; position: relative; text-transform: uppercase; text-decoration: none; padding-bottom: 8px; }
  ul.menu-list li a:before, ul.menu-list li a:after { content: ''; position: absolute; bottom: 2px; left: 0; right: 0; height: 2px; background-color: #f37272; }
  ul.menu-list li a:before { opacity: 0; transform: translateY(- 8px); transition: transform 0s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s; }
  ul.menu-list li a:after { opacity: 0; transform: translateY(4px); transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
  ul.menu-list li a:hover:before, ul.menu-list li a:focus:before, ul.menu-list li a:hover:after, ul.menu-list li a:focus:after { opacity: 1; transform: translateY(0); }
  ul.menu-list li a:hover:before, ul.menu-list li a:focus:before { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
  ul.menu-list li a:hover:after, ul.menu-list li a:focus:after { transition: transform 0s 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0s 0.2s; }

  .grid {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	/* max-width: 1000px; */
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	/* float: left; */
	display: inline-block;
	overflow: hidden;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 48%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
	background: #000000;
}

figure.effect-bubba img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}
figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1,0); transform: scale(1,0); }
figure.effect-bubba h2 { padding-top: 10%; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); }
figure.effect-bubba p { padding: 20px 2.5em; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); }
figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-bubba:hover h2,
figure.effect-bubba:hover p { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }

.button {
  --offset: 10px;
  --border-size: 2px;
  display: block;
  position: relative;
  padding: 0.75em 3em;
  appearance: none;
  border: 0;
  background: transparent;
  color: #e55743;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  transition: background 0.8s ease;
}
.button:hover {
  background: rgba(100, 0, 0, .03);
}
.button__horizontal, .button__vertical {
  position: absolute;
  top: var(--horizontal-offset, 0);
  right: var(--vertical-offset, 0);
  bottom: var(--horizontal-offset, 0);
  left: var(--vertical-offset, 0);
  transition: transform 0.8s ease;
  will-change: transform;
}
.button__horizontal::before, .button__vertical::before {
  content: '';
  position: absolute;
  border: inherit;
}
.button__horizontal {
  --vertical-offset: calc(var(--offset) * -1);
  border-top: var(--border-size) solid currentcolor;
  border-bottom: var(--border-size) solid currentcolor;
}
.button__horizontal::before {
  top: calc(var(--vertical-offset) - var(--border-size));
  bottom: calc(var(--vertical-offset) - var(--border-size));
  left: calc(var(--vertical-offset) * -1);
  right: calc(var(--vertical-offset) * -1);
}
.button:hover .button__horizontal {
  transform: scaleX(0);
}
.button__vertical {
  --horizontal-offset: calc(var(--offset) * -1);
  border-left: var(--border-size) solid currentcolor;
  border-right: var(--border-size) solid currentcolor;
}
.button__vertical::before {
  top: calc(var(--horizontal-offset) * -1);
  bottom: calc(var(--horizontal-offset) * -1);
  left: calc(var(--horizontal-offset) - var(--border-size));
  right: calc(var(--horizontal-offset) - var(--border-size));
}
.button:hover .button__vertical {
  transform: scaleY(0);
}