@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Play:wght@400;700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

html {
    /* Ensures 100% height from the root element */
    height: 100%;
}

body {
	margin: 0;
	font-family: "Urbanist", sans-serif;
	background-color: #e2e2e2;
	min-height: 100vh;
}
.clear_div {
	clear: both;
}

.page-wrapper {
    /* Make the wrapper fill the entire body height */
    min-height: 100vh;
    /* Enable Flexbox on the wrapper */
    display: flex;
    /* Stack header, content, and footer vertically */
    flex-direction: column;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background-image: url('images/nav_head.png');
	background-repeat: repeat-x;
	/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 5px;
	z-index: 1000;
}
.header .left {
	flex-grow: 1;
	text-align: left;
	font-size: 24px;
	color: white;
	font-weight: bold;
}
.header .right {
	display: flex;
	align-items: center;
}
.tophead {
	width: 62px;
	height: 80px;
	background-image: url('images/tophead.png');
	background-size: cover;
}
.tophead-bg {
	width: 276px;
	height: 68px;
	background-image: url('images/tophead_bg.png');
	background-repeat: repeat-x;
	padding-top: 12px;
	padding-right: 4px;

}

.main-content {
	flex-grow: 1;
}

.main-body {
	margin: auto 30px;
}
/** FOOTER ****************************/

#footer {
	left: 0;
	width: 100%;
	height: 249px;
	background-image: url('images/footer_bg.png');
	background-repeat: repeat-x;
	/*align-items: center;*/
}

.foot_contain {
	width: 85%;
	margin: 0 auto;
	padding-top: 40px;
	display: flex;
	
	
}

.foot_left {
	width: 300px;
	height: 150px;
	align-items: stretch;
	
}

.foot_right {
	width: 100%;
	height: 150px;
	align-items: stretch;
	
}

.foot_right_top {
	height: 50%;
	text-align: center;
	background: #691B1C;
	margin: 0;
	/*display: flex;
  align-items: center;*/
	
}

.foot_right_bottom {
	
	color: #cbcaca;
	text-align: center;
}

.right-align_foot-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
}

.contact-section {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 1.3em;
	width: 100%;
	/*padding-right: 40px;*/
	margin-bottom: 20px;
	/*border-bottom: .2em #828282 dotted;*/
	color: #fff;
}
.contact-section i {
	margin-right: 10px;
}

.foot-icons {
	font-size:  40px;
}
.foot_nav {
	color: #fff;
	font-size: .9em;
}
.foot_copy {
	color: #fff;
	font-size: .9em;
	
}


/** TOP IMAGE ************************/
#top_container {
	margin-top: 80px;
}
.full-screen-div {
	width: 100%;
	height: 250px;
	background-image: url('images/main_header.jpg');
	background-size: cover;
	background-position: center;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*text-align: center;*/
	padding-top: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}

.full-screen-contact {
	width: 100%;
	height: 250px;
	background-image: url('images/header-contact.jpg');
	background-size: cover;
	background-position: center;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*text-align: center;*/
	padding-top: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}

.full-screen-service {
	width: 100%;
	height: 250px;
	background-image: url('images/header-service.jpg');
	background-size: cover;
	background-position: center;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*text-align: center;*/
	padding-top: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}

.full-screen-testimonials {
	width: 100%;
	height: 250px;
	background-image: url('images/header-testimonials.jpg');
	background-size: cover;
	background-position: center;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*text-align: center;*/
	padding-top: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}

.full-screen-about {
	width: 100%;
	height: 250px;
	background-image: url('images/header-about.jpg');
	background-size: cover;
	background-position: center;
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*text-align: center;*/
	padding-top: 30px;
	padding-left: 10px;
	box-sizing: border-box;
}

.full-screen-text {
	font-size: 2rem;
	max-width: 80%;
	font-family: "Courgette", cursive;
	color: white; 
	text-shadow: 2px 2px 4px black;
}

.full-screen-text2 {
	font-size: clamp(4em, 3vw + 0.5em, 4em);
	max-width: 80%;
	font-family: "Courgette", cursive;
	color: white; 
	text-shadow: 2px 2px 4px black;
}


.header-text {
	/*margin-left: 270px;*/
	align-content: center;
	text-align: center;
	margin: 0;
	padding: 0 100px;
}

.logo_center{
	display: none;
}

/*** SERVICES NEW******************/

/**new new **/

.background-bar {
	width: 75%;
	height: 58px;
	background: url('images/sep-line-blue.png') repeat-x;
}
.services-box {
	background-color: #e2e2e2;
	padding: 20px;
	text-align: center;
	width: fit-content;
	/* margin-top: -29px; Half of background-bar height to overlay it */
	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 2.5em;
	color: #0914a3;
	margin-top: -75px;
}

.home_service1 {
	width: 462px;
	height: 574px;
	/*background: url('images/home-serv1.png') no-repeat center/cover;*/
	overflow: hidden;
	position: relative;
}

.promise1 {
	width: 462px;
	height: 397px;
	display: flex;
	background: url('images/home-serv2.png') no-repeat center/cover;
	flex-direction: column;
	justify-content: start;
}

.home_services_bg1 {
	width: 100%;
	display: flex;
	justify-content: center;
}

.promise-header1 {
	font-size: 2rem;
	font-weight: 600;
	width: 330px;
	height: 40px;
	padding-top: 15px;
	padding-left: 40px;
}

.promise-text1 {
	padding: 10px;
	font-size: 1rem;
	text-align: left;
	
}

/********NEW RES COMM *******/
.com-res-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

/* === Main Container === */
.com-res-main-container {
  width: 80%;
  height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* === Image Container === */
.image-container {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  margin: 10px auto 0;
  border-radius: 6px;
}

/* === Residential Slide (Left to Right) === */
.slide-in-container.residential {
  display: flex;
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 400px;
  transition: left 1s ease;
  z-index: 2;
}

.slide-in-container.residential.slide-in {
  left: 0;
}

/* === Commercial Slide (Right to Left) === */
.slide-in-container.commercial {
  display: flex;
  position: absolute;
  top: 0;
  right: -40%;
  width: 40%;
  height: 400px;
  transition: right 1s ease;
  z-index: 2;
}

.slide-in-container.commercial.slide-in {
  right: 0;
}

/* === Info Box and Bar === */
.com-res-info-box {
  width: 100%;
  height: 380px;
  background-color: rgba(226, 226, 226, 0.92);
  padding: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 10px;
  border-radius: 6px 0 0 6px;
}

.com-only-info-box {
  width: 100%;
  height: 380px;
  background-color: rgba(226, 226, 226, 0.92);
  padding: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 10px;
  border-radius: 0 6px 6px 0;
}

.com-res-bar {
  width: 8px;
  height: 400px;
  background-color: #0914a3;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
}

.slide-in-container.commercial .com-res-bar {
  order: -1; /* put bar on left for commercial */
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.3);
}

/* === Header and Text === */
.info-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-header img {
  width: 82px;
  height: 63px;
  margin-right: 10px;
}

.info-header span {
  font-size: 2em;
  font-weight: 600;
  color: #0914a3;
}

.com-res-info-box p {
  font-size: 1.15em;
  line-height: 1.5;
  color: #333;
}

/* === Responsive (Mobile) === */
@media (max-width: 768px) {
  .com-res-main-container {
    width: 90%;
    height: auto;
    margin-bottom: 0; /* remove extra spacing */
  }

  .image-container {
    width: 100%;
    height: 220px;
    margin-bottom: 0;
  }

  .slide-in-container {
    position: static !important;
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    transform: none; /* REMOVE vertical translate */
    opacity: 1; /* fully visible */
    transition: none; /* prevent unwanted animation space */
    margin: 0; /* remove hidden spacing */
  }

  .com-res-info-box {
    width: 100%;
    height: auto;
    padding: 18px;
    margin-top: 0;
    margin-bottom: 0;
  }

  .com-res-bar {
    display: none;
  }

  .info-header img {
    width: 60px;
    height: 48px;
  }

  .info-header span {
    font-size: 1.5em;
  }

  .com-res-info-box p {
    font-size: 0.95em;
  }
	
	.slide-in-container.residential {
		height: auto;
	}
	
	.slide-in-container.commercial {
		height: auto;
	}
}


/* OLD ********************************************
.homeres_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	
}

.homeres_content-wrapper {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: center; 
	flex-wrap: wrap;
	width: 100%;
	
}

.home_residential {
	width: 100%;
	height: 300px;
	background: url('images/home-residential.png') no-repeat center/cover;
	background-attachment: fixed;

}


.home_residential {
	width: 650px;
	height: 350px;
	background: url('images/home-residential.png') no-repeat center/cover;

}
.home_residential_txt {
	width: 300px;
	display: flex;
	flex-direction: column;
	justify-content: start;
}

.home_commercial_txt {
	width: 300px;
	/*height: 350px;

}
*/
.home_commercial {
	width: 650px;
	height: 350px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	background: url('images/home-commercial.png') no-repeat center/cover;
}

/** end new new **/

.serv_container {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.home_serv_txt_top {
	font-size: 3rem;
	font-weight: bold;
	margin: 20px 0;
	font-family: "Courgette", cursive;
	color: #0914a3;
}
.home_services_bg {
	width: 100%;
	background: url('images/services_home_bg.png') repeat-x;
	display: flex;
	justify-content: center;
}
.serv_content-wrapper {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.home_services {
	width: 449px;
	height: 360px;
	/*background: url('images/services_home.png') no-repeat center/cover;*/
	overflow: hidden;
	position: relative;
}
.promise_info {
	width: 400px;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: start;
}
/*
.promise-header {
	background: url('images/promise_head.png') no-repeat center/cover;
	font-size: 1.5rem;
	font-weight: bold;
	width: 340px;
	height: 40px;
	padding-top: 20px;
	padding-left: 60px;
}
*/
.promise-text {
	padding: 10px;
	font-size: 1rem;
	text-align: left;
	background: url('images/promise_bg.png') repeat-x;
}
.carousel-item {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	padding-top: 70px;
	opacity: 0;
	transform: translateX(80px);
	transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.carousel-item img {
	width: 186px;
	height: 204px;
}
.carousel-item span {
	display: block;
	text-align: center;
	margin-top: 10px;
	font-size: 1.2rem;
	font-weight: bold;
}

		

.prom_bullet {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2em;
}
.prom_bullet img {
	width: 50px;
	height: 50px;
}
.prom_more_text {
	margin-left: 20px;
	font-size: 1.1em;
}

/** MORE SERVICES ********/

.more_serv_bg {
	width: 100%;
	background: url('images/more-serv_bg.png') repeat-x;
	/*display: flex;*/
	justify-content: center;
	/*height: 270px;*/
}

.container_more_serv {
	width: 80%;
	/*margin: 0 auto;*/
	margin: -30px auto 0;
}
.header_more_serv {
	display: flex;
	align-items: center;
	font-size: clamp(1.3rem, 3vw, 4rem);
	/*font-size: 2rem;*/
	font-weight: 600;
}
.header_more_serv img {
	margin-right: 10px;
}
.services_more {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 20px;
}
.service-item {
	display: flex;
	align-items: center;
	font-size: 1.2em;
	/*text-align: center;
	justify-content: center;*/
}
.service-item img {
	margin-right: 10px;
}

/** CALL BACK HOME*********/
.home_callback_bg {
	width: 100%;
	/*background: url('images/callback_bg.png') repeat-x;*/
	/*display: flex;*/
	justify-content: center;
	background-color:#737373;
	/*height: 270px;*/
}

.home_callback_top {
	width: 100%;
	background: url('images/topper-wide.png');
	/* full with no cut off */
	background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	/*full with cutting off
	/*object-fit: cover;*/
    /*position: relative;
	object-position: center top;
    top: 0;*/
	height: 134px;
}

.home_callback_foot {
	width: 100%;
	background: url('images/footer-callback_bg.png') repeat-x;
	height: 109px;
}

.callback_header {
	/*background: url('images/callback_head.png') no-repeat;*/
	font-size: 2.5rem;
	/*width: 426px;*/
	height: 69px;
	/*padding-left: 55px;*/
	font-family: "Play", sans-serif;
	color: #eaeaea;
	/*font-size: 3rem;*/
	margin: 0 auto;
	text-align: center;
}

.callback_txt {
	font-size: 1.2rem;
	margin: 0 auto;
	text-align: center;
	margin-top: 10px;
}
/** TESTIMONIALS *******************/
.background-bar-grey {
	width: 75%;
	height: 58px;
	background: url('images/sep-line-grey.png') repeat-x;
}

.testimonial_txt_bar {
	background-color: #e2e2e2;
	padding: 20px;
	text-align: center;
	width: fit-content;
	/* margin-top: -29px; Half of background-bar height to overlay it */
	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 2.5em;
	color: #747474;
	margin-top: -75px;
}
.testimonials {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	text-align: center;
	font-size: 2rem;
	font-weight: bold;
}

.box-container {
	display: flex;
	gap: 20px;
	justify-content: center;
	width: 100%;
	overflow: hidden;
	padding-bottom: 20px;
}
.box {
	width: 30%;
	height: 200px;
	background: white; border-top: 10px solid #333; color: black;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	display: flex;
	/*align-items: center;
	justify-content: center;*/
	/*color: black;
	font-size: 1.2rem;*/
	opacity: 0;
	padding: 8px;
	transform: translateX(50px);
}

.large_txt {
	font-size: 8rem;
	max-width: 80%;
	font-family: "Courgette", cursive;
	color: black; 
	text-shadow: 2px 2px 4px #a7a7a7;
}

@media (max-width: 768px) {
	.full-screen-text {
		font-size: 1.5rem;
	}

	.logo_contain {
		display: none;

	}

	.logo_center {
		margin: 0 auto;
		display: flex;
		position: fixed;
		align-items: center;
		margin-left: 20%;
		background-image: url('images/logo_small.png');
		background-size: contain;
		background-repeat: no-repeat;
		width: 164px;
		height: 54px;
		z-index: 1001;
	}

	.header-text {
		margin-left: 0;
		padding: 0;
	}
	/*
	.home_serv_sep{
		display: none;
		
	}
	*/
	.home_serv_txt{
		display: none;
	}
	
	/*.home_services {
	width: 449px;
	height: 500px;
	background-image: url('images/services_home_sm.png');
	position: relative;
	overflow: hidden;
	}*/
	.box-container {
		flex-direction: column;
		align-items: center;
		
	}
	.box {
		width: 70%;
	}
	.box:nth-child(n+2) {
		display: none;
	}
	
	.services_more {
		grid-template-columns: 1fr;
	}
	
	.services_content-wrapper {
		flex-direction: column;
	}
	.promise_info {
		height: auto;
		margin-top: -100px;
	}
	
	.container_more_serv {
		margin: 20px auto;
	}
	
	
	
	.promise1 {
		margin-top: -60px;
	}
	
	.contact-section {
		font-weight: 100;
		font-size: .9em;
	}
	
	
	.foot_nav {
		display: none;
	}
	
	.foot_copy {
		font-size: .8em;
	}
	.foot_contain {
		width: 95%;
	}
	
	.foot_left h3 {
		font-size: 1em;
		
	}
	
	.footer_txt {
		display: none;
	}
}
@media (max-width: 480px) {
	.full-screen-text {
		font-size: 1.2rem;
	}
}

.header-container {
	display: flex;
	align-items: flex-start;
	width: 100%;
	padding-top: 20px;

	}
.logo_contain {
	width: 164px;
	height: 54px;
	background-image: url('images/logo_small.png');
	/*background-size: contain;*/
	background-repeat: no-repeat;
	position: fixed;
	margin-top: 5px;
}

.logo_contain_old {
	width: 273px;
	height: 156px;
	background-image: url('images/logo_head.png');
	/*background-size: contain;*/
	background-repeat: no-repeat;
	position: fixed;
	margin-top: 30px;
}

/********* HOME MID ****************/
.plumbing-section {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 60px;
}

.plumbing-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 80%;
  max-width: 1200px;
  gap: 40px;
}
.plumbing-left {
	
}

.plumbing-left,
.plumbing-right {
  flex: 1;
}

/* Center Divider */
.divider {
  width: 2px;
  background-color: #737373;
  border-radius: 2px;
}

/* --- Right Side --- */
.plumbing-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.statement {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
  border-bottom: 1px solid #b7b7b7;
}

.statement:last-child {
  border-bottom: none;
}

.statement img {
  width: 50px;
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
}

.statement p {
  margin: 0;
  line-height: 1.4;
  color: #737373;
  font-size: 1.2rem;
}

.statement .highlight {
  color: #0914a3;
  font-size: 1.4rem;
  font-weight: 600;
}

/* --- Carousel Area (Left) --- 
.home_services {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home_services .carousel-item {
  text-align: center;
  margin-bottom: 20px;
}

.home_services .carousel-item img {
  width: 100%;
  max-width: 350px;
  border-radius: 8px;
}

.home_services .carousel-item span {
  display: block;
  margin-top: 10px;
  color: #333;
  font-weight: 500;
}
*/

/* --- Responsive --- */
@media (max-width: 900px) {
  .plumbing-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .divider {
    display: none;
  }

  .statement {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .statement img {
    margin-bottom: 10px;
  }

  .statement p {
    text-align: center;
  }
}




/** GENERAL ************************/

.center_div {
	/*width: fit-content;*/
	margin: 0 auto;
	display: flex;
	align-items: center;
    flex-direction: column;
         
}

.head_separator {
	width: 100%;
	height: 14px;
	background-image: url('images/tophead_sep.png');
	background-repeat: repeat-x;
}


/** NAV ******************************/
		.nav {
            top: 0;
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            padding-left: 275px;
        }
        .nav ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
			margin-top: 38px;
        }
        .nav ul li {
            margin: 0 10px;
            position: relative;
            overflow: hidden;
			padding: 0 4px;
        }
        .nav ul li a {
            text-decoration: none;
            color: white;
            font-size: 18px;
            font-weight: bold;
            position: relative;
            display: inline-block;
            padding: 10px 6px;
            transition: color 0.3s ease-in-out;
            z-index: 1;
        }
        .nav ul li a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 0;
            background: white;
            transition: height 0.3s ease-in-out;
            z-index: -1;

			
        }
        .nav ul li:hover a::after {
            height: 80px;
		
        }
        .nav ul li:hover a {
            color: #1a3d6d;
		
        }
		
	.contact-icons {
            display: none;
            flex-direction: row;
			position: relative;
            gap: 1px;
        }
    .bx-menu
	,.bx-x{
      font-size: 45px;
      color: #fff;
    }
		
	.bxs-phone
	,.bxs-map{
      /*font-size: 25px;*/
      color: #fff;
		font-size: 20px;
            /*color: white;*/
    }
		
.top_head_txt{
			font-size: 14px;
            font-weight: bold;
			font-family: Verdana, Helvetica, sans-serif;
			
		}
		
		.menu-icon-main {
                display: none;
            }
		 /* Responsive Design */
        @media (max-width: 768px) {
            .nav ul {
                display: none;
                flex-direction: column;
                position: absolute;
                top: 40px;
                left: 0;
                background: #0914a3;
                width: 100%;
                text-align: left;
                padding-left: 20px;
            }
            .nav ul.show {
                display: flex;
            }
            .menu-icon-main {
                display: block;
                cursor: pointer;
				margin-top: 70px;
                width: 50px;
                height: 50px;
			
            }
            .header .right {
                display: none;
            }
            .contact-icons {
				display: flex;
				margin-right: 60px;
				margin-bottom: 20px;
            }
			.bxs-phone{
      font-size: 30px;
      color: #fff;
    }
        }

/***********CONTACT**************/
.contact-container {
  display: flex;
  gap: 40px;
  max-width: 1000px;
  margin: 60px auto;
  flex-wrap: wrap;
}

.contact-left,
.contact-right {
  flex: 1 1 20%;
}

.contact-left h2 {
  margin-bottom: 15px;
  color: #333;
}

.contact-left p {
  margin-bottom: 5px;
  line-height: 1.5;
  color: #555;
}

.contact-form {
  position: relative; /* Needed for overlay positioning */
  overflow: hidden;
  background-color: #f6f5f5;
  padding: 20px 30px 30px;
  /* REMOVE the old left border */
  /* border-left: 8px solid #0914a3; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
/*
.contact-form {
  background-color: #f6f5f5;
  padding: 20px 30px 30px;
  border-left: 8px solid #0914a3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 
}
*/

.contact-overlay {
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: 0;               /* stays attached to the left */
  width: 100%;           /* covers the full form when active */
  display: flex;
  z-index: 20;

  transform: translateX(-100%); /* hide fully to the left */
  transition: transform 0.7s ease-in-out;

  background: rgba(255, 255, 255, 0.92);
}

.overlay-bar {
  width: 8px;
  background-color: #0914a3;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
}

.overlay-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.contact-overlay.show {
  transform: translateX(0);
}


.contact-form h2 {
  margin-bottom: 20px;
  color: #333;
}

.contact-form label {
  display: block;
  margin-bottom: 6px;
  margin-top: 15px;
  font-weight: bold;
  color: #444;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

/* Responsive layout */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }
}

.envelope-success {
  text-align: center;
  padding: 40px;
}

.envelope-success i {
  font-size: 60px;
  color: #919090;
}

.tada {
  animation: tada 1s infinite;
}

.error-msg-contact {
  color: red;
  font-size: 0.875rem;
  margin-top: 5px;
}

@keyframes tada {
  0% { transform: scale(1); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
  100% { transform: scale(1); }
}

.envelope-success p {
  margin-top: 20px;
  font-size: 1.1em;
  color: #333;
}

/**************** ABOUT *********************/
.about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .about-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .about-item {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
            gap: 20px;
        }

        .about-icon {
            flex-shrink: 0;
            width: 130px;
            height: 130px;
        }

        .about-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .about-content {
            flex: 1;
        }

        .about-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin: 0 0 10px 0;
            color: #333;
        }

        .about-description {
            font-size: 1rem;
            line-height: 1.6;
            margin: 0;
            color: #666;
        }

        @media (max-width: 768px) {
            .about-item {
                flex-direction: column;
                text-align: center;
            }

            .about-icon {
                margin-bottom: 15px;
            }
        }

/***about contact block ******/
.aboutcontact-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
        }

        .aboutcontact-container {
            display: flex;
            gap: 100px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .aboutcontact-card {
            width: 350px;
            border: 3px solid #d0312e;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .aboutcontact-image {
            width: 350px;
            height: 206px;
            object-fit: cover;
            display: block;
        }

        .aboutcontact-content {
            background-color: white;
            padding: 20px;
            flex-grow: 1;
            display: flex;
            align-items: center;
        }

        .aboutcontact-text {
            font-size: clamp(0.8em, 2vw, 1.5em);
            line-height: 1.3;
            color: #333;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .aboutcontact-container {
                gap: 30px;
            }
            
            .aboutcontact-text {
                font-size: clamp(0.7em, 2.5vw, 1.5em);
            }
        }

        @media (max-width: 400px) {
            .aboutcontact-card {
                width: 100%;
                max-width: 350px;
            }
            
            .aboutcontact-image {
                width: 100%;
                height: auto;
                aspect-ratio: 350 / 206;
            }
        }

/*****old style ******
.aboutcontact-wrapper {
            max-width: 842px;
            margin: 0 auto;
            width: 100%;
        }

        .aboutcontact-container {
            position: relative;
            width: 100%;
            aspect-ratio: 842 / 346;
            background-image: url('images/about-contactblock.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
        }

        .aboutcontact-left,
        .aboutcontact-right {
            flex: 1;
            display: flex;
            align-items: center;
        }

        .aboutcontact-left {
            padding: 14.24% 11.88% 13.24% 13.06%;
        }

        .aboutcontact-right {
            padding: 10.61% 10.69% 13.24% 2.13%;
        }

        .aboutcontact-text {
            font-size: clamp(0.8em, 2vw, 1.7em);
            line-height: 1.3;
            color: #333;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .aboutcontact-text {
                font-size: clamp(0.6em, 2.5vw, 1.7em);
            }
        }

        @media (max-width: 480px) {
            .aboutcontact-container {
                flex-direction: column;
            }
            
            .aboutcontact-left,
            .aboutcontact-right {
                flex: none;
                min-height: 50%;
            }
        }
*/
/********** SERVICES *********************/
.servpage-list {
            list-style: none;
            padding: 0;
            margin: 12px 0;
        }

        .servpage-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 12px;
            padding-left: 15px;
        }

        .servpage-bullet {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            margin-right: 10px;
            margin-top: 2px;
        }

        .servpage-bullet img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .servpage-text {
            flex: 1;
            line-height: 1.3;
            color: #333;
			font-size: 1.2em;
        }

.services_img img {
  max-width: 100%; /* Ensures the image doesn't exceed its container's width */
  height: auto;    /* Maintains the image's aspect ratio */
  display: block;  /* Prevents extra space below the image */
}

/*******testimonial*************/
.left-content::after {
    content: "";
    clear: both;
    display: table;
  }

.right-floated-div {
    width: 420px;
    height: 560px;
    float: right;
    margin-left: 20px; 
    margin-bottom: 20px; 
    
  }

.test-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.test-left {
	flex: 1;
	min-width: 300px;
	padding: 20px;
}

.test-right {
	width: 400px;
	padding: 20px;
}

@media (max-width: 768px) {
	.test-left {
		order: 1;
		width: 100%;
	}

	.test-right {
		order: 2;
		width: 100%;
	}
}
.box-testimonial {
	background: white; border-top: 10px solid #333; color: black;
	border-radius: 0 0 10px 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
	padding: 8px 8px 20px;
	margin-bottom: 20px;
}

.test-card {
            width: 400px;
            border: 3px solid #d0312e;
            border-radius: 0 0 15px 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .test-image {
            width: 400px;
            height: 267px;
            object-fit: cover;
            display: block;
        }
/******************** NEW FORM *******************/
.form-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
        }

        .form-border {
            position: absolute;
            left: 0;
            top: -20px;
            bottom: -20px;
            width: 8px;
            background-color: #0914a3;
            z-index: 3;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: left 0.8s ease-in-out;
        }

        .form-border.sending {
            left: calc(100% - 8px);
        }

        .form-wrapper {
            background-color: white;
            padding: 40px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        h2 {
            margin-bottom: 30px;
            color: #333;
        }

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

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            font-family: Arial, sans-serif;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        textarea:focus {
            outline: none;
            border-color: #0914a3;
        }

        input[type="text"].error,
        input[type="email"].error,
        textarea.error {
            border-color: #dc3545;
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .error-message {
            color: #dc3545;
            font-size: 13px;
            margin-top: 5px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        button[type="submit"] {
            background-color: #0914a3;
            color: white;
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button[type="submit"]:hover {
            background-color: #06107a;
        }

        button[type="submit"]:disabled {
            background-color: #6c757d;
            /*cursor: not-allowed;*/
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 2;
        }

        .overlay.show {
            display: flex;
        }

        .overlay i {
            font-size: 80px;
            color: #0914a3;
            margin-bottom: 20px;
            animation-duration: 1s;
            opacity: 0;
            transition: opacity 0.5s ease-in;
        }

        .overlay i.fade-in {
            opacity: 1;
        }

        .overlay-text {
            font-size: 18px;
            color: #333;
            text-align: center;
            padding: 0 20px;
            opacity: 0;
            transition: opacity 0.5s ease-in;
        }

        .overlay-text.fade-in {
            opacity: 1;
        }

        .sending-text {
            font-size: 20px;
            font-weight: 500;
        }

        .success-text {
            font-size: 16px;
            line-height: 1.6;
        }
/* TEXT ********************************/

a.whitelink { color: #FFFFFF; text-decoration: none; }
a.whitelink:visited { COLOR: #FFFFFF; text-decoration: none; }
a.whitelink:hover { COLOR: #CCCCCC; text-decoration:none; }

a.greylink { color: #AEADAD; text-decoration: none; }
a.greylink:visited { COLOR: #AEADAD; text-decoration: none; }
a.greylink:hover { COLOR: #0914a3; text-decoration:none; }

a.bluelink { color: #0914a3; text-decoration: none; }
a.bluelink:visited { COLOR: #0914a3; text-decoration: none; }
a.bluelink:hover { COLOR: #040a58; text-decoration:none; }

p {
	margin: 1px 0;
	font-size: 1.5em;
	color: #5b5b5b;
}

p.footer_txt {
	margin: 1px 0;
	font-size: 1em;
}

h2 {
  	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 2.4em;
	margin: 8px 0;
	
}

h3 {
  	font-family: "Play", sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	margin: 2px 0;
	
}

.courgette-regular {
  font-family: "Courgette", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  color: #747474;
	  /*#464646;*/
}

.txt_light_grey {
	color: #cbcaca;
}

.txt_white {
	color: #fff;
}

.txt_align {
	vertical-align:middle;
}
.txt_larger {
	font-size: 30px;
	text-align: center;
}
.play-regular {
  font-family: "Play", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.play-bold {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.txt_blue {
	color: #0914a3;
}

p.tbox {
	font-family: Arial;
	font-size: 1.4em;
	/*display: inline-block;*/
  /*vertical-align: top;*/
}

@media (max-width: 768px) {
            .courgette-regular {
                font-size: 1.5rem;
            }
	
	.callback_header{
		font-size: 1.5rem;
	}
        }
      

/* FORM *************************/
.bluebutton {
  background-color: #0914a3;
  color: #fff;
  font-weight: bold;
  border: 1px solid #000000; 
  font-family: Arial;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  padding: 10px;
  
}
.bluebutton:hover {
  background-color: #040a57; 
  color: #fff;
}

.input_callback {
  border: 1px solid #5b5b5b;
  border-radius: 5px;
  width: 250px;
  height: 40px;
 padding-left: 4px;
 margin-bottom: 16px;
	font-size: 16px;
	  
}

.error {
	/*color: red;*/
	color:#9b0d0a;
	font-size: 12px;
	display: block;
	text-align: left;
	font-weight:bold;
}
.input-error {
	border: 1px solid red !important;
}

.my_flex {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

@media screen and (max-width: 700px) {
            .input_callback {
                width: 100px;
            }
            
        }