/* cmsms stylesheet: default_wide modified: 06/12/25 12:48:49 */
/* cmsms stylesheet: default_wide modified: 06/12/25 12:41:45 */
body {
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    line-height: 180%;
    font-size: 125%;
    color: #0a3953;
    margin:  0px;
    padding:  0px;
}

p {
    margin: 0px 0px 15px 0px;
}

h1 {
    font-weight: 800;
    font-size: 160%;
    line-height: 120%;
    margin: 0px 0px 30px 0px;
    color: #504c87;
}

h2 {
    font-weight: 500;
    line-height: 120%;
    margin: 30px 0px 20px 0px;
}

h3 {
    font-weight: 500;
    font-size: 115%;
    margin: 0px 0px 0px 0px;
    color: #e2b875;
}

h4 {
    font-weight: 500;
    font-size: 120%;
    margin: 0px 0px 30px 0px;
}

h5 {
    font-size: 130%;
    font-weight: 500;
    margin: 0px 0px 30px 0px;
}

h6 {
    font-size: 110%;
    font-weight: 500;
     margin: 0px 0px 30px 0px;
}

a:link,
a:visited {
    color: #557eae;
    text-decoration: underline;
    transition: color 0.4s, background-color 0.4s;
}

a:hover {
    color: #000000;
    text-decoration: none;
}

a img {
    border: 0px;
}

#outerHeader {
    height:  160px;
    border-bottom: 30px solid #01324d;
    position:  relative;
    z-index: 2;
}

#innerHeader {

}

#logo {
    padding-top: 20px;
}

#logo img {
    max-width: 100%;
    height: auto;
}

#menuShow {
    display: none;
}

#menuShow span {
    background-color: #f8c039;
    display: block;
    height: 5px;
    margin-bottom: 10px;
}

#menuShow:hover span {
    background-color: #ffffff;
    animation: shrink-bounce 0.6s ease forwards;
}

#closeMainNav {display: none;}

#mainNav {

padding-top: 70px;
}

#mainNav ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    gap: 70px;
    
}

#mainNav ul li {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: relative;
}

#mainNav ul li a:link, #mainNav ul li a:visited {
    text-transform: uppercase;
    text-decoration: none;
}

#mainNav ul li a:link span, #mainNav ul li a:visited span {display: block;padding-bottom: 0px;font-weight: 600;font-size: 100%;border-bottom: 5px solid #01324d;position: relative;top: 0px;transition: color 0.4s,top 0.4s}

#mainNav ul li a:hover span {
   color: #557eae; 
   top: -4px;
}

#delivery span, #case-studies span {
border-color: #ddad5f !important;
}

#our-team span, #enquire span {
border-color: #557eae !important;
}

#mainNav ul ul {
               display: none;
               position: absolute;
               background-color: #01324d;
               padding:  10px;
               }

#mainNav ul ul li {}

#mainNav ul ul a:link, #mainNav ul ul a:visited {
    font-size: 90%;
    display:  block;
    line-height: 100%;
    width: 200px;
    padding: 10px;
    /* height: 60px; */
    text-transform: none;
    color:  #ffffff;
    line-height: 120%;
}

#mainNav ul ul a:link span, #mainNav ul ul a:visited span, #mainNav ul ul a:hover span {
    border-bottom: 0px;
    top: 0px;
}

#mainNav ul ul a:hover {}

#heroSection {margin-bottom: 60px;position:  relative;z-index: 1;}

#innerHeroSectionImage {
  width: 100%;
  overflow: hidden;
  position:  relative;
  z-index: 1;
}

.longHeroSection {
height:784px;
}

.longHeroSection img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.longHeroSection img.active {
    opacity: 1;
    z-index: 1;
}

.shortHeroSection {}

.shortHeroSection img {
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: auto;   /* uses the 1920px from HTML */
  height: auto;  /* uses the 784px from HTML */
}

#innerHeroSectionCopy {position:  absolute;top:  0px;left:  0px;right:  0px;text-align:  center;padding-top: 140px;z-index: 2;}

#innerHeroSectionCopy h1 {max-width: 576px;width:  100%;margin: 0px auto 40px auto;font-weight:  400;}

#innerHeroSectionCopy h1.otherTitle {background-color: #ffffffde;
    color: #0a3953;
padding:  20px;font-size: 200%;
}

#innerHeroSectionCopy h2 {
    max-width: 576px;
    margin: 0px auto;
    color: #ffffff;
    margin-bottom: 40px;
    font-size: 165%;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

#innerHeroSectionCopy .transWhiteBack {height: 80px;font-size: 185%;padding-top: 20px;box-sizing:  border-box;}

#innerHeroSectionCopy .transBlueBack {
                                       height: 145px;
                                       font-family: "Lancelot", serif;
                                       font-weight: 400;
                                       font-style: normal;
                                       font-size: 419%;
                                       box-sizing: border-box;
                                       padding-top: 63px;
                                     }

#innerHeroSectionCopy h1 span {
display: block;
}

#callToAction {
    text-align: center;
    background-color: #557eae;
    padding: 20px 0px;
}

#callToAction  .blockButton {
    margin-top: 10px;
}

footer {
padding-top: 45px;
}

footer a:link, footer a:visited {
    color: #ffffff;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

.outer {
    position: relative;
}

.inner {
    position: relative;
    margin: 0px 40px;
}

.blockButton {
    display: block;
    text-decoration: none !important;
    box-sizing: border-box;
    border: 1px solid #0a3953;
    width:  200px;
    height: 55px;
    text-align:  center;
    font-weight:  500;
    font-size: 120%;
    padding-top: 8px;
    margin-top: 30px;
}

.blockButton strong {
    display: block;
    font-weight: 800;
}

a.whiteBack:link, a.whiteBack:visited {
    background-color: #ffffff;
    color: #0a3953;
}

a.whiteBack:hover {
    color: #ffffff;
    background-color: #0a3953;
}

.whiteBack {
    background-color: #ffffff;
    color: #0a3953;
}

.blueBack {
    background-color: #0a3953;
    color: #ffffff;
    font-size:  80%;
    line-height:  140%;
}

.transWhiteBack {
    background-color: #ffffffde;
    color: #0a3953;
}

.transBlueBack {
    background-color: #0a3953e0;
    color: #ffffff;
}

.centerButton {
    margin: auto;
}

.pushDownButton {
    
}

.centreIt {
    text-align: center;
}

.narrowColumn {
    
}

.imageGrid {

}

:root {
    --column-unit: 86px; /* Base width of a single column */
    --gap: 40px;         /* Space between columns */
    --inner-width: 1594px; /* Total width for fourteen columns */
}

.columnContainer {
    display: flex;
    gap: var(--gap); /* Space between columns */
    box-sizing: border-box;
}

.columnContainer > * {
    box-sizing: border-box;
}

.leftColumn {
    width: 300px;
    flex-shrink: 0;
}

.leftColumn  img {
    width: 100%;
    height: auto;
}

.leftColumn h2 {
    color: #e2b875;
    font-family: "Lancelot", serif;
    font-weight: 500;
    font-size:  250%;
    border-bottom: 5px solid #01324d;
    display: inline-block;
}

.rightColumn {
    flex: 1;
    padding-top: 55px;
}

.innerRightColumn {

}

.centraliseThings {
padding-right: 340px;
}

.killThatMargin {
padding-top: 0px !important;
}

.innerRightColumn li {
    margin-bottom: 20px
}

.innerRightColumn li  strong {
    color: #e2b875;
}

.allSpaceColumn {
    justify-content: space-between !important;
    gap: 0 !important;
}

.rightAlign{
    text-align: right;
}

.heroLinkContainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* Five equal columns */
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.spacer {
    position: relative;
}

a.heroLink:link, a.heroLink:visited  {
    display: block;
    width: 100%;
    height: 290px;
    box-sizing: border-box;
    padding: 20px;
    padding-right: 0px;
    border-left: 1px solid #000000;
    border-top: 1px solid #000000;
    margin-bottom: 20px;
    text-decoration: none;
}

.heroLink .serviceImage {

}

.heroLink .serviceImage img {
width: 100%;
    height: auto;
}

.heroLink h3 {
color: #01324d;
    transition: color 0.4s, top 0.4s;
    position: relative;
    top: 0px;
}

.heroLink:hover h3 {
color: #557eae;
    top: -5px;
}


.teamGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  /* max-width: 1200px; */
  margin: 0 auto;
  margin-bottom: 40px;
}

.blueBox {
  background-color: #557eae;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
}

.blueBox img {
  width: 110px;
  height: 130px;
  object-fit: cover;
  /* border-radius: 50%; */
  margin-right: 15px;
  flex:0;
}

.blueBox .text {
    flex:1;
}

.blueBox .text h4,
.blueBox .text h5 {
  margin: 0;
  line-height: 1.2;
}

.blueBox .text h5 {
  font-weight: normal;
  font-size: 0.9em;
}

form {
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #ccc;
  max-width: 700px;
  margin: 0 auto 40px auto;
}

.inputRow {
  margin-bottom: 20px;
}

.inputRow label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

.textInput {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  background: #fff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
}

.textInput:focus {
  border-color: #557eae;
  outline: none;
  box-shadow: 0 0 5px rgba(85, 126, 174, 0.5);
}

.fullWidthInput {
  width: 100%;
}

.submitRow {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  align-items: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  background-color: #557eae;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background-color: #3f648e;
}

.fbcancel {
  background-color: #aaa;
}

.fbcancel:hover {
  background-color: #888;
}

.caseStudyItem {
    border: 1px solid #ddad5f;
    margin-bottom: 30px;
    padding: 40px;
    gap: 70px !important;
}

.caseStudyImage {
    width: 42%;
    flex-shrink: 0;
}

.caseStudyImage img {
    width: 100%;
    height: auto;
}

.caseStudyText {}

.contactHero {
    flex: 1;
}

.contactHero p {
height: 200px;
}

.contactHero iframe {
  border: 0px;
  width: calc(100% - 20px);
  margin-right: 20px;
}

.rightAlign iframe {
  border: 0px;
  width: calc(100% - 20px);
  margin-left: 20px;
  margin-right: 0px;
}


@media screen and (max-width: 1400px) {
   body {
font-size: 100%;
}

#mainNav ul {gap: 40px;}

.longHeroSection {
height: 653px; 
}

#innerHeroSectionImage img {
  width: 1600px; 
}

  .heroLinkContainer {
    grid-template-columns: repeat(3, 1fr); /* Two columns for medium screens */
  }

.spacer {
    position: static ;
}
}

 @media screen and (max-width: 1024px) {
   body {
font-size: 100%;
}

  .heroLinkContainer {
    grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
  }

.spacer {
    position: static ;
}
}

@media screen and (max-width: 440px) {
  .heroLinkContainer {
    grid-template-columns: 1fr; /* Single column for small screens */
  }
}