/**
 * Theme Name:       mjs

 * Template:         genesis

 */

:root {
	--breakpoint-xl: 1500px!important;
}
/*.has-no-content-width .wp-block-group__inner-container{max-width: 1600px}*/
.site-header-wrap{}
 
body,p,.button{
font-family: "neuzeit-grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

p{font-weight: 400;}

h1,h2,h3,h4,h5{
font-family: "neuzeit-grotesk", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
	color:#222;

}
h1{font-weight: 900;}

.home .site-header{display: none}

.header-stuck .site-header{display: block}

@media only screen and (max-width: 900px) {
	.header-stuck .site-header{display: block}
	.home .site-header{display: block;background-color:#000}
}

.menu-item-link > span{font-weight: 400;color:#fff;	font-family: "neuzeit-grotesk", sans-serif; ;
}


.border-top-left img{-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;}

.border-top-right img{
-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
}
.border-bottom-right img{
	-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-bottomright: 30px;
	border-bottom-right-radius: 30px;}

@media only screen and (max-width: 900px) {
.border-top-left img{
	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 30px;
-moz-border-radius-topright: 30px;
border-top-right-radius: 30px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
}
	.border-top-right img{border-radius: 0px!important}	
	.border-bottom-right img{-webkit-border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 30px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
	border-top-left-radius: 0px!important;
	border-bottom-right-radius:0px!important}
}

.gallery,
.wp-block-gallery,
.wp-block-image {
  overflow: hidden;
}


.wp-block-gallery img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease-in-out, filter 0.4s ease-in-out;
  backface-visibility: hidden;
  will-change: transform, filter;
}

/* Smooth zoom + darken on hover */
.gallery img:hover,
.wp-block-gallery img:hover{
  transform: scale(1.1);
  filter: brightness(0.85);
}


.home-intro{margin-top: -80px;}
.home-intro h1{font-size: 8rem;letter-spacing: -2px;line-height: 1}

.home-intro h2{font-size: 1.4rem;letter-spacing: 10px;text-transform: uppercase;font-weight: 300}
@media only screen and (max-width: 900px) {
	.home-intro h1{font-size: 2.4rem;line-height: 1.2;letter-spacing: 1px;margin-top: 240px}	
	.home-intro h3{font-size: 1rem;}
}

.site-container::before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 300px;
  display: block;
  position: absolute;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.6) 80%);
}
@media only screen and (max-width: 900px) {
	.site-container::before {height:120px}}

.blur-box{backdrop-filter: blur(3px);
  background: rgb(0 0 0/20%);padding:30px;padding-top: 10px; max-width: 1000px;margin:0 auto;
	margin-top: 500px;margin-bottom: 300px;
	border-top: 5px solid #3a8891;
}
h4.strapline {font-size: 1rem;letter-spacing: 4px;text-transform: uppercase;font-weight: 300}
h3 span{color:#00c6c2}

.blur-box h1{
font-size:4rem;font-weight: 800;
	text-align: center;color:#fff;
}

.blur-box h1 span{
	font-weight: 300;
	font-size: 3rem;


}
.pullup{margin-top: -380px!important;}
@media only screen and (max-width: 900px) {
	.pullup{margin-top: -40px;}	
}
	.pullup2{margin-top: -280px!important;}
@media only screen and (max-width: 900px) {
	.pullup2{margin-top: -40px;}	
}
.home-intro h1, .home-intro h4{color:#fff;text-align: center}
.mobile-menu{background:#111;}
.borderradius{border-radius: 40px;overflow: hidden}
	@media only screen and (max-width: 900px) {

		.blur-box h1{font-size: 2rem}
}


.intro-icons{border-radius: 40px;padding: 30px;background:#fff}
.intro-icons h3{margin-top: 14px}
.service-types .fas {
  font-size: 2rem;

  text-align: center;
  background-color: #00c6c2;
  border-radius: 50%;
  padding: 20px;
  color: #fff;
}


/*Fix background:fixed issue on smaller devices */
@media only screen and (max-width: 900px) {
	.wp-block-cover__image-background.has-parallax
	{background-attachment: scroll!important;
	object-fit: contain;}
}

h2{}
h3{}
h4{}
	@media only screen and (max-width: 900px) {
	h1{
		
		}
}
	
.false-header h1{text-align: center}
.false-header h1 span{-webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: currentcolor;
}



h2.alt:after, h3.alt:after, h4.alt:after{  background-color: #febd17;
  margin-top: 10px;margin-bottom: 15px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  width: 54px;}

h4.alt{margin-bottom: 30px;}

h4.alt-centre::after, h3.alt-centre::after, h2.alt-centre::after {
  width: 60px;
  height: 3px;
  display: block;
  content: "";
  position: relative;
  margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
  margin-top: 25px;
  margin-bottom: 25px;
	-webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  background-color: #febd17;
}


.button, .wp-block-buttons{border-radius: 0px!important}

.pullup{margin-top: -280px!important;background:#fff;padding:20px 30px;-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}
@media only screen and (max-width: 900px) {
	.pullup{margin-top: -10px;}	
}


.home .menu-toggle-icon{color:#fff;}
.header-stuck .menu-toggle-icon{color:#fff!important;}
.pulluptextintro h1{max-width: 960px;}

.header-stuck .site-header{background:#1a1a1a}
.header-stuck .menu-item-link > span{color:#fff}
.menu-item-link{padding-top: 10px;padding-bottom: 10px;}
.sub-menu{background:#343a40;color:#fff;width:330px;}

.menu-item-has-children > a::after{color:#fff;}
.header-stuck .menu-item-has-children > a::after{color:#134659;}
.header-stuck .sub-menu .menu-item-link > span li a, .sub-menu .menu-item-link > span li a, .header-stuck .sub-menu .menu-item-link > span{color:#fff}


/*
.white-box{padding:20px;-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;border: 1px solid #ddd;margin-bottom: 30px;}
.white-box p{color:#343a40;}
.white-box img{ transition: transform .4s;}
.white-box img:hover{ transform: scale(1.05);transition: transform .4s;}
.border-box{border:4px solid #1f3455}
*/

ul.content-social {
  margin-left: 0px;
  padding-left: 0px;text-align: left;
}
ul.content-social li {
  list-style-type: none;
  display: inline-block;
  margin-bottom: 10px;
}
ul.content-social li .fab , ul.content-social li .fa-brands{
background: #00c6c2;
    background-color: #00c6c2;
  color: #fff;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 37px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-right: 8px;
  font-weight: bold;
  font-size: 18px;

}
ul.content-social li .fab:hover , ul.content-social li .fa-brands:hover{background-color:#111;color:#fff;}


/*FOOTER */
ul.footer-social {
  margin-left: 0px;
  padding-left: 0px;text-align: left;
}
ul.footer-social li {
  list-style-type: none;
  display: inline-block;
  margin-bottom: 10px;
}
ul.footer-social li .fab , ul.footer-social li .fa-brands{
background: #fff;
    color: #1a1a1a;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 37px;

  margin-right: 8px;
  font-weight: bold;
  font-size: 18px;

}
ul.footer-social li .fab:hover , ul.footer-social li .fa-brands:hover{background-color:#febd17;color:#1a1a1a;}


ul.main-social {text-align: left}
ul.main-social li .fab , ul.main-social li .fa-brands{
background: #134659;
     color: #fff;
}

.image-holder{overflow: hidden}
 .image-holder{margin-top:0px;margin-bottom: 20px;}

 .image-holder{background:#000;position: relative}
 .image-holder h2 a{color:#fff;text-decoration: none}
.image-holder h2{z-index: 12}
.image-holder p{padding:30px;padding-top: 20px;}

.text-overlay{z-index: 12;margin-bottom: 30px}

 /*.image-holder img{-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.image-holder img:hover{opacity: 0.8;-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;transform:scale(1.05)}*/

.image-holder .wp-block-image:before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
}

 .image-holder{background:#134659;position: relative}
.image-holder-blue .wp-block-image:before {
  content: '';
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
background: linear-gradient(0deg, rgba(19, 70, 89, 0.9) 0%, rgba(19, 70, 89, 0) 50%);
}

.overlay-container {
 position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul.ticks {margin-left: 0px;list-style-type: none;margin-bottom: 20px;}

ul.ticks li{color:#1a1a1a}


.pullup-intro {
  margin-top: -220px;
  background: #fff;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 40px;
  text-align: center;
  margin-bottom: 40px;
}
label:not([class*="gfield"]):not([class*="gform"]):not([class*="wpform"]){width: 100%;
  font-weight: 500;
  font-size: 1.2rem;
}

.gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield textarea.medium, .gform_wrapper.gravity-theme input[type="text"]{background:#fff;}


.wpcf7 input[type="text"], 
.wpcf7 input[type="email"] {
    width: 100%;
}
[type="text"],.wpcf7 input[type="email"], textarea{background:#f6f6f6;margin-bottom: 10px;width: 100%}
[type="submit"]{background-color:#febd17;border:2px solid #febd17;color:#fff;border-radius: 0px;width:100%;}
[type="submit"]:hover{background-color:#1f2c29;border:2px solid #1f2c29;color:#fff;}

.back-top {
  background: #f4f3ea;
  margin-top: -40px;
  border-radius: 50%;
  z-index: 999;
  position: relative;
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-left: auto;
  margin-right: auto;
}
.back-top .fas {
  text-align: center;
  font-size: 36px;
  padding-left: 21px;color: #0b3026
}

.footer-bottom{border-top:2px dotted rgba(255, 255, 255, 0.24)}

.site-footer{background:#f4f3ea;font-size: 1.2rem}
.site-footer .fas, .site-footer .far, .site-footer .fa-regular{color:#fff;width:22px;text-align: center}
.site-footer ul li{list-style-type: none;}
.site-footer ul{list-style-type: none;margin-left: 0px;}


.site-footer h4{margin-bottom: 30px;color:#1d2d5b;font-weight: bold;font-size: 1.6rem}

.site-footer h4::after {
  background-color: #fff;
  margin-top: 10px;
  content: "";
  display: block;
  height: 3px;
  position: absolute;
  -webkit-transform: skewX(-22deg);
  -ms-transform: skewX(-22deg);
  transform: skewX(-22deg);
  width: 44px;
}

.testimonial{padding:30px;margin-bottom:80px;background:#e9edf6;border-top:10px solid #134659;position: relative;padding-top: 100px}
.quotes__mark {
  position: absolute;
  left: 30px;
  width: 120px;
  height: 120px;
  content: "";
  background-color: #00c6c2;
  top: -60px;
  z-index: 9;
  color: #fff;
  text-align: center;
  font-size: 180px;
  line-height: 206px;
  border-radius: 20px;border: 8px solid #fff;
}

.services-page{margin-top: -60px;background:#fff;padding:30px;-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;}
.services{padding-bottom: 30px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;border: 1px solid #ddd;margin-bottom: 30px;}
.services .image-holder{overflow: hidden}
.services .image-holder{margin-top:0px;margin-bottom: 30px;}

.services .image-holder{background:#000;}
.services .image-holder img{-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;}
.services .image-holder img:hover{opacity: 0.8;-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;transform:scale(1.05)}

.services h3, .services p{padding-left:30px;padding-right: 30px;}
.services h3{font-size: 1.4rem}
.services .wp-block-buttons{padding-left:30px;padding-right:30px;}
/*FORCE BUTTONS TO BOTTOM OF CONTAINER! */
.services {


    display: flex;
    flex-direction: column;
	
}
.services .wp-block-buttons{margin-top: auto;}

.sidebar{border-radius:6px;padding:20px;background:#e9edf6;margin-top: 30px;}
.sidebar ul {margin-left: 0px;}
.sidebar ul li{list-style-type: none}
.sidebar ul li a{background:#fff;padding:10px;padding-bottom:6px;display: block;width:100%;font-size: 1.2rem}
.sidebar ul li a:hover{text-decoration: none;background:#3a8891;color:#fff;}
.sidebar ul li.currentpage a{background:#3a8891;color:#fff;font-weight: bold;border-left:4px solid #134659}

.contact-sidebar h4{margin-bottom: 24px;}

ul.check{margin-left: 0px;list-style-type: none;}
ul.check li{position:relative;margin-left: 20px;padding-left: 30px;}
ul.check li:before {
    content: "\f00c";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-5px;
    position:absolute;
    top:0;color:#00c6c2;
 }



.highlight{border:1px solid #febd17;}
.header-stuck .highlight{border:1px solid #febd17;background-color:#febd17;color:#1a1a1a!important;}
.header-stuck .highlight .menu-item-link > span{color:#1a1a1a!important}

.borderimg{outline-offset: -20px;
  outline: 3px dotted #fff;
  border-radius: 40px;
}

.footer-cta h2{font-size: 5rem;line-height: 1}
@media only screen and (max-width: 900px) {
	.footer-cta h2{font-size: 2.4rem;line-height: 1.4}	
}
.wpcf7 form.sent .wpcf7-response-output{border-color:#3a8891;}
ul.opening-hours{padding-left: 0px;margin-left: 0px;list-style-type: none;}
ul.opening-hours span{width:200px;display:inline-block}
ul.opening-hours li{margin-bottom: 6px}

.hero-slider h2{color:#fff;font-size: 8rem}
@media only screen and (max-width: 900px) {
	.hero-slider h2{color:#fff;font-size: 4rem}
}
.hero-slider {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

/* All slides stacked in the same space */
.hero-slider .slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeImages 15s infinite;
  z-index: 0;
}

/* Stagger animations */
.hero-slider .slide:nth-child(1) { animation-delay: 0s; }
.hero-slider .slide:nth-child(2) { animation-delay: 5s; }
.hero-slider .slide:nth-child(3) { animation-delay: 10s; }

@keyframes fadeImages {
  0%, 100% { opacity: 0; }
  8%, 30%  { opacity: 1; }
  38%      { opacity: 0; }
}

/* Text content stays on top */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 2rem;
}

/* Optional: overlay for contrast */
.hero-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}


@media only screen and (max-width: 900px) {
	.bottom-footer p{text-align: center}
	.bottom-footer img{text-align: center!important}
		
}
.footer-gradient{
background: #FF8E4A;
background: linear-gradient(90deg, rgba(255, 142, 74, 1) 0%, rgba(255, 167, 75, 1) 19%, rgba(255, 194, 55, 1) 58%, rgba(255, 195, 16, 1) 100%);
}
.footer-credits{border-top:1px solid rgba(255,255,255,0.2)}

.forcewidth{max-width: 900px;margin:0 auto}


#floating-button {
    position: fixed;
    top: 340px; /* Adjust as needed */
    right: 20px;
    background-color: #febd17;
    color: #111;
    padding: 10px;
    width: 40px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg); /* Flips text to face upwards */
    writing-mode: vertical-rl; /* Vertical text direction */
    text-orientation: mixed;
  
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#slide-in-content {
    position: fixed;
    top: 0;
    right: -100%;
    width: 50%;
    min-height: 60vh;
    background-color: #f1f1f1;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 999;
	padding-top: 80px;
}
@media (max-width: 768px) {
	#slide-in-content {width:80%}
}
/* FIX ISSUE ON SCROLLBAR */
#slide-in-content {
  overflow-y: auto; /* enables vertical scroll */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

#slide-in-content.active {
    right: 0;
}

.content-inner {
    padding: 20px;
}

#close-button {
    background-color: #253a47;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    width: 30%;
    margin-top: 20px;
    text-align: center;
}
@media (max-width: 768px) {
    #slide-in-content {
        max-height: 100vh; /* Limits height to 80% of viewport height */
        overflow-y: auto; /* Enables vertical scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */
    }
}


.service-boxes h4{background:green;padding:20px}