/*

Theme Name: Layer 4 2024 Theme
  Author: Roodee Creative
Version: 1.8

*/

/* loading site font */

@import url("//hello.myfonts.net/count/37af17");

@font-face {font-family: 'Gilroy-SemiBold';src: url('webfonts/37AF17_0_0.eot');src: url('webfonts/37AF17_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/37AF17_0_0.woff2') format('woff2'),url('webfonts/37AF17_0_0.woff') format('woff'),url('webfonts/37AF17_0_0.ttf') format('truetype');

}

@font-face {font-family: 'Gilroy-Regular';src: url('webfonts/37AF17_1_0.eot');src: url('webfonts/37AF17_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/37AF17_1_0.woff2') format('woff2'),url('webfonts/37AF17_1_0.woff') format('woff'),url('webfonts/37AF17_1_0.ttf') format('truetype');

}

@font-face {font-family: 'Gilroy-Medium';src: url('webfonts/37AF17_2_0.eot');src: url('webfonts/37AF17_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/37AF17_2_0.woff2') format('woff2'),url('webfonts/37AF17_2_0.woff') format('woff'),url('webfonts/37AF17_2_0.ttf') format('truetype');

}
html { scroll-behavior: smooth; }

body {
  margin: 0 auto;
  box-sizing: border-box;
   font-family: 'Gilroy-Regular', Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-size: 18px;
  line-height: 28px;
}

h2, h3,
h4, h5, h6 {
  font-weight: 600;
}

h1 {
  font-weight: 100;
  font-size: 48px;
  line-height: 58px;
  color: #2484d5;
}

h2 {
  font-size: 40px;
  padding-top: 15px;
}

span {
  color: #2484d5;
}

span-blue {
  color: #0c528d;
}

h3 {
  font-size: 28px;
  line-height: 38px;

}

h4 {
  font-size: 24px;
  line-height: 34px;
}

p {
  margin: 10px 0px 20px 0px;
}

ul {
	margin: 0px 0px 20px 0px;
}

ul li {margin-bottom: 15px; }


a, a:visited {
  text-decoration: none;
  color: #0c528d;
  transition: all .2s ease-in-out;
}

a:hover {
  color: #0c528d;
}

.red {color: #0c528d !important;}
.green-line {border-bottom: thick solid#0c528d; margin: 40px 0px 0px 0px;}
.green-vertical-line  {border-left: thick solid #0c528d;}
.green {color: #0c528d;}
strong {font-weight: 800;}
.intro {font-size: 21px; line-height: 28px;font-weight: 800;}
.asterix-text {font-size: 12px; line-height: 18px; padding: 15px 0px;}
.circle {max-width: 200px; height: auto; width: 100%;}
.no-space {margin-bottom: -50px;;}


address {font-style: normal !important;}
blockquote {
    position: relative;
    margin: 0.5em;
    padding: 0.5em 2em 0.5em 3em;
}

blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 6em;
    line-height: 1;
    top: 0;
    left: 0;
    content: "\201C";
	color: #0c528d;
}
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    float:right;
    font-size:6em;
    line-height: 1;
    right:0;
    bottom:-0.5em;
    content: "\201D";
	color: #0c528d;
}
blockquote footer {
    padding: 0 2em 0 0;
    text-align:right;
}
blockquote cite:before {
    content: "\2013";
}
img {
  max-width: 100%;
  height: auto;
}

.img-md {display: block;
  max-width: 50%;
  height: auto;
	margin: 0px auto !important;
}

.no-visual-search { pointer-events: none;}


.btn {
  display: inline-block;
  padding: 5px 30px;
  text-decoration: none;
  transition: all .2s ease-in-out;
}

.btn-white {
  border: 1px solid #ffffff;
  color:  #0c528d !important;
  background: #ffffff;
  float: right;
}

.btn-white:hover {
  border: 1px solid #0c528d;
  color:  #ffffff!important;
  background:  #0c528d;
}

.btn-blue{
  color: #1d0d40 !important;
  background: #fff;
}

.btn-blue:hover {
  color: #fff !important;
  background: #0c528d;
}

.btn-green{
  border: 1px solid #0c528d;
  color: #fff !important;
  background: #0c528d;
}

.btn-cgreen:hover {
    border: 1px solid #0c528df;
  color: #0c528d !important;
  background: #fff;
}

.btn-primary {

  color: #0c528d;

  border: 1px solid #0c528d;

}



.btn-primary:hover {

  background: #0c528d;

  color: #fff;

}



.text-brand {

  color: #0c528d;

}

.outlined {border: #dedede solid 1px; padding: 40px;}
.testimonial strong {color: #2484d5;}
.centred-image {display: block; margin: 0px auto !important; max-width: 400px; width: 30%; height: auto;}
.centred-text {text-align: center !important;}

/* Site Header */
.blue-band {display: block;width: 100%; height: 20px; background: #0c528d;}


#site-header {
  padding: 20px 0;
  font-size: 16px;
  position: sticky;
  z-index: 999;
}

#site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center !important;
}

#site-header img {max-width: 300px; height: auto;
}
.search p {color: #000;}

.logo {max-height: 200px; width: auto;}
.tagline {max-width: 200px !important; height: auto;}

nav {width: 10%; }

nav a:first-child {
  color: #000;
  text-decoration: none;
  margin-right: 20px;
}

nav a:first-child:hover {
  text-decoration: none;
}

.nav .nav-tel {
  display: inline-block;
}

.nav-tel svg {
  display: inline-block;
  vertical-align: middle;
}

.nav .nav-tel-m {
  display: inline-block;
}

.nav-tel-m svg {
  display: inline-block;
  vertical-align: middle;
}

.nav .nav-tel:hover {
  color:  #0c528d;
  fill:  #0c528d;
}

.nav-switch {
  fill: #000;
  cursor: pointer;
}

.tel {font-size: 18px; font-weight: 800;}
.tel a, .tel-mobile a {color: #1d0d40 !important; text-decoration: none !important;}
.remote-support  {display: inline-block; padding: 5px 10px; font-size: 17px; font-weight: 800; background: #1d0d40;}
.remote-support a {color: #fff !important; text-decoration: none;}
.tel-mobile {display: none;}
.small-email {font-size: 10px !important;}
#door-nav {
  background: #0c528d;
  display: flex;
  justify-content: center;
}

#door-nav ul {
  display: flex;
  list-style: none;
  width: 70%; /* Ensure ul takes up the full width of the parent */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  justify-content: space-between; /* Distribute items evenly */
}

#door-nav ul li {
  font-size: 12px; line-height: 15px;
}

#door-nav ul li a {
  color: #fff;
  text-decoration: none !important;
}

/* site nav */


.google-sm {max-width: 200px; margin-top: -100px !important;}
.social-icons a {

  margin-right: 10px;

  fill: #222;

  transition: fill .2s ease-in-out;

}



.social-icons a:hover {

  fill: #0c528d;;

}



.nav-sidebar {background: #ececec; padding: 30px 0px; }
.nav-sidebar ul li a {color: #0c528d;}



/* site slider */

#site-slider {



}

.slide-item {
  min-height: 70vh;
}

.slide-content {
  height: 90vh;
  width: 100%;
  background: rgba(0, 0, 0, .25);
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.slide-content h2 {
  font-size: 60px;
  color: #fff;
  line-height: 58px;
  font-weight: 600;
}

.slide-content h3 {
font-size: 35px;
  color: #fff;
	margin-bottom: 30px;
}

.slide-content p {
font-size: 20px;
  color: #fff;
}

.slide-content p a {
  color: #fff;
	text-decoration: underline;
}

.slide-content ul {margin-bottom: 30px;}
.slide-content ul li {font-size: 20px; color: #fff;}
.slide-content ul li a {color: #fff; text-decoration: none;}

.slide-one {
  background: url(https://www.layer4.co.uk/wp-content/uploads/2024/11/layer-4-touching-tablet.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



.tick-bullet {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
}

.tick-bullet li {
  position: relative; /* Allows positioning of the image */
  padding-left: 50px; /* Add space for the image */
  margin-bottom: 10px; /* Optional: Add some spacing between list items */
}

.tick-bullet li::before {
  content: url('https://www.layer4.co.uk/wp-content/uploads/2024/11/tick.png');
  position: absolute;
  left: 0;
  top: 0;
  width: 16px; /* Optional: Resize the image */
  height: 16px; /* Optional: Resize the image */
}

.btn-arrow {
  display: inline-flex; /* Flexbox to align text and arrow */
  align-items: center; /* Center vertically */
  text-decoration: none; /* Remove underline from the link */
  font-size: 16px; /* Adjust font size */
  font-weight: bold; /* Make text bold */
  color: #1d0d40 !important; /* Text color */
	background: #fff;
		padding: 0px 0px 0px 30px;;
}

.btn-arrow a:link {
  color: #1d0d40 !important; /* Text color */
}

.btn-arrow::after {
  content: '→'; /* Arrow symbol */
  display: inline-block;
  background-color: #d1dce5; /* Blue background for the arrow */
  color: #1d0d40; /* White arrow color */
  padding: 10px 20px; /* Padding for the arrow box */
  font-size: 18px; /* Adjust arrow size */
  text-align: center; /* Center arrow text */
	margin-left: 30px;
}

.btn-arrow-white {
  display: inline-flex; /* Flexbox to align text and arrow */
  align-items: center; /* Center vertically */
  text-decoration: none; /* Remove underline from the link */
  font-size: 16px; /* Adjust font size */
  font-weight: bold; /* Make text bold */
  color: #1d0d40; /* Text color */
	background: #fff;
		padding: 0px 0px 0px 30px;
	border: solid 1px #cfcfcf;
}

.btn-arrow-white a {
  color: #1d0d40 !important; /* Text color */
}

.btn-arrow-white::after {
  content: '→'; /* Arrow symbol */
  display: inline-block;
  background-color: #d1dce5; /* Blue background for the arrow */
  color: #1d0d40; /* White arrow color */
  padding: 10px 20px; /* Padding for the arrow box */
  font-size: 18px; /* Adjust arrow size */
  text-align: center; /* Center arrow text */
	margin-left: 30px;
}

.header-reviews {width: 150px; height:auto; margin: 30px auto 0px auto;}
#google-reviews {display: block; margin: 30px 0px; padding: 30px 0px; border-top: solid 1px #e9e9e9;}
#google-reviews strong{color: #1a73e8; font-weight: bold;}
.google-stars-small {display: block; width: 100px !important; height: auto;}
.review-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.reviewer-image {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  margin-top: 4px;
}


hr {margin: 60px 0px;}

.pre-cta-text {font-weight: bold; font-size: 20px; margin-top: 30px;}
.parent {
            display: flex;
            justify-content: flex-end; /* Align child div to the right */
            align-items: center;
            height: 100vh; /* Adjust height as needed */
            background-image: url('/wp-content/uploads/2024/11/happy-young-businessman-sitting-by-the-desk-2023-11-27-04-54-41-utc.jpg'); /* Replace with your image URL */
            background-size: cover;
            background-position: center;
            position: relative;
        }

.parent::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2); /* Adjust opacity to darken */
            z-index: 1; /* Ensure it sits behind the child */
        }


        /* Child div (without background image) */
        .child {
            width: 50%; /* 1/3 of the parent */
            height: 100%; /* Set height as needed */
			padding: 0 10%;
            position: relative;
            display: flex;
			flex-direction: column;
            align-items: center;
            justify-content: center;
			z-index: 2;
			text-align: center;
        }

        /* Overlay text */
        .child h2 {
            color: white;
            font-size: 34px;
			line-height: 38px;
            text-shadow: 0px 0px 14px rgba(0, 0, 0, 0.5); /* Optional shadow */
        }
 .child p {
            color: white;
            text-shadow: 0px 0px 14px rgba(0, 0, 0, 0.5); /* Optional shadow */
        }

.purple-block {
    background: #1d0d40;
    color: #fff;
    padding: 30px;
    margin: 40px 0px;
    display: flex; /* Enable Flexbox */
    align-items: center; /* Vertically align content */
    gap: 20px; /* Space between image and text */
}

.purple-block img {
    max-width: 300px; /* Image's maximum width */
    width: 100%; /* Ensures responsiveness */
    flex: 0 1 33%; /* Restricts image to at most 1/3 of the container */
    height: auto; /* Maintain aspect ratio */
}

.purple-text {
    flex: 1; /* Allow text content to take the remaining width */
    line-height: 1.5; /* Optional: Improve text readability */
}

.blog {width: 65%; }
.blog h3 {text-transform: uppercase; color: #1d0d40; border-bottom: solid 2px #1d0d40; margin: 40px 0px 20px 0px; display: inline-block; }

/* General styling for the new section */
#new-feature-section {
  margin: -1px 0px 0px 0px; /* Adjust spacing above and below as needed */
}

#new-feature-section .no-gutters {
  margin-right: 0;
  margin-left: 0;
}

#new-feature-section .feature-image {
  position: relative;
  overflow: hidden; /* Ensures the image doesn't overflow its container */
}

#new-feature-section .feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image fills the container without distortion */
  object-position: center; /* Keeps the image centered */
}

#new-feature-section .feature-content {
  background-color: #1d0d40; /* Purple background */
  color: #fff; /* White text */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 30px;
  min-height: 100%; /* Matches the image height */
}

#new-feature-section .feature-content .content-wrapper {
  max-width: 90%; /* Align with other text on the page */
  margin: 0 auto;
  text-align: left;
}

#new-feature-section .feature-content h4 {
  font-size: 1.8rem;
  margin-bottom: 20px;
	border-bottom: 3px solid #fff;
	display: inline-block;
	padding-bottom: 10px;
}

#new-feature-section .feature-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

#new-feature-section .btn.btn-white {
  background-color: #fff;
  color: #6A1B9A;
  padding: 10px 20px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: bold;
  text-decoration: none;
}

#new-feature-section .btn.btn-white:hover {
  background-color: #d1c4e9;
  color: #4A0072;
  text-decoration: none;
}

/* Blue Feature Section */
#blue-feature-section .blue-background {
  background-color: #4b6a99; /* Blue background */
  color: #fff; /* White text */
  padding: 60px 0;
}

#blue-feature-section .section-heading {
display:inline-block;
	font-size: 2rem;
	padding-bottom: 10px;
border-bottom: 3px solid #fff;
  color: #fff;
  margin-bottom: 40px;
  position: relative;
}

#blue-feature-section .feature-image-wrapper {
  display: flex;
  margin-bottom: 20px;
}

#blue-feature-section .image-container {
  position: relative;
  width: 80%; /* Image takes 15% width */
  border-radius: 15px;
  overflow: hidden;
}

#blue-feature-section .image-container img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}


#blue-feature-section .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#blue-feature-section .image-overlay .contact-text {
  position: absolute;
  bottom: 10px; /* Position at the bottom */
  left: 10px; /* Position at the left */
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
}

#blue-feature-section .image-overlay .arrow-icon {
  position: absolute;
  top: 10px; /* Position at the top */
  right: 10px; /* Position at the right */
  font-size: 1.7rem;
  color: #fff;
}

#blue-feature-section .feature-text {
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
}

#blue-feature-section .feature-text p {
  margin: 0;
}


/* White Feature Section */
#white-feature-section  {
  background-color: #fff; /* white background */
  color: #000; /* Black text */
  padding: 60px 0;
}

#white-feature-section .section-heading {
display:inline-block;
	font-size: 2rem;
	padding-bottom: 10px;
border-bottom: 3px solid #1d0d40;
  color: #1d0d40;
  margin-bottom: 40px;
  position: relative;
}

#white-feature-section h4 {color: #1d0d40;}



/* Grey Feature Section */
#grey-feature-section  {
  background-color: #e3e3e3; /* white background */
  color: #000; /* Black text */
  padding: 60px 0;
}

#grey-feature-section .section-heading {
display:inline-block;
	font-size: 2rem;
	padding-bottom: 10px;
border-bottom: 3px solid #1d0d40;
  color: #1d0d40;
  margin-bottom: 40px;
  position: relative;
}

#grey-feature-section h4 {color: #1d0d40;}

.brands {margin: 30px 5%; width: 90%; height: auto; }



/* Full-width background with keyboard image */
#our-services .services-background {
  background-image: url('https://via.placeholder.com/1920x600'); /* Keyboard image */
  background-size: cover;
  background-position: center;
  padding: 80px 0;
}

#our-services .services-heading {
  text-align: center;
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 40px;
  text-decoration: underline;
}

#our-services .service-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

#our-services .service-icon {
  text-align: center;
}

#our-services .service-icon img {
  width: 80px; /* Icon size */
  height: 80px;
  border-radius: 50%;
  border: 1px solid #fff; /* White border around the icons */
  padding: 15px; /* Space between the icon and the border */
}

#our-services .service-icon h4 {
  font-size: 1rem;
  color: #fff;
  margin-top: 10px;
}

#our-services .service-icon a {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff; /* Underline effect */
}

#our-services .service-icon a:hover {
  color: #ccc; /* Change color on hover */
  border-bottom-color: #ccc;
}




.letterbox-feature {
  min-height: 70vh;
}

.letterbox-feature-content {
	height: 100vh;
padding: 50px 0px;
  background: rgba(0, 0, 0, .25);
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.letterbox-feature-content h2 {
  font-size: 50px;
  color: #fff;
  line-height: 58px;
  font-weight: 600;
}

.letterbox-feature-content h3 {
font-size: 25px;
  color: #fff;
	margin-bottom: 30px;
}

.letterbox-feature-content p {
font-size: 20px;
  color: #fff;
}

.letterbox-feature-content p a {
  color: #fff;
	text-decoration: underline;
}

.letterbox-feature-content .container {display: inline-block; width: 40%; height: auto; }

#brand-banner {

  background: url(../classic/img/header-bg.jpg) no-repeat center center;

  background-size: cover;

  padding: 20px 0;

  text-align: center;

}



#brand-banner h4,

#brand-banner p {

  color: #fff;

}



#brand-banner .btn {

  margin-top: 20px;

}



#page-intro {
  padding: 60px 0;
}
.vertical-align-middle {
vertical-align: middle;
}

/* content styles */

#blue-banner {
  background: url('https://www.layer4.co.uk/wp-content/uploads/2024/11/keyboard-blur.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color: #fff;
	vertical-align: top;
}

#blue-banner h1, #blue-banner h2, #blue-banner h3, #blue-banner p, #blue-banner p a, #blue-banner ul, #blue-banner ul li, #blue-banner ul li a { color: #fff !important;}
#blue-banner h3 {font-size: 20px !important; margin-bottom: -15px;}
#blue-banner .cta {background: #63a71b; border: 1px #63a71b solid; padding: 5px 20px; border-radius: 10px; margin-bottom: 30px; }
#blue-banner .cta:hover {background: none; border: 1px #fff solid;}



#pink-banner {
  background-color: #2484d5 !important;
  color: #fff;
}

#pink-banner h1, #pink-banner h2, #pink-banner h3, #pink-banner p, #pink-banner p a, #pink-banner ul, #pink-banner ul li, #pink-banner ul li a { color: #fff !important;}

#white-banner {
  background-color: #fff !important;
}

#white-banner img {width: auto; height: 100px;}

#about-banner {
  background-color: #eaeaea !important;
  background: url(../classic/img/about.jpg) no-repeat;
  background-position: right;
}

#service-banner {
  background: url(../classic/img/services.jpg) no-repeat;
  background-position: left;
}

.site-banner {
  padding: 60px 0px !important;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.site-banner .row {
  align-items: flex-start;
}

.site-banner:nth-child(even) {
  background: #eaeaea;
}

.site-banner ul {margin-bottom: 20px;}

.align-top {vertical-align: top !important;}

.small-banner {
  padding: 30px 0;
  min-height: 250px;
  display: flex;
  align-items: center;
}

.feature-banner {
  background: #222;
  color: #fff;
  padding: 30px;
}

.feature-banner ul {margin-bottom: 20px; }

.feature-banner .row {
  align-items: center;
}

.feature-banner h3 {
  margin-bottom: 30px;
}

.feature-banner li {
  margin-bottom: 30px;
}

.rounded {border-radius: 0px 50px;}
.padding-vertical {margin: 30px 0px 30px 0px;}

.service-cards-row {overflow: hidden; width: 100%; height: auto;}
.service-cards {margin-top: -1em;}
.service-cards img {width: 100%; height: auto;}

.row-no-gap {margin-top: -60px !important; }
.row-pad {padding-bottom: 50px !important;}
.bottom-pad-20 {padding-bottom: 20px;}
.row-pad-top {margin-top: 30px !important;}
.full-size {width: 100% !important; height: auto !important;}
.full-size img {width: 100% !important; height: auto !important;}
.small {width: 135px !important; height: auto !important;}
.small img {width: 100%; height: auto !important;}
.take-control-call-out {background: #0c528d; color: #fff; display: inline-block; padding: 30px; }

.vertical-align-centre {/* Use a flexbox layout */
	display: flex;
	
	/* Make a horizontal flexbox (the default) */
	flex-direction: row;
	
	/* The important part: vertically center the items */
	align-items: center;}

/* =Tables
-------------------------------------------------------------- */
table {display: block;width: 100%;height: auto;background: #dedede;margin: 0px 0px 30px 0px;font-size: 0.8em;}
tr {margin: 0px 0px 10px 0px;}
th {height: 20px;padding: 5px;background: #0eacac;font-weight: bold;color: #fff;}
td {height: 20px;padding: 5px;width: auto;}

.table-container {display:table;width:98%;border-collapse: collapse;border-spacing: 0px;margin-bottom: 40px !important;clear: both;}
.table-heading {font-weight: bold;display:table-row;font-size: 1.1em !important;color: #fff;background: #666666;}
.table-row {display:table-row;}
.col {display:table-cell;border: 1px solid #666666;font-size: 0.8em !important;padding: 10px;}
table td {display: table-cell;vertical-align: middle;}
.tabular-table-heading {font-weight: bold;}
.table-row a {text-decoration: none;color: #0c528d;}
.table-row a:hover {text-decoration: underline;}

.outline {border: 1px solid #dedede; padding: 20px;}

/* articles */

#articles {

  padding: 30px 0;

  background: #eaeaea;

}



#articles a {

  text-decoration: none;

  color: #222;

  transition: all .2s ease-in-out;

}



#articles a:hover {

  color: #374b1e;

}



#articles img {

  transition: all .2s ease-in-out;

}



#articles a:hover img {

  filter: grayscale(100);

}



#articles h2 {

  font-size: 32px;

  margin-bottom: 30px;

}



.post-card {

  box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);

}



.post-card figcaption {

  padding: 30px;

  margin-top: -1em;

  background: #fff;

  text-decoration: none;

  font-weight: 600;

  font-size: 18px;

}

.left {display: inline-block; width: 45% !important; height: auto; margin: 0px 8% 0px 0px; padding: 0px; vertical-align: text-top; }
.right {display: inline-block; width: 45% !important; height: auto; margin: 0px; padding: 0px; vertical-align: text-top; }
.grey-block {display: block; width: 100%; height: auto; padding: 20px 5%; background: #efefef;}
.turquoise {color: #11aec7 !important;}
.orange {color: #f59e25 !important;}
.statistic {font-size: 3em !important; margin: 10px 0px 0px 0px;}



.news-header {margin-top: 50px;}
.news {margin: 50px 0px 0px 0px; }
.news h3 a {text-decoration: none;}
.news img {width: 100%; height: auto; margin: 0px !important; padding: 0px !important;}
.news-item {
  display: flex;
  align-items: center;
  margin: 0px auto 30px auto;
	width: 80%;
}
.news .r-arrow, .news .l-arrow {
  fill: #656565;
  cursor: pointer;
  position: absolute;

  z-index: 300;
  transition: all .2s ease-in-out;
  width: 32px;
  height: 32px;
}

.news .l-arrow {
  left: 50px;
  top: 35%;
}

.news .r-arrow {
  right: 60px;
  top: 35%;
}

.news .r-arrow:hover {
  transform: translateX(10px);
}

.news .l-arrow:hover {
  transform: translateX(-10px);
}



/* site footer */

#site-footer {
  padding: 130px 0px 30px 0px;
  background: #1d0d40;
  color: #fff;
}
.footer-logo {margin-bottom: 15px; width: 250px; height: auto;}
.opacity-reduced {opacity: 0.5;}

#site-footer a {
  text-decoration: none;
  color: #fff;
  transition: all .2s ease-in-out;
}

#site-footer h3 {
  margin-bottom: 10px;
	 font-size: 17px;
}

#site-footer ul {
  list-style: none;
}

#site-footer ul li {
  font-size: 15px;
	line-height: 25px;
	margin: 0px;
	padding: 0px;
}
#ul li:nth-child(5){
  margin-top:100px;
}

#site-footer p{
  font-size: 15px;
	line-height: 25px;
}

#site-footer a:hover, #site-footer ul li a:hover {color: #0c528d; text-decoration: hover;}

#site-footer .social-icons svg {
  fill: #fff;
  transition: all .2s ease-in-out;
  margin-top: 0px;
}

#site-footer .social-icons svg:hover {
  fill: #fff;
}
#site-footer h4 {font-size: 16px; font-weight: bolder !important; text-transform: uppercase;}
.footer-links {text-align: center; border-top: #dedede solid 1px; margin-top: 20px; padding-top: 30px;}


/* page styles */
#page-header {
 background: url('https://www.layer4.co.uk/wp-content/uploads/2024/11/keyboard-blur.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 30px 0px;
 text-align: center;
}

#page-header h1 {color: #fff !important; padding: 0px 0px 10px 0px !important;}

#page-header ul {
  display: flex;
  list-style: none;
  width: 100%; /* Ensure ul takes up the full width of the parent */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  justify-content: space-between; /* Distribute items evenly */
}

#page-header ul li {
  color: #fff;
	content: "\2713";
}

#page-header p {
  color: #fff;
}

/* Styling for the unordered list */
#page-header .tick-bullet {
    list-style: none; /* Removes default bullet points */
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    padding: 0;
    margin: 0;
    gap: 20px; /* Adds spacing between list items */
}

/* Styling for individual list items */
#page-header .tick-bullet li {
    display: inline-flex; /* Ensures text and image are on the same line */
    align-items: center; /* Aligns text with the tick image */
    margin: 0px 0; /* Adds vertical spacing between lines */
    white-space: nowrap; /* Prevents line breaks within text */
}

/* Adding the tick image */
#page-header .tick-bullet li::before {
    content: url("https://www.layer4.co.uk/wp-content/uploads/2024/11/tick.png");
    display: inline-block;
    margin-right: 8px; /* Spacing between the image and text */
}
#page-main {
  padding: 50px 0;
}

#page-main .row {
  margin-bottom: 60px;
}

#page-main h2 {
  font-size: 24px !important;
  line-height: 34px !important;
}

#page-main img {
  margin: 0 auto;
}

#page-main ul {

  margin-left: 20px;
margin-bottom: 20px;
}

#page-main li {
  margin-bottom: 0px;
}

.team-photo {
  transition: transform 0.3s ease;
}

.team-photo:hover {
  transform: scale(1.05);
}

.linkedin-icon svg {
  transition: transform 0.3s ease;
}

.linkedin-icon:hover svg {
  transform: scale(1.2);
}

.purple {background: #1d0d40; color: #fff;}
.purple h2 {
	text-transform: uppercase;
display:inline-block;
	font-size: 2rem;
	padding-bottom: 20px;
border-bottom: 3px solid #fff;
  color: #fff;
  margin-bottom: 20px;
}
.purple a {color: #fff;}

#posts {
  padding: 30px 0;
}

#posts a {
  text-decoration: none;
  color: #222;
  transition: all .2s ease-in-out;
}

#posts a:hover {
  color: #374b1e;
}

#posts img {
  transition: all .2s ease-in-out;
}

#posts a:hover img {
  filter: grayscale(100);
}

#posts h2 {

  font-size: 32px;

  margin-bottom: 30px;

}



#posts .post-card {

  margin-bottom: 30px;

}



#posts .post-card figcaption {

  padding: 30px;

  margin-top: -1em;

  background: #fff;

  text-decoration: none;

  font-weight: 600;

  font-size: 18px;

}



.sidebar li {

  list-style: none;

}



/* contact page */






.contact-form {border: 1px solid #fff; padding: 30px;}
.contact-form a {color: #fff !important;}
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 5px 0;
  margin: 5px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  border: none;
  outline: none;
  color: rgba(17, 18, 18, 1);
  border-bottom: 2px solid rgba(17, 18, 18, 0.1);
  transition: all .2s ease;
  resize: none;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-bottom: 1px solid #5f8acc;
}

.contact-form .wpcf7-textarea {
  height: 100px!important;
}


.careers-form {border: 1px solid #1d0d40; padding: 30px; margin-top: 40px;}
.careers-form h3 {margin-bottom: 20px;}
.careers-form a {color: #1d0d40 !important;}
.careers-form input[type="text"],
.careers-form input[type="tel"],
.careers-form input[type="email"],
.careers-form textarea {
  width: 100%;
  padding: 5px 0;
  margin: 5px 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
  border: none;
  outline: none;
  color: rgba(17, 18, 18, 1);
  border-bottom: 2px solid #1d0d40;
  transition: all .2s ease;
  resize: none;
}

.careers-form input[type="text"]:focus,
.careers-form input[type="tel"]:focus,
.careers-form input[type="email"]:focus,
.careers-form textarea:focus {
  border-bottom: 1px solid #1d0d40;
}

.careers-form .wpcf7-textarea {
  height: 100px!important;
}

.careers-form .wpcf7-submit {
  display: inline-flex; /* Flexbox to align text and arrow */
  align-items: center; /* Center vertically */
  text-decoration: none; /* Remove underline from the link */
  font-size: 16px; /* Adjust font size */
  font-weight: bold; /* Make text bold */
  color: #fff !important; /* Text color */
	background: #1d0d40 !important;
		padding: 10px 40px 10px 40px;
	border: none;
}

.careers-form .wpcf7-submit a:link {
  color: #fff !important; /* Text color */
}

.careers-form .wpcf7-submit::after {
  content: '→'; /* Arrow symbol */
  display: inline-block;
  background-color: #1d0d40 !important; /* Blue background for the arrow */
  color: #d1dce5; /* White arrow color */
  padding: 10px 20px; /* Padding for the arrow box */
  font-size: 18px; /* Adjust arrow size */
  text-align: center; /* Center arrow text */
	margin-left: 30px;
}

input::placeholder,
textarea::placeholder {
  color: rgba(17, 18, 18, 0.3);
}

.wpcf7-list-item {
  margin: 10px 0!important;
}



.wpcf7-submit {
  display: inline-flex; /* Flexbox to align text and arrow */
  align-items: center; /* Center vertically */
  text-decoration: none; /* Remove underline from the link */
  font-size: 16px; /* Adjust font size */
  font-weight: bold; /* Make text bold */
  color: #1d0d40 !important; /* Text color */
	background: #fff !important;
		padding: 10px 40px 10px 40px;
	border: none;
}

.wpcf7-submit a:link {
  color: #1d0d40 !important; /* Text color */
}

.wpcf7-submit::after {
  content: '→'; /* Arrow symbol */
  display: inline-block;
  background-color: #d1dce5 !important; /* Blue background for the arrow */
  color: #1d0d40; /* White arrow color */
  padding: 10px 20px; /* Padding for the arrow box */
  font-size: 18px; /* Adjust arrow size */
  text-align: center; /* Center arrow text */
	margin-left: 30px;
}

span.wpcf7-not-valid-tip {
  font-size: 12px!important;
  text-align: right;
}


.contact-page .social-icons {

  display: flex;

}

.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/* services page */

.service-card {

  height: 320px;

  width: 100%;

  display: block;

  text-align: center;

  margin-bottom: 30px;

  box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.15);

  background-repeat: no-repeat !important;

  -webkit-background-size: cover !important;

  -moz-background-size: cover !important;

  -o-background-size: cover !important;

  background-size: cover !important;

}



.card-filter {

  padding: 30px;

  height: 100%;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(0, 0, 0, 0.3);

  transition: all .4s ease-in-out;

}



.service-card:hover .card-filter {

  background: linear-gradient(45deg, rgba(99,40,91,0.8) 0%, rgba(226,43,41,0.8) 100%);

}



.service-card h2 {

  color: #fff !important;

}





@media (max-width: 992px) {
	.tel {display: none;}
		.tel-mobile {display: block; width: 50%; height: auto; background: #1d0d40; padding: 5px 10px; font-size: 18px; color: #fff !important; text-decoration: none; text-align: center; font-weight: bold; margin: 0px auto 30px auto;}
	.tel-mobile a {color: #fff !important;}
	#door-nav {display: none;}
	#page-header ul {display: block; margin: 0px  !important;}
	#page-header {padding-bottom: 20px;}
.nav-left, .nav-right {display: none;}
	.nav-inner {width: 100%;}

  #study-banner,

  #about-banner,

  #service-banner {

    background: none;

  }
	
	.parent {
                background-image: url('https://www.layer4.co.uk/wp-content/uploads/2024/11/happy-young-businessman-sitting-by-the-desk-2023-11-27-04-54-41-mobile.jpg'); /* Replace with mobile image */
                justify-content: center; /* Center content horizontally */
                align-items: flex-end; /* Align content at the bottom */
            }

            /* Make the child div full width and positioned at the bottom 40% */
            .child {
                width: 100%; /* Full width on mobile */
                height: 40%; /* Takes up bottom 40% of parent */
            }
	
	.letterbox-feature-content {text-align: center; }
.tagline {width: 250px !important; height: auto;}



}



@media (min-width: 992px) {


	
  .nav-switch {

    display: none;

  }



  .banner-img {

    display: none;

  }

}



@media (max-width: 768px) {
	
	.blog {width: 90%; }
	.purple-block {
        display: block; /* Stack content vertically */
        text-align: center; /* Center-align text for smaller screens */
    }

    .purple-block img {
        width: 100%; /* Stretch image to full width */
        max-width: 100%; /* Remove the max-width restriction */
        margin: 0 0 20px 0; /* Add spacing below the image */
    }

    .purple-text {
        width: 100%; /* Stretch text to full width */
        text-align: left; /* Left-align text */
    }
}

  #new-feature-section .feature-content {
    padding: 20px;
  }

  #new-feature-section .feature-content h4 {
    font-size: 1.5rem;
  }

  #new-feature-section .feature-content .content-wrapper {
    max-width: 100%;
  }
	
	#blue-feature-section {text-align: center;}
	#blue-feature-section .image-container {display: block; width: 30%; margin: 10px auto 0px auto !important;}

  #blue-feature-section .feature-text {
    text-align: center !important;
  }
	
	#blue-feature-section .row {
    display: flex;
    flex-direction: column-reverse; /* Reverse the order of children */
  }

  #blue-feature-section .feature-image-wrapper {
    margin: 20px auto 0px auto; /* Add spacing above the image container */
  }

	.remote-support {display: none;}
	.mega-menu-wrap-header {display: none;}
  h1, h2 {

    font-size: 32px !important;

    line-height: 42px !important;

  }
#site-header .container {align-items: center;}
.search {display: none;}
  .flip-md {

    flex-direction: column-reverse;

  }

.tagline {width: 350px !important; height: auto;}
.grey-block {width: 95%;  margin-left: 2.5%; padding: 20px;}
  .post-card {

    margin-bottom: 30px;

  }



  .site-banner img {

    margin-top: 30px;

  }

	.padding-top {padding-top: 30px;}

  .sidebar {
  }
	.contact-form {margin-top: 30px;}
.left, .right {display: block; width: 100% !important; margin: 0px;}

  .hide-mobile {

    display: none;

  }
	footer {text-align: center !important;}
	.footer-logo {max-width: 200px; height: auto;}
.footer-logo img {max-width: 100%; height: auto;}
#site-footer ul {margin: 0px !important; padding: 0px !important;}

}