/*(2025) TEMPLATE C ;

FONTS TAKEN FROM GOOGLE FOR REF 
#72b62b - main green RGB 114, 182, 43
#c7c7c6 - grey
#cbbba0 - brown fence
#356a2c - dark green
#d2c6aa - stone
#eeebdd - light stonr
#6f6f6f - darkgrey
colors:

*/


html {scroll-behavior: smooth;}

html,


body{ font-family: 'Segoe UI', sans-serif;   font-weight: 400; height: 100%; }

h1 { margin-top: 15px; margin-bottom: 15px; font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; font-size: 30px;  line-height: 30px; }
	
h2 { margin-bottom: 10px; margin-top: 30px; font-size: 1.4em; font-family: 'Roboto', sans-serif; font-weight: 500; font-style: normal;  line-height:30px; }

h3 { font-size: 1.5em; font-family: 'Roboto', sans-serif;  font-weight: 300; font-style: normal;  }

h4 { font-size: 1.3em; font-family: 'Roboto', sans-serif;  font-weight: 300; font-style: normal; }

h5 {font-size: 1.2em; font-family: 'Roboto', sans-serif; font-style: normal; }

h6 {font-size: 1.0em; font-family: 'Roboto', sans-serif;  font-weight: 300; font-style: italic;}

p { font-size: 1.0em;   font-family: 'Segoe UI', sans-serif; line-height: 30px; font-style: normal;} } 




img { max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/
 
 
p.card-text{ font-size: 0.8em;  line-height: 30px; font-style: normal;}

/* **********LINKS *******************/

a:link {
  color: #FFFFFF; /* Default link color */
  text-decoration: none; /* Remove underline */
  transition: color 0.6s ease-in-out;
}

/* Visited link */
a:visited {
  color: #FFFFFF; /* Ensures visited links stay white */
}

/* Mouse over link */
a:hover {
  color: #72b62b; /* Hover effect */
}

/* Selected (clicked) link */
a:active {
  color: #72b62b; /* Keeps the same color as hover */
}

 
 

/* **********  Settings for Horizontal Lines   *******************/
 
 hr {width: 50%;						
    height:1px;
	background-color:#FFF;
	}
	
/* horizontal line which would use class long*/   
hr.long {width: 75%;
        height:2px;
		background-color:#772023;
	}
	
/* vertical line which runs alongside text*/  
.va {
  border-left: 6px solid lightgrey;
  height: 150px;
	}
	

/* **********BUTTONS*************************************************************************************************************************************************/	
	
.discover-button {
    display: inline-block;
    font-family: 'Arial', sans-serif; /* Or any clean sans-serif font */
    font-weight: bold;
    text-transform: uppercase; /* Make text all caps */
    text-align: center;
    padding: 15px 40px; /* Adjust padding for size */
    font-size: 16px; /* Adjust font size */
    color: #000; /* Initial text color */
    text-decoration: none; /* Remove underline */
    background: #72b62b; /* Solid initial background */
    border: 1px solid #fff; 
    position: relative; /* Makes this element a stacking context */
    overflow: hidden; /* Ensures hover effect stays within bounds */
    transition: color 0.3s ease; /* Smooth transition for text color */
    z-index: 0; /* Ensure proper stacking */
}

.discover-button::before {
    content: '';
    position: absolute;
    top: 100%; /* Start below the button */
    left: 0;
    width: 100%;
    height: 100%;
    background: #cbbba0; /* Hover background color */
    z-index: -1; /* Push the hover effect behind the button content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.discover-button:hover::before {
    transform: translateY(-100%); /* Move the hover background into view */
}

.discover-button:hover {
    color: #000; /* Change text color on hover */
}

/* **********BUTTONS************************/	

.discover-button-small {
    display: inline-block;
    font-family: 'Arial', sans-serif; /* Or any clean sans-serif font */
 
    text-transform: uppercase; /* Make text all caps */
    text-align: center;
    padding: 15px 30px; /* Adjust padding for size */
    font-size: 12px; /* Adjust font size */
    color: #000; /* Initial text color */
    text-decoration: none; /* Remove underline */
    background: #356a2c; /* Solid initial background */
    border: 1px solid #fff; 
    position: relative; /* Makes this element a stacking context */
    overflow: hidden; /* Ensures hover effect stays within bounds */
    transition: color 0.3s ease; /* Smooth transition for text color */
    z-index: 0; /* Ensure proper stacking */
}

.discover-button-small::before {
    content: '';
    position: absolute;
    top: 100%; /* Start below the button */
    left: 0;
    width: 100%;
    height: 100%;
    background: #cbbba0; /* Hover background color */
    z-index: -1; /* Push the hover effect behind the button content */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}

.discover-button-small:hover::before {
    transform: translateY(-100%); /* Move the hover background into view */
}

.discover-button-small:hover {
    color: #000; /* Change text color on hover */
}

/*****************for the swiper carousel which you use via a javascript*/
.swiper-slide img {
  width: 100%;
  border-radius: 10px;
}



/*had to use important to overwrite swipers existing built in css*/

/* Make Swiper navigation arrows white (works for SVG backgrounds!) */
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
  fill: #fff !important;
}

/* The SVG background for arrows needs filter to go white */
.swiper-button-next::after,
.swiper-button-prev::after {
  color: #fff !important;
  filter: brightness(0) invert(1);
  /* If you want them even bigger: */
  font-size: 32px !important;
}

/* Make Swiper pagination dots white */
.swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
  background: #fff !important;
  opacity: 1 !important;
}

/* hover effects if yu want to use:*/
/*
.swiper-slide img {transition: transform 0.9s ease;}
.swiper-slide:hover img {transform: scale(1.3);}

*/

/*****************card variations*/
 .card-body {
        display: flex;
        flex-direction: column;
    }



.card {
    position: relative; /* Ensures the card is the positioning context */
}

.overlay-image {
    position: absolute;
    bottom: 10px; /* Adjust positioning as needed */
    right: 10px; /* Adjust positioning as needed */
    z-index: 2; /* Ensure it stays above other card elements */
    width: 50px; /* Adjust size as needed */
    pointer-events: none; /* Prevent interaction with the overlay image */
}

.img-hover-zoom img {
    transition: transform 0.3s ease; /* Existing zoom effect */
}

.img-hover-zoom:hover img {
    transform: scale(1.1); /* Apply zoom only to this container’s image */
}


/* **********MODALS*************************************************************************************************************************************************/



.custom-modal p {
    font-size: 14px; /* Adjust paragraph font size */
    line-height: 2.0; /* Adjust line spacing for readability */
}

.custom-modal h1 {
    font-size: 32px; /* Adjust font size for h1 */
    font-weight: bold; /* Optional: Adjust font weight */
    margin-bottom: 20px; /* Optional: Add spacing below */
}

.custom-modal h2 {
    font-size: 28px; /* Adjust font size for h2 */
    font-weight: bold;
    margin-bottom: 15px;
}

.custom-modal h3 {
    font-size: 24px; /* Adjust font size for h3 */
    font-weight: bold;
    margin-bottom: 10px;
}


.center-title {
    margin: 0 auto; /* Centers the element horizontally */
    text-align: center; /* Ensures text content inside is centered */
    flex: 1; /* Allows it to take up the remaining space */
}






/* **********Accordion*************************************************************************************************************************************************/




/* Accordion container (optional, adds overall structure) */
.accordion {
  background-color: #eeebdd;
}

/* Accordion item with soft shadow */
.accordion-item {
  background-color: #f5f3e7; /* Slightly lighter for contrast */
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Soft shadow */
  margin-bottom: 0.75rem;
  border-radius: 0.35rem;
  overflow: hidden;
}



.accordion-button {
  font-size: 1rem;
  font-style: normal;
  border: none;
  box-shadow: none;
  color: #000 !important;
  background-color: #f5f3e7; /* Match item bg */
  transition: all 0.2s ease;
  white-space: normal; /* Allows text wrapping */
  align-items: center; /* Fixes vertical spacing */
  line-height: 1.4; /* Adjust line height */
  padding-top: 0.75rem;  /* Reduce top padding slightly */
  padding-bottom: 0.75rem; /* Reduce bottom padding slightly */
}


/* Remove focus ring */
.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Expanded state */
.accordion-button:not(.collapsed) {
  background-color: #e8e6d5; /* Slightly darker for contrast */
}

/* Hover effect */
.accordion-button:hover {
  color: #f7e761;
  background-color: #eae7d7; /* A gentle hover background */
}

/* Accordion body */

.accordion-body {
  text-align: left; /* Make sure the text is aligned to the left */
  padding: 1rem 1.25rem;
  background-color: #fdfcf8;
  color: #000;
}


.accordion-button,
.accordion-body {
  font-family: 'Segoe UI', sans-serif; /* Replace with your preferred font */
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}



.accordion-header {
  margin: 0 !important;
}

/* **********NAVBAR*************************************************************************************************************************************************/


.navbar{ 
font-family: 'Oswald', sans-serif;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
}

/* Modify the background color of the navbar */


.navbar-custom {
    background-color: rgb(252, 253, 249, 0.8); /* Initial transparent background */
    transition: background-color 0.3s ease-in-out; /* Smooth transition */
	padding: 5px 0; /* Default padding for large navbar */
}


/*specifies the colour of nav-link which is contained in nav-item, nav and navbar*/
.navbar .navbar-nav .nav-item .nav-link {color:#000;}
.navbar .navbar-nav .nav-item .nav-link:hover {color:#72b62b;} 

.navbar-toggler {
    background-color: white; /* Black background for the toggle button */
    border: none; /* Removes any default border */
    outline: none; /* Removes the focus outline */
}

.navbar-toggler-icon {
    background-image: 
        linear-gradient(#72b62b, #72b62b), 
        linear-gradient(#356a2c, #356a2c), 
        linear-gradient(#72b62b, #72b62b);
    background-size: 20px 2px; /* Width and height of each line */
    background-position: center, center, center;
    background-repeat: no-repeat;
    background-position: 50% 20%, 50% 50%, 50% 80%; /* Positioning of each line */
}
 
.navbar-toggler:focus {
    box-shadow: none; /* Optional: Removes the shadow that appears on focus */
}
 
 
 /* Default navbar styles 
 
CSS for Shrink Effect: - Define a smaller size for the navbar and logo when the user scrolls. */
 
 
#mainNavbar {
    transition: all 0.3s ease-in-out; /* Smooth shrinking */
    padding: 1px 0; /* Default padding */
    	background-color: rgb(252, 253, 249, 1); /* Slightly transparent */
}

.navbar-shrink {
    background-color: rgb(252, 253, 249,1); /* Solid background */
    padding: 0px 0; /* Smaller padding on scroll */
}

.navbar-logo {
    width: 150px; /* Default logo size */
    transition: all 0.3s ease-in-out;
}

.navbar-shrink .navbar-logo {
    width: 150px; /* Shrunk logo size - not shrinking on small phones and up to 767 */
}


 /* **********FADES*************************************************************************************************************************************************/
 
 
 /* Initial state - elements are hidden */
.fade-in {
    opacity: 0;
    transform: translateY(20px); /* slight slide-up effect */
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

/* Fade-in effect when the element becomes visible */
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

 
 .list-custom {
    list-style: none; /* Completely removes default bullets */
    padding-left: 0; /* Removes padding to align with text */

}
 
 

    .list-custom li {
        margin-bottom: 0.75rem; /* Consistent spacing between items */
        font-size: 1.1rem; /* Match the surrounding paragraph text size */
        line-height: 1.6; /* Consistent line spacing */
    }
	
	


 
 
 /* **********CAROUSEL********************************************************************************************************************************************
 
 .carousel-inner img {
   height: 100%;   
   width: auto;   
 
.bg-custom-grey {background-color: #000;}
.thick-border {border: 3px solid #000; /* Adjust thickness and color as needed */}
 

 /* **********SETUPS************************************************************************************************************************************************/
 
 
.setupa {                        /*centres the text in the middle of the screen*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.setupb {                        /*centres the text in the middle of the screen*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}


.standard{       
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0rem;
padding-right: 0rem;
text-align: center;
}

.standard1{       
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 0rem;
padding-right: 0rem;
}

.standardpage{   
padding-top: 8rem;
padding-bottom: 4rem;
padding-left: 2rem;
padding-right: 2rem;
}

.standardpage1{   
padding-top: 1rem;
padding-bottom: 2rem;
padding-left: 0px;
padding-right: 0px;
}

.rightleftpadding{

padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 1rem;
padding-right: 1rem;	
	
}


/*these are used with 3 columns and trying to get them to alling properly */

.intercolumnL
{ padding-left: 0rem; padding-right: 0rem; }

.intercolumnM
{ padding-left: 0rem; padding-right: 0rem; }

 .intercolumnR
{ padding-left: 0rem; padding-right: 0rem; }

 
.left {text-align: left;}
 
.right{ text-align: right;}
 
.justify {text-align: justify;}

.center {text-align: center;}


.colorbg1 {						/*use to change the background*/
background-color:#72b62b;
color:#FFF;
}

.colorbg2 {						/*use to change the background*/
background-color:#356a2c;
color:#fff;
}

.colorbg3 {						/*use to change the background*/
background-color:#fff;
color:#000;
}

.colorbg4 {						/*use to change the background*/
background-color:#eeebdd;
color:#000;
}

.colorbg5 {						/*use to change the background*/
background-color:#6f6f6f;
color:#000;
}





.float{                    /*this is the float for the whatsapp*/
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size:30px;
	box-shadow: 2px 2px 3px #999;
    z-index:100;
}

.my-float{				/*this is the float for the whatsapp*/
	margin-top:16px;
}



.minicover{ /*this is like cover except it covers only half a page*/ 
background:url('../img/cover1.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
background-size:cover; /*used to cover the entire page*/
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
background-position: center;
background-repeat: no-repeat;
}

.minicover1{
background:url('../img/cover1.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
background-size:cover; /*used to cover the entire page*/
background-position: center;
background-repeat: no-repeat;
min-height:50%;
display:flex;
}


 /*we use this when trying to confuse bots about email or something */
span.blockspam {display: none;}


.image {
display: block;
width: 100%;
height: auto;
}



 /*cover and carousel - edited for a seamless fade */ 

/* ─── Cover & Carousel Container ───────────────────────────────────────────── */
#cover {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  /* no background-color here */
}

#heroCarousel {
  position: absolute;
  inset: 0;               /* top:0; left:0; right:0; bottom:0; */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* no background-color here */
}

/* ─── Make sure the inner and items fill the viewport ───────────────────────── */
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
  width: 100%;
  height: 100vh;
}

/* ─── Bootstrap’s built‑in fade rules ───────────────────────────────────────── */
#heroCarousel.carousel-fade .carousel-item {
  position: absolute;     /* stack all slides on top of each other */
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  /* no background-color */
}

#heroCarousel.carousel-fade .carousel-item.active,
#heroCarousel.carousel-fade .carousel-item-next.carousel-item-start,
#heroCarousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
}

/* ─── Image Styling ─────────────────────────────────────────────────────────── */
#heroCarousel .carousel-item img {
  object-fit: cover;
  width: 100%;
  height: 100vh;
  display: block;
}







/* Overlay for text and button */
.carousel-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 2;
}

/* Chevron Container */
.chevron-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
    z-index: 3;
}





/* General Carousel - Used across multiple pages */
#generalCarousel .carousel-inner img {
    height: 300px; /* Adjust as needed */
    object-fit: cover;
    width: 100%;
    transition: transform 0.2s ease; /* Smooth zoom effect */
}

/* Image hover zoom effect */
#generalCarousel .carousel-inner img:hover {
    transform: scale(1.05);
}

/* Ensure normal Bootstrap behavior for general carousel */
#generalCarousel .carousel-item {
    transition: none !important;
    position: relative;
    opacity: 1;
}



 /*cover and carousel */ 





	#cover_aboutus {
    margin-top: 40px;
	background: url('../img/covers/Aboutus.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_services {
    margin-top: 40px;
	background: url('../img/covers/about.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_portfolio{
    margin-top: 40px;
	background: url('../img/covers/portfolio.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 80vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	
	#cover_getintouch {
    margin-top: 40px;
	background: url('../img/covers/getintouch.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_faq {
    margin-top: 40px;
	background: url('../img/covers/faq.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 60vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
		
	#cover_serviceareas {
    margin-top: 40px;
	background: url('../img/covers/serviceareas.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
		
	#cover_fencing {
    margin-top: 40px;
	background: url('../img/covers/fencingcover.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_decking {
    margin-top: 40px;
	background: url('../img/covers/deckingcover.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_driveway {
    margin-top: 40px;
	background: url('../img/covers/drivewaycover.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_artlawns {
    margin-top: 40px;
	background: url('../img/covers/art_lawns.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_compdecking {
    margin-top: 40px;
	background: url('../img/covers/compdecking.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_compfencing {
    margin-top: 40px;
	background: url('../img/covers/composite_fencing.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_decpaving {
    margin-top: 40px;
	background: url('../img/covers/decpaving.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_lighting {
    margin-top: 40px;
	background: url('../img/covers/lighting.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_turfing {
    margin-top: 40px;
	background: url('../img/covers/turfingnew.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_patios {
    margin-top: 40px;
	background: url('../img/covers/patio_large.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_pergolas {
    margin-top: 40px;
	background: url('../img/covers/gazebo.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_planting {
    margin-top: 40px;
	background: url('../img/covers/gardening.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_winter {
    margin-top: 40px;
	background: url('../img/covers/winterservices.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_walls {
    margin-top:40px;
	background: url('../img/covers/walls_cladding.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_drainage{
    margin-top: 40px;
	background: url('../img/covers/drainage.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_bespoke{
    margin-top: 40px;
	background: url('../img/covers/bespoke.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_companies{
    margin-top: 40px;
	background: url('../img/covers/companies.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	#cover_retail{
    margin-top: 40px;
	background: url('../img/covers/retail.jpg') center center no-repeat;
    background-size: cover;
    height: 100%;
    display: flex;
    justify-content: center; /* Align horizontal */
    align-items: center; /* Align vertical */
	height: 70vh;
    position: relative; /* Make the #cover a relative parent for absolute positioning */
    color: #fff;
	}
	
	

	
	

	
	

.content {
    z-index: 1; /* Ensures your content stays on top of the video */
    text-align: center;}







#footer{
		padding-top: 2rem;
		padding-bottom: 2rem;
		padding-left: 1rem;
		padding-right: 1rem;
		background-color:#356a2c ;
		}

#footerbottom{
			padding:0rem;
			background-color:#000 ;
			color:#fff;
			}

@media (min-width: 576px) {
	
	
		h1 { margin-top: 15px; margin-bottom: 15px; font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; font-size: 50px;  line-height: 50px; }
			
		h2 { margin-bottom: 10px; margin-top: 1px;  font-size: 2.2em; font-family: 'Roboto', sans-serif; font-weight: 500; font-style: normal;  line-height: 50px; }

		h3 { font-size: 1.5em; font-family: 'Roboto', sans-serif;  font-weight: 300; font-style: normal;  }

		h4 { font-size: 1.6em; font-family: 'Roboto', sans-serif;  font-weight: 100; font-style: normal; }

		h5 {font-size: 1.2em; font-family: 'Roboto', sans-serif; font-style: normal;}

		h6 {font-size: 1.0em; font-family: 'Roboto', sans-serif;  font-weight: 300; font-style: italic;}

		p { font-size: 1.0em;  line-height: 30px; font-style: normal;} 

		img { max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/
		 
		 
		.standard{   
		padding-top: 4rem;
		padding-bottom: 4rem;
		padding-left: 2rem;
		padding-right: 2rem;
		text-align: left;
		}	


		.standard1{       
		padding-top: 1rem;
		padding-bottom: 1rem;
		padding-left: 1rem;
		padding-right: 1rem;

		}
			

		.standard{       
			padding-top: 3rem;
			padding-bottom: 1rem;
			padding-left: 1rem;
			padding-right: 1rem;
			text-align: center;
			}



}

@media (min-width: 768px) 
{


							#cover {margin-top: 30px;}



							#mainNavbar {
								transition: all 0.3s ease-in-out; /* Smooth shrinking */
								background-color: rgb(252, 253, 249,0.7); /* Slightly transparent */
							}

							.navbar-shrink {
								background-color: rgb(252, 253, 249, 1) !important; /* Solid background */
								padding: 5px 0; /* Smaller padding on scroll */
							}

							.navbar-logo {
								width: 400px; /* Default logo size */
								transition: all 0.3s ease-in-out;
							}

							.navbar-shrink .navbar-logo {
								width: 200px; /* Shrunk logo size */
							}

					

							.navbar-custom {
							background-color: rgba(252, 253, 249, 0.7); /* Initial transparent background */ )
							transition: background-color 0.3s ease-in-out; /* Smooth transition */
							padding: 5px 0; /* Default padding for large navbar */
							}

							.standardpage{   
							padding-top: 10rem;
							padding-bottom: 4rem;
							padding-left: 2rem;
							padding-right: 2rem;
							}

							.standardpage1{   
							padding-top: 4rem;
							padding-bottom: 4rem;
							padding-left: 2rem;
							padding-right: 2rem;
							}
							
						

						.rightleftpadding{
							padding-left: 3rem;
							padding-right: 3rem;	
					
						}

						 /* Default navbar styles 
						 
						CSS for Shrink Effect: - Define a smaller size for the navbar and logo when the user scrolls. */
						 
						 
						#mainNavbar {
							transition: all 0.3s ease-in-out; /* Smooth shrinking */
							padding: 5px 0; /* Default padding */
								background-color: rgb(252, 253, 249, 0.7); /* Slightly transparent */
						}

						.navbar-shrink {
							background-color: rgb(252, 253, 249,1); /* Solid background */
							padding: 5px 0; /* Smaller padding on scroll */
						}

						.navbar-logo {
							width: 200px; /* Default logo size */
							transition: all 0.3s ease-in-out;
						}

						.navbar-shrink .navbar-logo {
							width: 150px; /* Shrunk logo size */
						}
										
											
			 


				

}



/* medium and up screens 992 and above */
@media (min-width: 992px) {


			body{ font-family: "Roboto", sans-serif;  font-weight: 400; height: 100%; }

			h1 { font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; font-size: 50px;  line-height: 50px; }
				
			h2 { font-size: 1.4em; font-family: 'Roboto', sans-serif; font-weight: 500; font-style: normal;  line-height: 50px; }

			h3 { font-size: 1.5em; font-family: 'Roboto', sans-serif;   font-weight: 300; font-style: normal;  }

			h4 { font-size: 1.2em; font-family: 'Roboto', sans-serif;  font-weight: 100; font-style: normal; }

			h5 {font-size: 1.2em; font-family: 'Roboto', sans-serif; font-style: normal;}

			h6 {font-size: 1.0em; font-family: 'Roboto', sans-serif; font-weight: 300; font-style: italic;}

			p { font-size: 1.0em;  line-height: 30px; font-style: normal;} 

 
			 .carousel-inner img {
				width: 100%;    /* Ensures the image covers the full width of its container */
			   height: auto;   /* Maintains aspect ratio */
			}

			.standard{   
			padding-top: 4rem;
			padding-bottom: 4rem;
			padding-left: 2rem;
			padding-right: 2rem;
			}

			.standardpage{   
			padding-top: 16rem;
			padding-bottom: 4rem;
			padding-left: 2rem;
			padding-right: 2rem;
			}

			.intercolumnL
			{ padding-left: 0rem; padding-right: 2rem; }

			.intercolumnM
			{ padding-left: 2rem; padding-right: 2rem; }

			 .intercolumnR
			{ padding-left: 2rem; padding-right: 0rem; }


			.minicover{
			background:url('../img/cover1.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
			background-size:cover; /*used to cover the entire page*/
			height:50%;
			display:flex;
			justify-content: center; /* align horizontal */
			align-items: center; /* align vertical */
			background-position: center;
			background-repeat: no-repeat;
			}

			.minicover1{
			background:url('../img/cover1.jpg') center center no-repeat;/*Image we display in the header - top part of the webapge*/
			background-size:cover; /*used to cover the entire page*/
			background-position: center;
			background-repeat: no-repeat;
			min-height:50%;
			display:flex;
			}
			
			
			#footer{
		padding-top: 2rem;
		padding-bottom: 2rem;
		padding-left: 6rem;
		padding-right: 6rem;
	
		}
		
		#footerbottom{
			padding:6rem;
			
			}

}


/* large and up screens 1400 and above */
@media (min-width: 1200px) {

	
			body{ font-family: "Roboto", sans-serif;  font-weight: 400; height: 100%; }

			h1 { margin-bottom: 25px; font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; font-size: 60px; line-height: 70px; }
				
			h2 { font-size: 2.0em; font-family: 'Oswald', sans-serif;  font-weight: 500; font-style: normal;  line-height: 50px; }

			h3 { font-size: 1.8em; font-family: 'Oswald', sans-serif;   font-weight: 600; font-style: normal;  }

			h4 { font-size: 1.6em; font-family: 'Roboto', sans-serif;  font-weight: 500; font-style: normal; }

			h5 {font-size: 1.2em; font-family: 'Roboto', sans-serif; font-style: normal;}

			h6 {font-size: 1.1em; font-family: 'Roboto', sans-serif; font-weight: 300; font-style: italic;}

			p { font-size: 1.0em;  line-height: 35px; font-style: normal;} 

			img { max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/
	
	
	.rightleftpadding{
	
padding-left: 8rem;
padding-right: 8rem;	
	
}
	
}





/* large and up screens 1400 and above */
@media (min-width: 1400px) {

	
			body{ font-family: "Roboto", sans-serif;  font-weight: 400; height: 100%; }

			h1 { margin-bottom: 45px; font-family: 'Oswald', sans-serif; font-weight: 700; font-style: normal; font-size: 70px; line-height: 100px; }
				
			h2 { font-size: 2.0em; font-family: 'Oswald', sans-serif;  font-weight: 500; font-style: normal;  line-height: 50px; }

			h3 { font-size: 1.8em; font-family: 'Oswald', sans-serif;   font-weight: 600; font-style: normal;  }

			h4 { font-size: 1.6em; font-family: 'Roboto', sans-serif;  font-weight: 500; font-style: normal; }

			h5 {font-size: 1.2em; font-family: 'Roboto', sans-serif; font-style: normal;}

			h6 {font-size: 1.3em; font-family: 'Roboto', sans-serif; font-weight: 300; font-style: italic;}

			p { font-size: 1.2em;  line-height: 35px; font-style: normal;} 

			img { max-width: 100%;  }  /*-Seems required to get images to fit into album boxes*/
			
			
			
			#cover_aboutus { margin-top: 0px};
			#cover_bespoke{margin-top: 0px;}
			#cover_drainage{margin-top: 0px;}
			#cover_walls{margin-top: 0px;}
			#cover_winter{margin-top: 0px;}
			#cover_planting{margin-top: 0px;}
			#cover_pergolas{margin-top: 0px;}
			#cover_patios {margin-top: 0px;}
			#cover_turfing{margin-top: 0px;}
			#cover_lighting{margin-top: 0px;}
			#cover_decpaving{margin-top: 0px;}
			#cover_compfencing{margin-top: 0px;}
			#cover_compdecking{margin-top: 0px;}
			#cover_artlawns{margin-top: 0px;}
			#cover_driveway{margin-top: 0px;}
			#cover_decking{margin-top: 0px;}
			#cover_fencing{margin-top: 0px;}
			#cover_serviceareas{margin-top: 0px;}
			#cover_faq{margin-top: 0px;}
			#cover_getintouch{margin-top: 0px;}
			#cover_portfolio{margin-top: 0px;}
			#cover_services{margin-top: 0px;}
	
}