@charset "UTF-8";
/* CSS Document */
/* 

CORE settings

*/ :root {
  --bs-primary-color: #492f94;
  --bs-secondary-color: #291a54;
  --bs-tertiary-color: #ec375e;
  --bs-border-color: #291a54;
}
body {background-color: #e5e5e5;}

html, body, p {
  font-family: "Gotham A", "Gotham B";
  font-style: normal;
  font-weight: 400;
  color: #291a54;
}
.navbar-dark {
  background-color: rgba(0, 0, 0, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .85);
}
.navbar-brand {
  background-image: url("../img/logo.png");
  background-position: center;
  background-repeat: no-repeat;
	background-size: contain;
  display: block;
  width: 220px;
  height: 90px;
  margin: 0;
}
.fixed-top.scrolled .navbar-brand {
  height: 75px;
}
.td-none {
  text-decoration: none;
}
.text-primary {
  color: #492f94 !important;
}
.btn-primary {
  background-color: #492f94;
  color: #fff;
  border-color: #291a54;
}
.btn-primary:hover {
  background-color: #291a54;
  border-color: #492f94;
}
.bg-primary {
  background-color: #492f94 !important;
}
.text-secondary {
  color: #291a54 !important;
}
.btn-secondary {
  background-color: #291a54;
  color: #fff;
  border-color: #492f94;
}
.btn-secondary:hover {
  background-color: #492f94;
  color: #fff;
  border-color: #291a54;
}
.btn-white { background-color: #FFF;}
.btn-white:hover { background-color: var(--bs-primary-color); color: #FFF;}
.bg-secondary {
  background-color: #291a54 !important;
}
.bg-dark {
  background-color: #291a54 !important;
}
.bg-light {
  background-color: #e5e5e5 !important;
}
.text-glow, .btn {
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
}
.btn {
  font-weight: 500;
  font-size: 130%;
  letter-spacing: 1px;
}
.btn.rounded-pill {
  padding: 10px 24px;
	font-size: 115%;
	letter-spacing: normal;
}
.service .btn.rounded-pill {
  padding: 6px 18px;
}
.bg-gradient-primary {
  background: linear-gradient(to bottom, rgb(41, 26, 84) 0%, rgb(73, 47, 148) 100%);
}
.bg-gradient-secondary {
  background: linear-gradient(to bottom, rgb(73, 47, 148) 0%, rgb(41, 26, 84) 100%);
}
.bg-gradient-angle {
  background: linear-gradient(45deg, rgb(73,47,148) 0%,rgb(41,26,84) 100%);
}
.parallax {
  min-height: 600px; /* Adjust as needed */
  background-attachment: fixed;
  background-size: cover;
}
.text-normal {
  font-weight: 400;
}
.hr {
  background: url('../img/hr.svg') no-repeat center bottom;
  background-size: 500px;
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.text-white.hr {
  background: url('../img/hr-w.svg') no-repeat center bottom;
  background-size: 500px;
}
.fixed-top.scrolled {
  background-color: #492f94 !important;
  transition: all 200ms ease-in-out;
}
p, h1, h2, h3, h4, h5, .p, .h1, .h2, .h3, .h4, .h5 {
  margin-bottom: 1.5rem;
}
p, .p, h5, .h5 {	line-height: 1.65;}

.container-xl {
  max-width: 1600px;
}
.container-xxl {
  max-width: 1920px;
}
.mh-75 { min-height: 75vh;}
/* 

PAGE elememnts

*/
.navbar h3 {
  font-weight: 400;
  font-style: italic;
}
#intro {
  height: 100vh;
}
#intro > div {
  height: 100%;
}
#commercial {
  position: relative;
  height: 100%;
  width: 100%;
}
#commercial-intro {
  display: flex;
  height: 100%;
  z-index: 1;
}
#commercial-options {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  height: 100%;
  transition: all 0.3s linear;
  z-index: 2;
}
#commercial-options .row div {
  position: relative;
  height: 100%;
}
#commercial:hover #commercial-options {
  opacity: 1;
}
#commercial:hover #commercial-intro {}
#residential {
  height: 100%;
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
	cursor: pointer;
}
#residential:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}
#commercial {
  height: 100%;
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/com-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
	cursor: pointer;
}
#bespoke {
  height: 100%;
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/bes-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#bespoke:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/bes-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}
#retail {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/ret-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#retail:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/ret-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}
#healthcare {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/hea-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#healthcare:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/hea-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}
#industrial {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/ind-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#industrial:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/ind-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}
#public-sector {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/pub-h.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#public-sector:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/pub-h.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
}

.hero-box {box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  -webkit-border-bottom-right-radius: 50px;
  -webkit-border-bottom-left-radius: 50px;
  -moz-border-radius-bottomright: 50px;
  -moz-border-radius-bottomleft: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

#res-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-hero.jpg") no-repeat top;
}

#res-cctv-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-cctv-hero.jpg") no-repeat top;
}
#com-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/com-hero.jpg") no-repeat top;
}
#bes-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/bes-hero.jpg") no-repeat top;
}
#ret-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/ret-hero.jpg") no-repeat top;
}
#hea-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/hea-hero.jpg") no-repeat top;
}
#pub-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/pub-hero.jpg") no-repeat top;
}
#ind-hero {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/ind-hero.jpg") no-repeat top;
}



.hero {
  padding-top: 125px;
	background-color: var(--bs-secondary-color);
}
.service {
  display: block;
  padding-top: 66%;
  background-color: #492f94;
  color: #fff;
  border-radius: 30px;
  border: 2px solid #291a54;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.49);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.49);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.49);
  position: relative;
}
.service span {
  margin-bottom: 30px;
  display: block;
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  transition: all 0.3s linear;
}
#res-act-cctv {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-act-cctv.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-act-cctv:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-act-cctv.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-self-cctv {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-self-cctv.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-self-cctv:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-self-cctv.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-sec-lig {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-sec-lig.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-sec-lig:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-sec-lig.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-key-man {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-key-man.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-key-man:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-key-man.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-int-sys {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-int-sys.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-int-sys:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-int-sys.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-int-ala {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-int-ala.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-int-ala:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-int-ala.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-fire-ala {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-fire-ala.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-fire-ala:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-fire-ala.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
#res-safes {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0.25), rgba(73, 47, 148, 0.25)), url("../img/res-safes.jpg") no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .25);
  transition: all 0.3s linear;
}
#res-safes:hover {
  background: linear-gradient(0deg, rgba(73, 47, 148, 0), rgba(73, 47, 148, 0)), url("../img/res-safes.jpg") no-repeat center;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0);
  background-size: cover;
  border-color: #fff;
}
.why-icon {
  width: 100%;
  max-width: 150px;
  margin: 0 auto 20px;
}
main {
  position: relative;
}
#enquiry {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-image: url('/ass/img/enquiry.svg');
  background-repeat: no-repeat;
  background-position: center center;
  width: 218px;
  height: 64px;
}
footer .logo {
  width: 100%;
  max-width: 175px;
  margin: 0 auto;
}
.footer-links a {
  display: block;
  text-decoration: none;
  border-bottom: 4px dotted rgba(73, 47, 148, 0);
  margin-bottom: 15px;
  transition: all 0.3s linear;
}
.footer-links a:hover {
  border-bottom: 4px solid rgba(73, 47, 148, 1);
}
.img-bg {
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding-bottom: 20px;
	min-height:100%;
	background-size: cover; background-repeat: no-repeat; background-position: center;
}
#subnav {
  background-color: rgba(0,0,0,0.1);
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  padding-bottom: 20px;
	min-height:100%;
}
#subnav .nav-header {
  background-color: var(--bs-primary-color);
  padding: 15px 30px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  margin-bottom: 10px;
}
#subnav .nav-header * {
  margin-bottom: 0;
}
#subnav ul, #subnav li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#subnav ul li a {
  display: block;
  padding: 5px 30px;
  text-decoration: none;
  color: var(--bs-secondary-color);
  font-weight: 500;
}
#subnav ul li a:hover, #subnav ul li a.active {
  color: var(--bs-tertiary-color);
}

h1, .h1 { font-size: 2.25rem;}
p, .p, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-size: 1.15rem;}

#service-icons {background-color: rgba(0,0,0,0.1);
  -webkit-border-top-right-radius: 50px;
  -moz-border-top-right-radius: 50px;
  border-top-right-radius: 50px;
  -webkit-border-top-left-radius: 50px;
  -moz-border-top-left-radius: 50px;
  border-top-left-radius: 50px;
}
/* 

RESPONSIVE

*/
@media screen and (max-width: 505px) {
h1, .h1 { font-size: 1.5rem;}
p, .p, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-size: 1rem;}
}