/*
Theme Name: A starter Theme
Author: starter
Author URI: https://#
Description: Just another starter theme.
Version: 1.0
License: (c) Copyright of starter. All Rights Reserved.
Text Domain: starter
*/

/*Universal styling*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
}
html {
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
}
h1 {
 color: #fff;
    font-size: 50px;
    line-height: 55px;
    font-weight: 800;
    padding-bottom: 20px;
}
h2 {
  color: #00011e;
  font-size: 40px;
  line-height: 55px;
  font-weight: 600;
  padding-bottom: 30px;
}
h3 {
  color: #00011e;
  font-size: 30px;
  font-weight: 700;
  line-height: 36px;
}
h4 {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 26px;
}
p {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  font-family: 'Open Sans', sans-serif;
  color: #00011e;
}
ul {
  list-style-type: disc;
}
@media screen and (max-width: 600px) {
  h2 {
  font-size: 32px;
  line-height: 40px;
}
}
@media screen and (max-width: 450px) {
  h3 {
  font-size: 25px;
}
}
/* FLEXI CONTAINERS */
.flexi-container-tblr {
  padding: 80px 10%;
  max-width: 1700px;
  margin: auto;
}
.flexi-container-tb {
  padding: 80px 0%;
  max-width: 1700px;
  margin: auto;
}
.flexi-container-tblr-thin {
  padding: 80px 10%;
  max-width: 1700px;
  margin: auto;
}
.flexi-container-tblr-wide {
  padding: 80px 5%;
  max-width: 1700px;
  margin: auto;
}
.flexi-container-lr {
  padding: 0px 10%;
  max-width: 1700px;
  margin: auto;
}
@media screen and (max-width: 1200px) {
  .flexi-container-tblr {
  padding: 60px 5%;
}
  .flexi-container-tblr-thin {
  padding: 40px 7%;
}
#contact .flexi-container-tblr-thin {
    padding: 80px 10% 80px 7% !important;
}
.flexi-container-lr {
  padding: 0px 5%;
}
}
@media screen and (max-width: 800px) {
   .flexi-container-tblr-thin {
  padding: 30px 5%;
}
#contact .flexi-container-tblr-thin {
    padding: 80px 5% 80px 5% !important;
}
}
/*buttons*/
.btn-white {
  transition: 0.3s;
  display: block;
  color: #00011e;
  font-size: 18px;
  line-height: 21px;
  background-color: #fff;
  border: 1px solid #fff;
  padding: 10px 15px;
  border-radius: 30px;
  transition: 0.3s;
  font-weight: 500;
}
.btn-white:hover {
  color: #fff;
  border: 1px solid #fff;
  background-color: #00011e;
  transition: 0.3s;
}
.btn-blue {
  display: block;
  width: fit-content;
  color: #fff;
  font-size: 20px;
  line-height: 21px;
  background-color: #00011e;
  border: 1px solid #00011e;
  padding: 10px 15px 12px 15px;
  transition: 0.3s;
  border-radius: 30px;
  transition: 0.3s;
}
.btn-blue-2 {
	width: fit-content;
  display: block;
  color: #fff;
  font-size: 20px;
  line-height: 21px;
  background-color: #00011e;
  border: 1px solid #00011e;
padding: 15px 25px;
transition: 0.3s;
  border-radius: 30px;
  transition: 0.3s;
  }
.btn-blue:hover {
  color: #00011e;
  border: 1px solid #00011e;
  background-color: #fff;
  transition: 0.3s;
}
.btn-blue-2:hover {
  color: #fff;
  border: 1px solid #5B628F;
  background-color: #5B628F;
  transition: 0.3s;
}
.btn-transparent-blue {
  display: block;
  font-family: 'Open Sans', sans-serif;
  border-radius: 30px;
  color: #00011e;
  font-size: 20px;
  line-height: 21px;
  background-color: transparent;
  border: 1px solid #00011e;
  padding: 12px 17px;
  transition: 0.3s;
}
.btn-transparent-blue:hover {
  border: 1px solid #fff;
  background-color: #00011e;
  color: #fff;
  transition: 0.3s;
}
.btn-transparent-white {
  display: block;
  font-family: 'Open Sans', sans-serif;
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
  line-height: 21px;
  background-color: transparent;
  border: 1px solid #fff;
  padding: 12px 17px;
  transition: 0.3s;
}
.btn-transparent-white:hover {
  border: 1px solid #464c73;
  background-color: #464c73;
  transition: 0.3s;
}
/*colours*/
.white {
  background-color: #ffffff;
}
.blue {
  background-color: #00011e;
}
.dark-blue {
  background-color: #1F2238;
}
.grey {
  background-color: #F4F4F4;
}
/*HEADER -------------------------------------------------------------------------------------------------------*/
header {
  width: 100%;
  max-height: 150px;
  background-color: #00011e !important;
}
.header {
  display: flex;
  justify-content: space-between;
      align-items: center;
  width: 100%;
      z-index: 100;
    padding: 25px 5%;
  position: relative;
}
nav a {
  position: relative;
  color: white;
}
nav a:after, nav ul button:after{
    content: '';
    position: absolute;
    border-radius: 5px;
    width: 0;
    height: 3px;
    display: block;
    right: 0;
    background: #fff;
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
    }
    nav a:hover:after, nav ul button:hover:after {
    width: 100%;
    left: 0;
    background: #fff;
}
nav ul {
  list-style-type: none;
  display: inline-block;
}
nav ul li {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
   display: inline-block;
   padding: 0px 16px;
  color: #fff;
  z-index: 3;
}
nav ul li a {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 20px;
      position: relative;
    z-index: 3;
}
nav ul button {
  cursor: pointer;
   position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
   display: inline-block;
  color: #fff;
  z-index: 3;
  font-size: 20px;
  background-color: #00011e;
  border: none;
}
nav ul li a:hover , nav ul button:hover {
opacity: 0.8;
}
.right-nav {
  display: flex;
  align-items: center;
}
header .phone {
  margin-right: 20px;
  display: flex;
  align-items: center;
}
header .phone img {
  margin-right: 10px;
  max-height: 32px;
  max-width: 22px;
}
header .phone a {
  font-size: 20px;
  border-bottom: 1px solid #00011e;
  padding: 4px 0px;
  transition: 0.3s;
}
header .phone a:hover {
  color: f1f1f1;
  border-bottom: 1px solid #fff;
  transition: 0.3s;
}
header .logo {
  display: flex;
    align-items: center;
}
header .logo img {
    max-height: 95px;
    height: auto;
    width: 100%;
}
@media screen and (max-width: 1830px) {
nav ul li {
   padding: 0px 8px;
}
nav ul li a {
  font-size: 18px;
}
header .phone a {
    font-size: 18px;
    }  
}
}
/* MOBILE NAVIGATION */
.mobile-menu {
  display: none;
}
.sidenav .closebtn {
  position: absolute;
 top: 60px;
    right: 90px;
    font-size: 24px;
    text-align: center;
    color: #fff;
}
.sidenav ul {
  flex-direction: column;
  text-align: center;
}
.sidenav ul li {
      padding: 4px 0px;
  display: block !important;
  width: fit-content;
    margin: auto;
}
.sidenav .btn-white {
	margin-bottom:10px !important;
}
.sidenav .btn-white:after {
	display:none;
}
.sidenav ul li a {
  font-size: 16px;
  padding: 2px 0px;
}
.mobile-nav-menu .phone {
  display: flex;
  justify-content: center;
  margin: 5px 0 22px 0;
}
.mobile-nav-menu .btn-white {
  color: #00011e;
  width: fit-content;
    margin: auto;
}
.mobile-nav-menu a {
  display: block;
  color: #fff;
  font-size: 18px;
  padding-bottom: 12px;
  transition: 0.3s;
}
.mobile-nav-menu a:hover {
  color: #f1f1f1;
  transition: 0.3s;
}
.sidenav .button-container {
  margin: auto;
    width: 163px;
}
.nav {
  position: relative;
}
/*aminated menu icon*/
.mobile-menu .checkbox {
  position: absolute;
  display: block;
    height: 40px;
    width: 30px;
  z-index: 5;
  opacity: 0;
  cursor: pointer;
  display: none;
z-index: 9999;
  top: 10px; 
}
.mobile-menu .hamburger-lines {
  display: block;
    height: 22px;
    width: 28px;
    position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  display: none;
  top: -7px;  
z-index: 9998;
}

.mobile-menu .hamburger-lines .line {
  display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: #ffffff;
}

.mobile-menu .hamburger-lines .line1 {
  transform-origin: 0% 0%;
  transition: transform 0.4s ease-in-out;
}

.mobile-menu .hamburger-lines .line2 {
  transition: transform 0.2s ease-in-out;
}

.mobile-menu .hamburger-lines .line3 {
  transform-origin: 0% 100%;
  transition: transform 0.4s ease-in-out;
}
.mobile-menu input[type="checkbox"]:checked ~ .sidenav {
  transform: translate(0%);
}

.mobile-menu input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
  transform: rotate(45deg);
}

.mobile-menu input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
  transform: scaleY(0);
}

.mobile-menu input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
  transform: rotate(-45deg);
}
.sidenav {
  height: 100%; 
  width: 100%;
  position: fixed; 
  z-index: 9997;
  top: 0; 
  left: 0;
  background-color: #00011e; 
  overflow-x: hidden;
  padding-top: 140px; 
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  transform: translate(150%);
  transition: transform 0.5s ease-in-out;
}
.sidenav-container {
  text-align: center;
}
@media screen and (max-width: 1585px) {
  header .phone {
    display: none;
  }
}
@media screen and (max-width: 1040px) {
  header {
    max-height: 125px;
  }
  .mobile-menu {
    display: flex;
    justify-content: end;
  position: relative;
    top: -102px;
    right: 5%;
    padding-top: 28px;
}
  .right-nav .btn {
    display: none;
  }
.nav {display: none;}
.search-bar-container {
  display: none;
}
  .mobile-menu .checkbox {
  display: block;
}
.mobile-menu .hamburger-lines {
  display: flex;
}
.right-nav {
  display: none;
}
}
/*Homepage hero ------------------------------------------------*/
#hero {
  height: 86.5vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(/images/hero-img-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
#hero .hero-txt {
  margin: 0 !important;
    max-width: 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(10,8,38);
background: radial-gradient(circle, rgba(10,8,38,0.14338235294117652) 0%, rgba(10,8,38,0.8464635854341737) 100%);
}
#her .hero-txt .btn-white {
  font-size: 20px;
  }
.underline {
  font-weight: bold;
  position: relative;
}
.underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.1em;
  height: 3px;
  width: 100%;
  background: linear-gradient(110deg, #59BFE1, #B4DB77, #EBBC31, #EC708D);
  z-index: 1;
}

@media screen and (max-width:  500px) {

  h1 {
    color: #fff;
    font-size: 34px;
    line-height: 45px;
    margin: 0px 5%;
    max-width: 100%; 
}
}
/*three boxes section --------------------------------------------------------*/
.top-txt {
  margin-bottom: 60px;
  text-align: center;
}
.three-boxes {
  display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 50px;
}
.three-boxes .box {
  position: relative;
  background-color: #ebebf2;
  border-radius: 30px;
  margin-top: 30px;
  text-align: center;
  padding:80px 30px 30px 30px;
  max-width: 410px;
}
.three-boxes .box h3 {
  padding-bottom: 20px;
}
.three-boxes .box p {
  padding-bottom: 10px;
}
.three-boxes .box .icon {
  background-color: #00011e;
    padding: 20px;
    border-radius: 50%;
    height: 108px;
    width: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    top: -50px;
    position: absolute;
    left: calc(50% - 54px);
    width: 108px;
    display: flex;
}
.three-boxes .box .icon img {
  max-height: 50px;
}
.box-txt {
  position: relative;
  top: 0;
    padding-bottom: 15px;
}
.box .button-container a{
 width: fit-content;
 margin: auto;
}

@media screen and (max-width: 450px) {
  .box.box3 .button-container .btn-transparent-blue {
    flex-wrap: wrap;
    display: flex;
}
}
@media screen and (max-width: 380px) {
.box.box3 .button-container {
    bottom: 30px;
    left: calc(50% - 130px);
  }
  .box.box3 .button-container .btn-transparent-blue {
    max-width: 250px;
}
}
@media screen and (max-width: 1700px) {
  #three-boxes .flexi-container-tblr-thin {
  padding: 60px 7%;
}
}
@media screen and (max-width: 1100px) {
  .three-boxes {
   grid-template-columns: 1fr 1fr;
}
.three-boxes .box {
  max-width: 100%;
}
.three-boxes .box p {
  max-width: 700px;
    margin: auto;
}
}
@media screen and (max-width: 800px) {
  #three-boxes .flexi-container-tblr-thin {
  padding: 60px 5%;
}
 .three-boxes {
   grid-template-columns: 1fr;
}
}
@media screen and (max-width: 405px) {
  .three-boxes .box {
  max-width: 100%;
}
}
/*two image slider section -------------------------------------*/
#two-image-slider {
  background-color: #00011e;
}
#two-image-slider h2, #two-image-slider p {
  color: #fff;
}
#two-image-slider .wrap {
  display: flex;
}
.two_img_slider img {
  border-radius: 30px;
   max-width: 570px;
    max-height: 400px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.two_img_slider {
  max-width: 1175px;
  min-width: 300px;
  max-height: 400px;
}
  .two_img_slider .slick-slide {
      margin: 0 15px;
  }

  .two_img_slider .slick-list {
      margin: 0 -15px;
  }
#two-image-slider .text {
  max-width: 442px;
      min-width: 300px;
  padding-right: 30px;
}
#two-image-slider .text .button-container {
 margin-top: 40px; 
}
#two-image-slider .slider-arrow {
    align-items: center;
    display: flex;
    z-index: 10;
    position: relative;
    margin-left: 20px;
    cursor: pointer;
  }
  @media screen and (max-width: 1400px) {
    #two-image-slider .wrap {
  display: flex;
  align-items: center;
}
  }
 @media screen and (max-width: 1500px) {
    #two-image-slider .text {
      max-width: 390px;
      min-width: 390px;
    }
    .two_img_slider img {
   max-width: 840px;
}
 }
 @media screen and (max-width: 1000px) {
 #two-image-slider .wrap {
    align-items: start;
    flex-direction: column;
}
#two-image-slider .text {
    max-width: 100%;
    min-width: 0px;
    margin-bottom: 60px;
}
.two_img_slider {
    max-width: 95%;
    min-width: 0px;
    }
    #two-image-slider .slider-arrow {
    width: 100%;
    justify-content: end;
    position: absolute;
    top: 75%;
    left: -25px;
  }
  #two-image-slider .wrap {
    position: relative;
  }
}
@media screen and (max-width: 800px) {
  #two-image-slider .slider-arrow {
    top: 70%;
  }
}
@media screen and (max-width: 650px) {
  #two-image-slider .slider-arrow {
    top: 75%;
}
  .two_img_slider {
    max-width: 90%;
    }
}
@media screen and (max-width: 505px) {
#two-image-slider .slider-arrow {
    top: 79%;
}
}
@media screen and (max-width: 390px) {
#two-image-slider .slider-arrow {
    top: 83%;
}
}
  /*google review widget ----------------------------------------*/
  #google-review-widget .flexi-container-tblr-thin {
    padding: 80px 15% 0px 15%;
}
@media screen and (max-width: 1200px) {
 #google-review-widget .flexi-container-tblr-thin {
  padding: 60px 10% 0px 10%;
}
}
@media screen and (max-width: 800px) {
  #google-review-widget .flexi-container-tblr-thin {
  padding: 60px 5% 0px 5%;
}
.fgtqFq {
    position: relative;
    padding: 24px;
    }
}
.jTLtvO {
  padding: 28px 34px !important;
}
.fgtqFq {
    padding: 34px;
    }
  .jfwlGq {
    box-shadow: none !important;
    background-color:  transparent !important;
    fill: none;
    cursor: unset;
  }
  .ldYjjZ .jfwlGq {
    left: -40px;
  }
  .kiQiTI .jfwlGq {
    left: 40px;
  }
  .gBQoNy {
    margin-bottom: 20px;
  }
  .eapps-widget-toolbar {
    display: none;
  }
  .gOptMQ a::last-child {
    display: none;
    background-color: white !important;
    background: white;
    color: white;
    margin: 0;
  }
  div.eapps-widget {
    padding-bottom: 60px;
    /*border-bottom: 1px solid #00011e;*/
}
  @media screen and (max-width: 500px) {
    .ldYjjZ .jfwlGq {
    left: -10px;
  }
  .kiQiTI .jfwlGq {
    left: 10px;
  }
  }
  /*1 Image slider ---------------------------------------------*/

  #image_slider .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
  }
  #image_slider .wrap .text {
    max-width: 400px;
    min-width: 340px;
    margin-right: 30px;
  }
  #image_slider .wrap .text p {
    max-width: 340px;
    min-width: 340px;
  }
  #image_slider .wrap .text .button-container {
    margin-top: 20px;
  }
  .img_slider_dots {
    max-width: 870px;
    min-width: 300px;
  }
  .img_slider_dots img {
    border-radius: 30px;
   max-width: 870px;
    max-height: 510px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .img_slider_dots.slick-dotted.slick-slider {
    margin-bottom: 0px !important;
}
.img_slider_dots .slick-dots {
    position: absolute;
    bottom: 10px;
    right: 40px;
    text-align: right;
    display: none !important;
    }
  .img_slider_dots .slick-dots li {
    margin: 0;
  }
  .slick-dots li button:before {
    font-size: 9px !important;
  }
  .slick-dots li.slick-active button:before {
    color: white !important;
}
  #image_slider {
    background-image: url(../images/blue-square.png);
    background-repeat: no-repeat;
    background-position: 100% 70%;
    background-size: 400px 450px;
  }
  @media screen and (max-width: 1000px) {
    #image_slider .wrap {
    flex-direction: column;
  }
  #image_slider .wrap .text {
    max-width: 100%;
    width: 100%;
    min-width: 0px;
    margin-right: 0px;
}
#image_slider .wrap .text p {
    max-width: 100%;
    min-width: 0;
}
#image_slider .img_slider_dots { 
margin-top: 60px;
    width: 100%;
    min-width: 0;
}
.img_slider_dots img {
    max-width: 100%;
    width: 100%;
    min-height: 300px;
    }
    #image_slider {
    background-position: 100% 90%;
  }
  }
   @media screen and (max-width: 930px) {
    #image_slider {
    background-size: 40% 40%;
  }
   }
@media screen and (max-width: 930px) {
#image_slider {
   background-size: 60% 300px;
 }
}
/*CONTACT SECTION --------------------------------------------*/
#contact {
  background-color: #1F2238;
}
#contact .flexi-container-tblr-thin {
    padding: 80px 15% 80px 15%;
}
#contact h2 {
  text-align: center;
  color: white;
}
#contact p {
  color: white;
  font-size: 16px;
}
#contact .wrap {
  display: flex;
  justify-content: space-evenly;
  padding: 0px 5%;
}
.map_right {
  width: 50%;
  padding-left: 25px;
}
.map {
  border-radius: 30px;
    border: 3px solid white;
    height: 350px;
}
.map iframe {
  border-radius: 30px;
    filter: opacity(0.5);
    width: 100%;
    height: 100%;
}
.map_links {
  margin-top: 20px;
      display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.map_links .contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.map_links .contact-info a {
  color: white;
  margin-left: 10px;
  transition: 0.3s;
  font-size: 16px;
  position: relative;
}
.map_links .contact-info a:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.2em;
  height: 2px;
  width: 100%;
  background: none;
  z-index: 1;
  transition: 0.3s;
}
.map_links .contact-info a:hover {
  color: #f1f1f1;
  transition: 0.3s;
}
.map_links .contact-info a:hover:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -0.1em;
  height: 2px;
  width: 100%;
  background: linear-gradient(110deg, #59BFE1, #B4DB77, #EBBC31, #EC708D) !important;
  z-index: 1;
  transition: 0.3s;
}
.form_left {
  width: 50%;
  padding-right: 25px;
}
.form-half {
      display: flex;
    justify-content: space-between;
}
.form-half input {
  width: 49%;
}
form input {
    border-radius: 30px;
    padding: 12px 20px;
    border: 1px solid white;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 25px;
    color: white;
    font-size: 16px;
}
form input:focus {
  outline: none;
  border: 1px solid #f1f1f1;
}
form input::placeholder {
  color: white;
  font-size: 16px;
}
.form-full input {
  width: 100%;
}
textarea {
  width: 100%;
  height: 110px;
    border-radius: 30px;
    padding: 10px 20px;
    border: 1px solid white;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 16px;
    resize: none;
}
textarea:focus {
  outline: none;
  border: 1px solid #f1f1f1;
}
textarea::placeholder {
  color: white;
  font-size: 16px;
}
.form .btn-white {
  cursor: pointer !important;
}
.terms {
  display: flex;
  align-items: baseline;
  margin: 10px 0px 18px 0px;
  position: relative;
}
.terms input[type="checkbox"] {
  border-radius: 5px;
  border: 1px solid white;
  background-color: transparent;
  cursor: pointer;
      height: 20px;
    width: 20px;
    margin-bottom: 0;
}
.terms p {
  margin-left: 10px;
      position: relative;
    top: -4px;
}
@media screen and (max-width: 1550px) {
  #contact .wrap {
  padding: 0px 0%;
}
}
@media screen and (max-width: 1060px) {
  #contact .wrap {
    flex-direction: column;
  }
  .map_right {
  width: 100%;
  padding-left: 0px;
  margin-top: 30px;
}
.form_left {
  width: 100%;
  padding-right: 0px;
}
}
@media screen and (max-width: 500px) {
.form-half {
      display: block;
}
.form-half input {
  width: 100%;
}
.map_links {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    }
    .map_links .contact-info {
    margin-right: 15px;
  }
  form .submit  {
  text-align: center;
  margin: auto;
}
form .submit input {
  -webkit-appearance: none;
}
form .submit select {
  -webkit-appearance: none;
}
}
/*FOOTER -------------------------------------------*/
.footer-roof-img {    
  width: 100%;
    height: auto;
  }
footer .footer-top {
  background-color: #00011e;
  position: relative;
    top: -5px;
}
footer .footer-bottom {
  background-color: #fff;
  text-align: center;
}
footer a {
  position: relative;
  width: fit-content;
}
footer a.active {
  transition: 0.3s;
  font-weight: bold;
}
footer a:after {
    content: '';
    position: absolute;
    border-radius: 5px;
    width: 0;
    height: 3px;
    display: block;
    right: 0;
    background: #fff;
    transition: width 0.5s ease;
    -webkit-transition: width 0.5s ease;
    }
    footer a:hover:after {
    width: 100%;
    left: 0;
    background: #fff;
}
footer .footer-bottom p {
  font-size: 14px;
  width: 100%;
  padding: 5px 5% 10px 5%;
}
footer .footer-bottom a {
  font-size: 14px;
  padding: 0;
  color: #00011e;
  border: none;
  text-decoration: none;
  transition: 0.3s;
}
footer .footer-bottom a:hover {
 color: #1F2238;
  border-bottom: 1px solid #1F2238;
  text-decoration: none;
  transition: 0.3s;
}
.footer-top p.bold {
  font-weight: bold;
  font-size: 19px;
}
.footer-top .col1 .bold {
  padding-bottom: 30px;
}
.footer-top p, .footer-top a {
  color: white;
  font-size: 16px;
}
.footer-top i, .footer-top svg {
  color: white;
  font-size: 20px;
  margin-right: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.socials {
  margin: 10px 0px 15px 0px;
}
.socials a {
  border: none;
  transition: 0.3s;
}
.socials a:hover {
  border: none;
  transition: 0.3s;
  color: #464c73;
}
.socials a:hover i {
  border: none;
  transition: 0.3s;
  color: #464c73;
}
.footer-columns {
  align-items: center;
  display: flex;
}
.col1 {
  max-width: 345px;
  position: relative;
  top: -10px;
  margin-right: 5%;
}
.col2 a {
  padding: 5px 0px;
  display: block;
}

.footer-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.footer-title img {
  margin-left: 15px;
  max-height: 24px;
}
.col4 p {
  padding-bottom: 5px;
}
.cols234 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 12%;
  width: 100%;
}
.footer-txt {
  padding-top: 20px;
}
@media screen and (max-width: 1600px) {
.cols234 {
  grid-column-gap: 8%;
}
}
@media screen and (max-width: 1510px) {
.col1 {
    margin-right: 5%;
}
}
@media screen and (max-width: 1460px) {
  .footer-columns {
  flex-direction: column;
  align-items: flex-start;
}
.col1 {
  max-width: 100%;
  position: relative;
  top: 0px;
  margin-bottom: 40px;
  margin-right: 0%;
}
.col1 img {
  max-width: 280px;
  width: 100%;
  height: auto;
}
.cols234 {
  grid-column-gap: 40px;
}
}
@media screen and (max-width: 1000px) {
.cols234 {
  grid-template-columns: auto auto;
      grid-row-gap: 30px;
}
.cov-logo {
    justify-content: start;
    margin-top: 30px;
    }
}
@media screen and (max-width: 660px) {
.cols234 {
  grid-template-columns: auto;
}
.col1 {
  min-width: 0;
}
}
/*animations*/
@media screen and (max-width: 500px) {
  * {
    animation-delay: 0s !important;
  }
}
/*subpage hero -----------------------------------------*/
#hero.subpage-hero {
    height: 70vh;
    background-image: url(https://emailguide.co.uk/wp-content/themes/starter-theme/images/email-phone-hero.jpg);
  }
  #hero.subpage-hero.sp-hero1 {
    background-image: url(https://emailguide.co.uk/wp-content/themes/starter-theme/images/desktop-laptop.jpg);
  }
  #hero.subpage-hero.sub-hero3 {
    background-image: url(https://emailguide.co.uk/wp-content/themes/starter-theme/images/handshake.jpg);
  }
  #hero.subpage-hero.sub-hero4 {
    background-image: url(https://emailguide.co.uk/wp-content/themes/starter-theme/images/management-hero.jpg);
  }
  #hero.subpage-hero.sub-hero5 {
    background-image: url(https://emailguide.co.uk/wp-content/themes/starter-theme/images/review-hero.jpg);
  }
  .subpage-hero .underline {
    font-weight: inherit;
  }
  .subpage-hero h1 {
    max-width: 590px;
  }
  #hero p {
    color: white;
    font-weight: 600;
    padding-bottom: 20px;
    max-width: 400px;
  }
   #hero.subpage-hero .hero-txt {
	   padding:30px;
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(10,8,38);
background: radial-gradient(circle, rgba(10,8,38,0.14338235294117652) 0%, rgba(10,8,38,0.8464635854341737) 100%);
  }
 /*text box ---------------------------------*/
 #text-box h2 {
  font-weight: bold;
  text-align: left;
 }
 #text-box {
  text-align: left;
 }
 #text-box p {
  text-align: left;
 }
 #text-box .button-container {
   margin-top: 60px;
 }
 /*text box grey --------------------------------------*/
 .text-grey {
    padding-bottom: 65px;
  }
  #text-img .text-grey {
    padding-bottom: 0px;
  }
#text-box-grey .text-white {
    border-radius: 30px;
    padding: 40px 60px 60px 60px;
  }
  #text-box-grey .text-white h3 {
    padding-bottom: 20px;
    padding-top: 20px;
  }
   #text-box-grey .text-white p {
    padding-bottom: 25px;
  }
  .text-grey h2 {
    padding-bottom: 0px;
  }
@media screen and (max-width:500px) {
  #text-box-grey .text-white {
    padding: 20px 30px 30px 30px;
  }
}
  /*text image --------------------------------------------------*/
  #text-img .img img {
    border-radius: 30px;
    width: 100%;
    height: auto;
    min-height: 440px;
    object-fit: cover;
    -o-object-fit: cover;
  }
  #text-img .wrap {
    display: flex;
    align-items: center;
  }
  #text-img .img {
    width: 65%;
  }
   #text-img .text {
    width: 35%;
    max-width: 370px;
    min-width: 370px;
  }
  #text-img .text .button-container {
  margin-top: 50px;
}
#text-img .text.text1 {
    margin-left: 10%;
  }
  #text-img .text.text2 {
    margin-right: 10%;
  }
  @media screen and (max-width: 1000px) {
     #text-img .wrap {
    flex-direction: column;
  }
  #text-img .wrap.wrap2 {
    flex-direction: column-reverse;
  }
  #text-img .img {
    width: 100%;
  }
   #text-img .text {
    width: 100%;
    max-width: 100%;
    min-width: 0px;
    padding: 30px 0px;
  }
  #text-img .text.text1 {
    margin-left: 0%;
  }
  #text-img .text.text2 {
    margin-right: 0%;
  }
  #text-img .text-grey {
    padding-bottom: 50px;
  }
  #text-img .img img {
    min-height: 340px;
  }
}
/*accordion --------------------------------------------------*/
#accordion .wrap {
  display: flex;
}
#accordion h2, #accordion p {
  color: #fff;
}
#accordion p {
	padding:10px 0px;
}
.accordion-section {
  width: 50%;
  padding: 5%;
}
.acc-img {
  width: 50%;
  display: flex;
  align-items: center;
    justify-content: center;
}
.acc-img img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.accordion {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  outline: none;
  border: none;
  background-color: transparent;
  padding: 20px;
  position: relative;
  display: block;
  cursor: pointer;
  text-align: left;
  color: #fff;
}
.accordion.active {
  padding-bottom: 15px;
}
.accordion-wrap {
  padding-left: 20px;
    padding-top: 20px;
}
.panel {
  margin-bottom: 30px;
  padding-left: 20px;
  display: none;
  overflow: hidden;
  transition: 0.3s;
}
.panel.hide {
display: none;
}
.panel.show {
    display: block !important;
  max-height: 100%;
  transition: 0.3s;
}
.accordion:before {
  content: '';
  background-image: url('images/plus.svg'); 
    position: absolute;
  left: -10px;
    top: 23px;
    width: 15px;
    height: 10px;
    background-repeat: no-repeat;
}
.accordion.active:before {
  content: "";
  background-image: url('images/minus.svg');
}
@media screen and (max-width: 1100px) {
  #accordion .wrap {
    flex-direction: column;
}
  .accordion-section {
    width: 100%;
  }
  .acc-img {
  width: 100%;
}
}
/*fb review widget ----------------------------------*/
.gGgqlY {
  padding: 28px 34px !important;
  border-radius: 24px !important;
}
.dLPuDk {
  padding: 13px 21px !important;
}
.eapps-facebook-reviews-8c5fb3e3-3a81-4804-8939-bc6e2c075640-custom-css-hook .jeuPze button {
  border-radius: 18px !important;
}
/*-------------------------------free  info pack ----------*/
#fw-contact-form .text-top {
  margin-bottom: 30px;
}
#fw-contact-form .form-blue {
  padding: 40px;
  border-radius: 30px;
}
#fw-contact-form label {
    margin-left: 10px;
    position: relative;
    top: -4px;
    color: #00011e;
    font-size: 18px;
  }
  #fw-contact-form .terms p  {
    color: #00011e;
  }
  .form-half select {
  width: 49%;
}
.form-blue form select {
  margin-top: 10px;
    border-radius: 30px;
    padding: 12px 20px;
    border: 1px solid #00011e;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 25px;
    color: #00011e;
    font-size: 16px;
}
.form-blue form option {
    border-radius: 30px;
    padding: 12px 20px;
    border: 1px solid #00011e;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    color: #00011e;
    font-size: 16px;
}
.form-blue form select:focus {
  outline: none;
  border: 1px solid #00011e;
}
.form-full select {
  width: 100%;
}

.form-blue form input {
  margin-top: 10px;
    border-radius: 30px;
    padding: 12px 20px;
    border: 1px solid #00011e;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 25px;
    color: #00011e;
    font-size: 16px;
}
.form-blue form input {
    border-radius: 30px;
    padding: 12px 20px;
    border: 1px solid #00011e;
    background-color: transparent;
    font-family: 'Open Sans', sans-serif;
    color: #00011e;
    font-size: 16px;
}
.form-blue form input:focus {
  outline: none;
  border: 1px solid #00011e;
}
.form-blue form input::placeholder {
  color: #00011e;
}
.form-blue form input.btn-blue {
  color: #fff;
  font-size: 20px;
  line-height: 21px;
  background-color: #00011e;
  border: 1px solid #00011e;
  padding: 10px 15px;
  transition: 0.3s;
  border-radius: 30px;
  transition: 0.3s;
}
.form-blue form input.btn-blue:hover {
  color: #fff;
  border: 1px solid #5B628F;
  background-color: #5B628F;
  transition: 0.3s;
}
@media screen and (max-width: 500px) {
  #fw-contact-form .form-blue {
    padding: 20px;
  }
}
/*facebook reviews*/
.fb-text {
  display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    padding: 40px 30px;
    background-color: rgb(244, 244, 244);
        border-radius: 24px;
        margin-bottom: 30px;
}
.fb-text h2 {
  padding-bottom: 0;
  font-size: 30px;
  line-height: 40px;
}
.fb-text .blue-txt {
  color: #1b74e4;
}
.fb-reviews ._4-u2 {
    border-radius: 23px;
    }
    .fb-reviews {
          background-color: rgb(244, 244, 244);
    border-radius: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20px;
    align-items: center;
    padding: 20px;
    }
.fb-reviews iframe {
    margin: 0px 10px;
    width: -webkit-fill-available;
  }
  .fb-stars {
        display: flex;
    justify-content: space-between;
    margin-top: 5px;
    align-items: center;
  }
  .fb-star-icons {
    padding: 0px 10px;
  }
  .fb-stars .rating {
    font-size: 22px;
  }
  .fb-stars .revs {
    font-size: 16px;
  }
  @media screen and (max-width: 1300px) {
    .fb-reviews {
      grid-template-columns: 1fr;
    grid-row-gap: 0px;
    }
    .fb-reviews iframe {
    margin: 0px 0px;
  }
  }
   @media screen and (max-width: 675px) {
    .fb-reviews iframe {
    margin: 10px 0px;
    width: 100%;
  }
  }
 @media screen and (max-width: 560px) {
  .fb-text {
    flex-direction: column;
  }
  .fb-text .button-container {
    margin-top: 35px;
  }
}
@media screen and (max-width: 380px) {
  .fb-stars {
    flex-direction: column;
  }
  .fb-text h2 {
    font-size: 24px;
    line-height: 30px;
  }
  }

  /*nav---------------------------*/
 /* Hide Dropdowns by Default */
nav ul ul {
      opacity: 0;
    position: absolute;
    left: 0;
    width: fit-content;
    z-index: 2;
    background-color: #00011e !important;
    padding: 40px 10px 10px 10px;
    transition: 0.3s;
}
  
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
  opacity: 1;
}
  
/* Fisrt Tier Dropdown */
nav ul ul li {
 width: 140px;
    float: none;
    display: list-item;
    position: relative;
    padding: 5px;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
  position: relative;
  top:-60px; 
  left:170px;
}
@media screen and (max-width: 1210px) {
nav ul button, nav ul li a {
    font-size: 17px;
  }
  header .btn-white {
    font-size: 15px;
    line-height: 16px;
    padding: 7px 10px;
}
header .logo img {
    max-height: 80px;
    }
    .header {
    padding: 20px 5%;
  }
}
  
/* Change this in order to change the Dropdown symbol 
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }*/

#steps p img {
	    width: auto;
    max-width: 100%;
    height: auto;
}
.page-id-116 #hero.subpage-hero .hero-txt {
    background: radial-gradient(circle, rgba(10, 8, 38, 0.5) 0%, rgba(10, 8, 38, 0.8) 100%);
}
.page-id-194 .text-grey {
	display:none;
}
nav ul li a ul li a {
        font-size: 15px;
    }
.privacy-policy main {
	padding: 40px 30px;
}
@media screen and (max-width:650px) {
	header .logo {
		max-width:150px;
	}
}

#text-img.ti2 .text.text2 {
	margin-right: 0%;
	margin-left: 10%;
}
@media screen and (max-width: 1000px) {
	#text-img.ti2 .text.text2 {
	margin-left: 0%;
}
}