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

colours:
Blue: #2e4c99 / 46,76,153
Orange: #f18925 / 241,134,40

*/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap');


:root {
  --bs-primary:#2e4c99;
  --bs-primary-rgb:46,76,153;
  --bs-secondary:#f18925;
  --bs-secondary-rgb:241,134,40;
}
/* -- standard colours --*/
.btn-primary { background-color:var(--bs-primary); border-color:var(--bs-primary);}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus { background-color:#2e3a99; border-color:#2e3a99; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-secondary { background-color:var(--bs-secondary); border-color:var(--bs-secondary); text-transform:uppercase; color:#fff;}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { background-color:#f17825; border-color:#f17825; box-shadow:inset 0 0 0 1000px rgba(0,0,0,.1);}
.btn-white { color:#fff; border-color:var(--bs-secondary); background-color:var(--bs-secondary); font-weight:400; padding:0.45rem 0.85rem; }
.btn-white:hover { color:#fff; border-color:#fff; background-color:var(--bs-primary); }
.border-primary { border-color:var(--bs-primary)!important; }
.btn-submit { min-width:150px; }

/* -- backgrounds --*/
.splashbg { background: url("../images/homepagebackground2.jpg") no-repeat center center!important; min-height:50vh; margin-top:0vh; padding-top:12vh; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.6);}
.splashbg h1 { color:#fff; font-size:3rem; }
.splashbgcontact { background: url("../images/contactbackground.jpg") no-repeat center center!important;}
.splashbgproject { background: url("../images/projectsbackground.jpg") no-repeat center center!important; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.7);}
/*.gradientbg { background-image: linear-gradient(135deg, rgba(241,134,40,0.9), rgba(46,76,153,0.9), rgba(46,76,153,0.8), rgba(241,134,40,0.9)); }*/
.gradientbg { background-color: rgba(46,76,153,0.9); }
.contactformbg { background-image: linear-gradient(to right, rgba(255,192,61,0.7), rgba(255,192,61,0.7)); color:#000;}
.contactbg{ color:#fff; background-image: linear-gradient(to right, rgba(33,45,69,0.9), rgba(33,45,69,0.9)), url(https://probeck.co.uk/images/serverroom.jpg); background-repeat: no-repeat; background-size: cover;}
.servicesbg{ color:#fff; background: url("../images/servicesbg.jpg") no-repeat center center!important;background-size: cover!important;}
.website-audit-signup { background: url("../images/website-audit-signup.jpg") no-repeat center center!important;background-size: cover!important; box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);}

/* -- navbar --*/
/*.navbar { background-color:var(--bs-primary); font-weight:600; min-height:10vh;}*/
.navbar { /*background-color:rgba(0,0,0,0);*/background-color:#fff; font-weight:600; border-bottom:rgba(222,222,222,.75) 2px solid;transition: all 0.7s linear;}
.navbar img { margin-top:-30px; width:200px; height:auto; transition: all 0.5s linear; }
.offcanvas { background-color:rgba(0,0,0,0);}
.navbar-toggler {color:#fff; border-color:rgba(255,255,255,.65)!important;border-width:medium;}
.navbar-toggler-icon {background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(241, 134, 40, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>")!important; }
.nav-link, .dropdown-item { color:var(--bs-primary); transition: all 0.5s ease; text-transform: uppercase;}
.nav-link:hover, .nav-link:focus, .scrolled .nav-link:hover, .scrolled .nav-link:focus, .nav-link.active { color:var(--bs-secondary)!important; }
.dropdown-item:hover, .dropdown-item.active { background:none;color:var(--bs-secondary)!important; }
/* -- navbar after scrolling -- */
.scrolled { background-color:#fff;border-bottom:rgba(222,222,222,.75) 2px solid;transition: all 0.5s ease;  }
.scrolled .nav-link { color:var(--bs-primary); transition: color 0.5s ease; }
.scrolled img { /*width:130px;*/border-radius:0.3rem;transition: all 0.5s ease; }
.logonoscroll { display:inline-block!important;transition: color 0.5s ease; }
.logoscroll { display:none!important;transition: color 0.5s ease; }
/*.scrolled .logonoscroll { display:none!important;transition: color 0.5s ease; }
.scrolled .logoscroll { display:inline-block!important;transition: color 0.5s ease; }*/
.info-navbar { height:35px; padding-right:3rem;}
.info-navbar i { color:var(--bs-secondary); }
.info-navbar a { color:var(--bs-primary);text-decoration:none; font-size:14px; }

/* --  -- */
.webcards .card-title { color:var(--bs-primary);font-size:1.75rem;padding:0.5rem;text-align:center;text-transform:uppercase; }
.webcards .linebreak { height:1px;padding:0rem;margin-top:0.5rem;margin-bottom:1.5rem; }
.webcards .weboptions div { padding-bottom:0.5rem;color:var(--bs-primary);font-weight:500; }
.webcards .card-footer { background:none;border-top:none;padding-bottom:1rem }
/*.webcards {background-image: linear-gradient(to right, rgba(var(--bs-secondary-rgb),0.9), rgba(227, 182, 97, 1), rgba(255,192,61,0.8)); }*/
.webcards {  background-color:#888; }

/* -- Policies -- */
#policycontainer { counter-reset:section!important; }
#policycontainer .list-group-item { border:none;  }
#policycontainer .list-group-numbered { counter-reset: none!important; }

/* -- footer --*/
/*.bottombar { background-image: linear-gradient(to right, rgba(var(--bs-secondary-rgb),0.9), rgba(227, 182, 97, 1), rgba(255,192,61,0.8)); min-height: 10vh;  }*/
footer { background-color:#444; min-height: 10vh;  }
.bottombar { color: #fff; }
.bottombar a { color: #fff; text-decoration: none; }
.bottombar a:hover { color: #fff; text-decoration:underline; }
footer h4 { padding-bottom:1rem; border-bottom:1px solid #fff; color:#fff; }
.copyright-banner { color:#fff;border-top:1px solid #fff; }

/* -- typography --*/
h1, h2, .h1, .h2, h3, h4 { text-transform:uppercase; }
h4 { color:var(--bs-primary); }
#formWrapper h4 { margin-bottom:2rem; }
blockquote p { font-size:1rem!important; font-style:italic; }
blockquote span { font-size:1.25rem!important; }

/* -- images --*/
.projectlogo { width:100%;height:auto;max-width:300px; }

/* -- testimonials -- */
.testimonial-wrapper { margin:1rem; background-color:#fff; padding:2rem; box-shadow: 0px 0px 10px #aaa; }
.testimonial-wrapper p { color:#000; font-size:14px; }
.testimonial-wrapper .quote-icon i { font-size:36px; z-index:999; color:var(--bs-secondary) }
#carouselContactUsTestimonials { position:relative; background-color:#f9f9f9; }
#carouselContactUsTestimonials .owl-dots { display:flex; justify-content: center; padding:10px 0px 10px 0px; }
#carouselContactUsTestimonials .owl-dot { background-color:rgba(var(--bs-primary-rgb),0.5);padding:5px; width:10px;height:10px; margin:5px; border-radius:50%; }
#carouselContactUsTestimonials .owl-dot.active { background-color:var(--bs-primary); }
#carouselContactUsTestimonials .quote-icon i { color:var(--bs-primary)!important }
#carouselContactUsTestimonials .owl-stage { display:flex; }
#carouselContactUsTestimonials .owl-item { margin-top:auto;margin-bottom:auto; }

/* -- Case Study -- */
.case-study-card h3 { color:var(--bs-secondary); }
.case-study-card a { text-decoration: none;color:var(--bs-body-color); }
.case-study-logo { height: 150px; display:flex; border-bottom:1px solid var(--bs-primary); padding-bottom:0.5rem; margin-bottom:1rem;  }
.case-study-logo img { max-height:100%; }
.case-study-title { height:110px; width:100%; }
.case-study-brief { height:75px; width:100%; margin-top:auto; }
.case-study-brief p { margin-bottom:0px; }
.case-study h2 { color:var(--bs-secondary); }
.case-study-border { border-right:1px solid var(--bs-primary) }
.sub-heading-title strong { color:var(--bs-primary) }
.case-study-details h2 { margin-top:2.5rem; }

/* -- dividers --*/
.linebreak { width:80%; margin:auto; background-color:var(--bs-primary); height:2px;}
hr:not([size]) { height:2px; }

/*-- contact us form --*/
#contactformbox { font-weight:700;}
#contactformbox form { max-width:600px;margin-left:auto;margin-right:auto; }
.form-label { color:var(--bs-primary); margin-bottom:0.3rem; font-weight:700; /*color:rgba(33,45,69,1.0);*/ }
#contactformbox h2 {color:var(--bs-secondary)}
#contactformbox i { color:var(--bs-secondary); }
#contactformbox a { text-decoration: none; color:var(--bs-primary) }

/* -- standard cards -- */
.info-cards i { font-size:4.5rem; color:var(--bs-secondary); }
.info-cards h3 { color:#fff; font-weight:700; margin-top:1.5rem; margin-bottom:1.5rem; }
.info-cards li { color:#fff; }
.info-cards .icon-wrapper { text-align: center; margin-bottom:1rem; }
.info-cards li { line-height:2; }

/*-- forms --*/
.form-group { margin-bottom: 20px; }

/*-- default options --*/
.lift { transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);}
.lift:hover { transform: translateY(-0.3333333333rem);box-shadow: 0 0.5rem 2rem 0 rgba(33, 40, 50, 0.25);}
.lift:active { transform: none;box-shadow: 0 0.15rem 1.75rem 0 rgba(33, 40, 50, 0.15);}

.powered-by { display:none!important; }

/* The actual timeline (the vertical ruler) */
.main-timeline { position: relative; }

/* The actual timeline (the vertical ruler) */
.main-timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  background-color: #939597;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

.timeline h3 { color:var(--bs-secondary); }

/* Container around content */
.timeline { position: relative; background-color: inherit; width: 50%; }

/* The circles on the timeline */
.timeline::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -13px;
  background-color: #939597;
  border: 5px solid var(--bs-secondary);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left { padding: 0px 40px 20px 0px; left: 0; }

/* Place the container to the right */
.right { padding: 0px 0px 20px 40px; left: 50%; }

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after { left: -12px; }

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after { left: 18px; }
  .left::before { right: auto; }

  /* Make all right containers behave like the left ones */
  .right { left: 0%; }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  .navbar {padding-left:10px;padding-right:10px;}
  .splashbg { min-height:60vh; }
  .splashbgcontact {  padding-top:20vh!important }
  .contact-btn { width:100%; }
  .navbar img { width:130px; margin-top:0px; }
  .info-navbar { padding-right:1.5rem;}
  .case-study img { width:100%!important; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  .g-recaptcha {transform: scale(0.9); -webkit-transform: scale(0.9); transform-origin: 0 0; -webkit-transform-origin: 0 0;/* max-width:100%;*/}
  .g-recaptcha > div, .g-recaptcha iframe { /*max-width:100%!important;width:100%!important;*/ }
  .offcanvas { --bs-bg-opacity: 1; background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity))!important;}
  .navbar { /*border-bottom:none*/ }
  .splashbg { /*min-height:110vh; margin-top:-20vh;*/ }
  .splashbgcontact {  padding-top:20vh!important }
  #contactformbox { }
  .case-study-border { border-bottom:1px solid var(--bs-primary);border-right:none; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  .splashbg { /*min-height:110vh; margin-top:-20vh;*/ }
  .splashbg h1 { font-size:calc(1.5rem + 1.0vw);  }
  .splashbgcontact {  padding-top:20vh!important }
  .case-study-title { height:110px!important; }
  .btn-submit { width:100%; }

}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .case-study-title { height:140px;}
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {

}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width