@media (min-width:992px) and (max-width:1199px){
	.efffect h3{
		font-size:15px;
		margin-top:10px
	}
}
@media (min-width:768px) and (max-width:991px){
	#navigation .navbar-nav.navbar-right li{
		padding:0 0;
	}
	.header-bottom #subscribe-form .mail-field{
		width:70%
	}
	.header-bottom .btn-primary{
		float:right
	}
	.about-us .tab-content .pull-left.media-object{
		float:inherit;
		width:100%;
		margin-bottom:15px
	}
	.single-member{
		height:515px;
		margin-bottom:30px
	}
	.efffect h3,.efffect h4{
		display:none
	}
	.mask a i{
		margin-top:28px
	}
}
@media (max-width:767px){
	#navigation .navbar-nav.navbar-right{
		margin-top:0
	}
	.media,.media-body{
		overflow:inherit!important
	}
	#navigation .navbar-inverse .navbar-nav .active a,
	#navigation .navbar-inverse .navbar-nav .active a:focus,
	#navigation .navbar-nav.navbar-right li a:hover{
		border:none
	}
	.call-to-action p,.header-bottom #subscribe-form p{
		font-size:14px
	}.header-bottom #subscribe-form .mail-field{
		display:inline;
		float:none;
		margin-bottom:13px;
		margin-right:0;
		width:100%
	}
	#main-carousel .carousel-inner h2{
		border-bottom:0;font-size:30px
	}
	.slider-btn{
		font-size:16px;
		height:45px;
		line-height:45px;
		width:150px
	}
	.title-one{
		font-size:24px
	}
	#about-us p{
		font-size:14px
	}.nav-tabs li{
		width:33%
	}
	.nav-tabs li a{
		text-align:center
	}
	.nav-tabs li a i{
		display:block
	}
	.about-us .tab-content .pull-left.media-object{
		background-color:#F6F6F6;
		display:block;float:inherit!important;margin-right:0;
		width:100%
	}
	#services h2{
		font-size:24px
	}
	.member-right{
		left:55%
	}
	.single-member{
		margin-bottom:25px;
		height:600px
	}
	#portfolio .portfolio-filter{
		padding:0
	}
	#portfolio .portfolio-filter li{
		margin-bottom:10px
	}
	.efffect h3{
		margin-top:18%
	}
	#clients-carousel .carousel-inner img{
		width:100%
	}
	.single-blog ul li{
		margin-bottom:10px
	}
	#gmap iframe{
		height:225px
	}
	.contact-address{
		padding-left:10px;
		padding-right:10px
	}
	.pattern{
		height:960px
	}
	#footer p{
		font-size:14px
	}
}
@media (max-width:479px){
	body section{
		overflow:hidden
	}
	#navigation .navbar-nav.navbar-right li a{
		padding:5px 15px;
	}
	.media,.media-body{
		overflow:inherit!important
	}
	#navigation .navbar-inverse .navbar-nav .active a,
	#navigation .navbar-inverse .navbar-nav .active a:focus,
	#navigation .navbar-nav.navbar-right li a:hover{
		border:none
	}
	.call-to-action p,
	.header-bottom #subscribe-form p{
		font-size:14px
	}
	.header-bottom #subscribe-form .mail-field{
		display:inline;
		float:none;
		margin-bottom:13px;
		margin-right:0;
		width:100%
	}
	#main-carousel .carousel-inner h2{
		border-bottom:0;
		font-size:30px
	}
	.slider-btn{
		font-size:16px;
		height:45px;
		line-height:45px;
		width:150px
	}
	.title-one{
		font-size:24px
	}
	#about-us p{
		font-size:14px
	}
	.nav-tabs li{
		width:33%
	}
	.nav-tabs li a{
		text-align:center
	}
	.nav-tabs li a i{
		display:block
	}
	.about-us .tab-content .pull-left.media-object{
		background-color:#F6F6F6;
		display:block;
		float:inherit!important;
		margin-right:0;
		width:100%
	}
	#services h2{
		font-size:24px
	}
	.member-right{
		left:55%
	}
	.single-member{
		margin-bottom:25px;
		height:450px
	}
	#portfolio .portfolio-filter li{
		margin-bottom:10px
	}
	.efffect h3{
		margin-top:8%
	}
	.single-blog ul li{
		margin-bottom:10px
	}
	#gmap iframe{
		height:225px
	}
	.contact-address{
		padding-left:10px;
		padding-right:10px
	}
	.pattern{
		height:960px
	}
	#footer p{
		font-size:14px
	}
}
/* =====================================================
   QA layout fixes (Oct 2026) - spacing/alignment only
   ===================================================== */

/* Hero: buttons size to their label (long label overflowed the fixed-width box) */
#main-carousel .slider-btn{
	width:auto;
	min-width:190px;
	padding:0 28px;
	white-space:nowrap
}
#main-carousel .carousel-caption{
	padding-left:30px;
	padding-right:30px
}

/* Parallax sections: keep the background image covering the whole section
   (the scripted offset slid it away and left a dark band) */
.parallax-section{
	background-position:50% 50% !important
}
@media (max-width:991px), (hover:none){
	.parallax-section{
		background-attachment:scroll
	}
}
/* Services: light shade so the white heading stays readable over the sky */
#services{
	-webkit-box-shadow:inset 0 0 0 9999px rgba(0,0,0,.25);
	box-shadow:inset 0 0 0 9999px rgba(0,0,0,.25)
}

/* Equal-height cards (services + news) with buttons aligned at the bottom */
@media (min-width:768px){
	#services .services,
	#blog .container > .row:not(.text-center){
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap:wrap;
		flex-wrap:wrap
	}
	#services .services:before,#services .services:after,
	#blog .container > .row:not(.text-center):before,
	#blog .container > .row:not(.text-center):after{
		display:none
	}
	#services .services > [class*="col-"],
	#blog .container > .row:not(.text-center) > [class*="col-"]{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-ms-flex-direction:column;
		flex-direction:column
	}
	#services .single-service,
	#blog .single-blog{
		-webkit-box-flex:1;
		-ms-flex:1 0 auto;
		flex:1 0 auto;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-ms-flex-direction:column;
		flex-direction:column
	}
	#services .single-service i{
		-ms-flex-item-align:center;
		align-self:center
	}
	#blog .single-blog .btn-primary{
		margin-top:auto;
		-ms-flex-item-align:start;
		align-self:flex-start
	}
}
@media (max-width:767px){
	.single-service{
		margin-bottom:30px
	}
}

/* News: heading readable on the blue background, title bars visible */
#blog .title-one,
#blog .blog-heading,
#blog .title-one:before,
#blog .title-one:after{
	color:#fafcfc
}
/* News meta: stack instead of wrapping with a dangling separator */
@media (max-width:1199px){
	.single-blog ul.post-meta li{
		float:none;
		border-right:0;
		margin-bottom:6px;
		line-height:16px
	}
}

/* Contact: tighter gap under the heading, columns aligned, no fixed heights */
.contact-details{
	padding-top:20px
}
@media (min-width:768px){
	.contact-details > .row{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-align:center;
		-ms-flex-align:center;
		align-items:center
	}
	.contact-details > .row:before,
	.contact-details > .row:after{
		display:none
	}
}
.contact-address{
	height:auto;
	padding-top:0
}
#contact-form-section{
	height:auto;
	padding:0 15px 15px
}
.contact-address address,
.contact-address > p{
	position:relative;
	z-index:2
}
/* Dropdown + note sat under the striped overlay (dropdown could not be clicked) */
#contact-form select,
#contact-form .form-note{
	position:relative;
	z-index:2
}
/* Dropdown matches the inputs; grey until a service is chosen */
#contact-form-section select.form-control{
	height:34px;
	padding:6px 32px 6px 12px;
	background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 12px center;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	cursor:pointer
}
#contact-form-section select.form-control:invalid{
	color:#999
}
#contact-form-section select.form-control option{
	color:#555
}
#contact-form .form-note{
	margin:0
}
@media (max-width:767px){
	.contact-address{
		padding-bottom:10px
	}
	#contact-form-section{
		padding:20px 0 0
	}
	#contact-form .name-field,
	#contact-form .mail-field{
		width:100%;
		float:none;
		margin-right:0
	}
	#contact{
		padding-bottom:50px
	}
}

/* Testimonials on phones: photo centred above the quote */
@media (max-width:767px){
	#clients-carousel .carousel-inner{
		width:100%
	}
	#clients-carousel .single-client .media > img.pull-left{
		float:none !important;
		display:block;
		width:140px;
		margin:0 auto 15px;
		border-right:0;
		padding-right:0
	}
	#main-carousel .slider-btn{
		min-width:150px;
		padding:0 18px;
		font-size:15px
	}
	#main-carousel .carousel-caption{
		padding-left:15px;
		padding-right:15px
	}
}

/* Contact form: hCaptcha + status line (Web3Forms) */
#contact-form .form-captcha,
#contact-form .form-status{
	position:relative;
	z-index:2
}
#contact-form .form-captcha{
	text-align:left;
	min-height:78px
}
#contact-form .form-captcha .h-captcha{
	display:inline-block;
	vertical-align:top
}
#contact-form .form-status{
	margin:0;
	min-height:18px;
	font-size:13px;
	line-height:18px
}
#contact-form .form-status.is-success{
	color:#4b93f9
}
#contact-form .form-status.is-error{
	color:#b55a5a
}
#contact-form-section .btn-primary[disabled]{
	opacity:.75;
	cursor:default
}
@media (max-width:345px){
	#contact-form .form-captcha{
		min-height:66px;
		height:66px
	}
	#contact-form .form-captcha .h-captcha{
		-webkit-transform:scale(.85);
		-ms-transform:scale(.85);
		transform:scale(.85);
		-webkit-transform-origin:0 0;
		-ms-transform-origin:0 0;
		transform-origin:0 0
	}
}
/* Stripe pattern must cover the whole (now taller) contact section on phones */
@media (max-width:767px){
	#contact .pattern{
		height:100%
	}
}
/* Contact Us button + status line share the left edge of the fields and captcha */
#contact-form .form-captcha + .form-group,
#contact-form .form-status{
	text-align:left
}
/* Navbar with the extra "Schedule of Fees" item: keep it on one line on tablets */
@media (min-width:768px) and (max-width:991px){
	#navigation .navbar-nav.navbar-right li a{
		padding:6px 8px;
		font-size:13px
	}
}
/* Open mobile menu: solid background so the hero text does not show through */
@media (max-width:767px){
	#navigation .navbar-collapse.in,
	#navigation .navbar-collapse.collapsing{
		background-color:#fafcfc
	}
}

/* Contact hardening (Oct 2026): columns always above the decorative stripe
   overlay, overlay never catches taps, compact gap on phones/small tablets */
#contact .pattern{
	pointer-events:none
}
#contact .contact-address,
#contact #contact-form-section{
	position:relative;
	z-index:3;
	background-color:transparent
}
#contact #contact-form .form-control{
	position:relative;
	z-index:2
}
@media (max-width:767px){
	#contact .contact-details{
		padding-top:10px
	}
	#contact .contact-address,
	#contact #contact-form-section{
		height:auto;
		min-height:0
	}
	#contact .contact-address{
		padding-top:0;
		padding-bottom:0
	}
	#contact .contact-address address{
		margin-bottom:0
	}
	#contact #contact-form-section{
		padding:28px 0 0
	}
}
@media (max-width:399px){
	#contact .contact-address address strong{
		font-size:13px
	}
}