@charset "UTF-8";



/*
Theme Name:A1 Landscaping
Theme URI: www.a1landscapes.info
Description: Custom
Author: A1 Landscapes
Author URI: www.a1landscapes.info
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html





*/




/*  1.RESET
	2.GLOBAL Styles
2a Buttons
	3.GRID
	4.TYPOGRAPHY
	5.HEADER GRID ITEMS
		LOGO
		NAV
	6.FEATURED GRID ITEMS
	7.CALL TO ACTION FOR
	 */

	 
	 
	 /* RESET */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;vertical-align: baseline;}
body {  -webkit-font-smoothing: antialiased;}
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

.a1-landscapes-logo {width:306px; height:77px; margin:0 auto;}
/*

 7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}



/*
  8. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}





	 
/* Global  */ .red {color: #f53240;} .ac {text-align: center;} .center { display:flex; align-self: center; justify-content: center;align-items: center; align-content: center;} 
.blue {background-color: #D2F47A;}/* #88D4F2 */
.pink {background-color: #ef3df2!important}
.grey {background-color: #f5f3f3;}
.yellow{background-color: #f9ce68;}

 /* 	TYPOGRAPHY   */
body {font-family: 'Open Sans', sans-serif; font-size: 100%; line-height: 1.618;}h1 { font-size: 2.618em;  /* 16x2.25=36 */  line-height: 1.25;margin-bottom:0.5em; }h2 { font-size: 1.5em;   /* 16x1.5=24 */  line-height: 1.15384615; margin: 0.9em 0 1em 0;  margin-bottom: 0.382em; }h3 { font-size: 1.125em; /* 16x1.125=18 */   line-height: 1.13636364; margin-bottom: 0.6em; margin-top: 1.5em;}h4 { font-size: 0.875em; /* 16x0.875=14 */  line-height: 1.11111111;}p, address, li  { font-size: 1em;  /* 16x0.75=12 */   margin-top: 0.32em; line-height: 1.68; margin-bottom: 1.68em; } h1, h2, h3, h4, h5 {font-family: 'Red Hat Display', sans-serif;} ul { margin-top: 0.32em; line-height: 1.68; margin-bottom: 1.68;}
 p, h1, h2, h3, h4, h5 {padding-left:.5em; padding-right: .5em;}

/* 	  GRID */

#header {grid-area: Header;}  #intro {grid-area: Intro;} #mainContent {grid-area: Main;} #landscape-services-fleet {grid-area: Landscapes;}#footer {grid-area: FooterC}
 .grid-container {
  display: grid;
  grid-template-areas:
    "Header Header Header Header Header Header"
    "Intro Intro Intro Intro Intro Intro"
    "Main Main Main Main Main Main"
    "Landscapes Landscapes Landscapes Landscapes Landscapes Landscapes"
    "FooterC FooterC FooterC FooterC FooterC FooterC";
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 16px; /* Adjust padding as needed */

 }


#header {display: flex;
  flex-direction: column-reverse;}
 #header .professional-landscaper-banner{ display: flex; align-content: center; justify-content: center; min-height: 2em; /*background-color: #272727;*/ flex-direction:column;  } 


/*Buttons*/
.button {background: #4386fa;border-radius: 5px;text-align: center; width: 30%; color:white;} a.button {color: white;text-decoration: none; font-weight: bold;cursor: hand;/* display: block; */ margin:0 auto;  } 
#mainContent {padding: 0 2.5% 0  2.5%; }
.size-auto, 
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
	max-width: 100%;
	height: auto;
}
/*LOGO*/

.logo {width: 30%;   margin-bottom: 16px;
}


 #menu-main {text-align:center;}
 
  #header .professional-landscaper-banner {
    flex-direction: row;
    justify-content: space-between;
    padding-left: 100px;
  padding-right: 100px;

  }
  
  #header .professional-landscaper-banner .logo {width:100%;}
  
  
.a1-header-contacts {
    flex-direction: row;
    justify-content: space-between;}
    
     .call-header {
    background-color: #4386fa;
    border-radius: 12px;
    padding: 8px;
  }
      .a1-header-contacts i {
    margin-right: 4px;
    font-size: 14px;
    background-color: #f5f3f3;
    padding: 6px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  }
   .a1-header-contacts {
    text-align: right;
  }
  .a1-header-contacts a {
    text-decoration: none;
  }
  
   a.email-header i {
    background-color: #fa5043;
    color: white;
  }
  
   a.whatsapp-header i {
    background-color: rgb(37, 211, 102);
    color: white;
  }
      a.call-header {
    color: white;
    margin-top: 8px;
    display: inline-flex;
  }
  .call-header i {
    background: none;
    padding: 0;
    box-shadow: none;
  }
  
    #intro {
    background-image: url("images/porcelain-patio-fleet-job.jpg");
    min-height: 500px;
    background-size: cover;
    background-position: bottom;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 48px;
    display: flex;
    flex-direction: row;
    width:85%;
    margin:0 auto;

  }
  
    h3.intro-header {
    font-size: 56px;
    width: 50%;
    margin: 0;
    font-weight: bold;
    background-color: rgba(255, 255, 255, .6);
    height: max-content;
    border-radius: 4px;
    padding: 16px;
  }
  
   #intro p {
    background-color: rgba(255, 255, 255, .6);
    width: 46%;
    height: max-content;
    align-self: flex-end;
    font-weight: 800;
    margin-left: 16px;
    padding: 8px;
    border-radius: 4px;
  }
   ul.services-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    list-style: none;
    flex-wrap:wrap;
    justify-content:center;
  }
  
   ul.services-list li {
    padding-top: 42px;
    width:25%;
  }
    ul.services-list li img {
    border-radius: 8px;
    width: 300px;
    height: 300px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    margin: 0 auto;
  }
  
  
    section.landscaping-project-images {
    background-color: #f5f3f3;
    padding: 1.2em;
    margin-top: 36px;
    margin-bottom: 36px;
    text-align: center;
    border-radius: 8px;
  }
  
    section.landscaping-project-images ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
   section.landscaping-project-images ul li img {
    border-radius: 4px;
    width: 360px;
    height: 330px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }
  
  .why-us {
      display:flex;
      
      
      
  }
  div.why-images img {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    width:85%;
    margin:0 auto;
  }
  
  section.why-us ul li {
    background-image: url(" ./images/a1-list-icon-logo.svg");
    background-repeat: no-repeat;
    margin-right: 5px;
    list-style: none;
    background-size: 35px 35px;
  }
  
  section.why-us ul li {
    padding-left: 42px;
  }
  
   ul.turf-services {
    display: flex;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  ul.turf-services li img {
    border-radius: 4px;
    width: 350px;
    height: 330px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  }
  
   ul.services-list li button {
    background-color: #4386fa;
    border-radius: 16px;
    padding: 8px;
    border: none;
    font-weight: 800;
    width: 50%;
    font-size: .8em;
  }
  
  ul.services-list li button a {
    border-radius: 8px;
    width: 250px;
    height: 250px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    margin: 0 auto;
    color:white;
  }
   .contact-form {
      background: #fff;
      padding: 2rem;
      max-width: 500px;
      margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width:100%;
    }

    .contact-form h2 {
      margin-bottom: 1rem;
      font-size: 1.5rem;
      text-align: center;
    }

    .form-group {
      margin-bottom: 1rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.3rem;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 0.7rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .form-group button {
      background-color: #007BFF;
      color: white;
      padding: 0.8rem 1.2rem;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
    }

    .form-group button:hover {
      background-color: #0056b3;
    }
	
	.contact-wrapper {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-info {
    background: #f5f3f3;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    width:100%;
}

.contact-info h2 {
    margin-bottom: 16px;
}

.contact-info a {
    color: #4386fa;
    text-decoration: none;
}

.social-links {
    margin-top: 12px;
    display: flex;
    gap: 16px;
    font-size: 1.5rem;
}

.map-wrap {
    margin-top: 40px;
    border-radius: 8px;
    overflow: hidden;
}
  
    .contact-wrapper {
        flex-direction: row;
        justify-content: space-between;
        max-width: 1080px;
        margin: 0 auto;
        align-items: flex-start;
    }
    
    
    

    .contact-info {
        width: 35%;
    }

    .contact-form {
        width: 55%;
    }
    
    .accordion button[aria-expanded="true"] + .accordion-content {
  max-height: 500px; /* Adjust depending on how tall your content is */
}
	.accordion button[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}
    
   	 .accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
  }
	
	.accordion {
  width: 80%;
  margin: 0 auto;
}
	.accordion {
  width: 90%;
  margin: 0 auto;
}
	 .accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7e7d7d;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
  }
	 .accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
  }
	 .accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
  }
	 .accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
  }
	 .accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
  }
	 .accordion .accordion-content {
/*    opacity: 0;*/
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
  }
	
	  .accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
  } 
  
  .footer-left {
    padding: 24px;
    border-radius: 16px;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border: solid 1px lightgray;
    width: 95%;
    margin-bottom: 24px;
    text-align:center;
  }
  
   .footer-logo {
    width: 15%;
    margin-bottom: 16px;
    margin:0 auto;
  }
  
  .footer-bottom {display:none;}
  
   .footer-left ul {
    list-style: none;
    font-size: 0.75em;
  }
  
   ul.footer-socials {
    list-style: none;
    text-align: right;
    width: 95%;
  }
  
   .footer-data {
    font-size: smaller;
    list-style: none;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    justify-content: space-between;
  }
  
/* quote form */


/* services  */
/*ol.mobile-services {*/
/*	list-style:none!important;*/
/*	display:flex;*/
/*	flex-direction:row;*/
/*	list-style-type:none!important;*/
/*	margin-top: 2.2rem;*/
/*}*/
/*ol.mobile-services li {width:35%;}*/
/*ol.mobile-services li ul li::marker{display:none;}*/
/*ol li.servicing { background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mobile-servicing.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:8%;}*/
/*ol li.repairs {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mobile-mechanic-woking.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:8%;}*/
/*ol li.mot {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mot-repairs.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:8%;}*/

/*ol li.smart-repairs {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/03/car-smart-repairs.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:8%;}*/

/*li.servicing ul li, li.repairs ul li, li.mot ul li, li.smart-repairs ul li  {*/
/*	list-style-type:none!important;list-style:none!important; width:40%; text-align:left;}*/
/*ol.mobile-services li ul{display:flex; flex-direction:row; flex-wrap:wrap;  justify-content: center;*/
/*}*/

li ul li i{color:#29dfff; font-size:1.2em; } 


/*Menus*/

/*My cutom css only hamburger menu*/

nav.main-menu ul li {display: inline-block;color: black;padding-right:2rem;padding-bottom:2rem;}
nav.main-menu ul a {font-weight:normal; text-decoration:none; font-size: 1em; color:#526465;}
nav.main-menu ul a:hover {color:#242811}
nav ul ul {display:none;}
nav ul li:hover > ul {margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;}
/* First Tier Dropdown */
nav ul ul li {width:220px;padding:0!important;margin-bottom:11px!important;position: relative;}
/* Change this in order to change the Dropdown symbol */li > a:after { content:  ' +'; }li > a:only-child:after { content: ''; }
.menuToggle span, .menuToggle input {display: none;} #menuToggle span, #menuToggle input {display: none;}
#menu .button {background-color: #88D4F2; width: 80%;}  .holder i {font-size: 1.2rem; color: #00c2b3; padding:0.2em; text-shadow: rgba(0, 0, 0, 0.5) 0 0 2px; }




p a, ul li a {color: black; text-decoration: none;}
.button.green {background: #DEF54E; color: black; } 



@media all and (max-width: 575px) {
	body { font-size: 100%;  line-height: 1.375; } h1 { font-size: 2.25em;  /* 16x2.25=36 */ } h2 { font-size: 1.5em;   /* 16x1.5=24 */ } h3 { font-size: 1.125em; /* 16x1.125=18 */ } h4 { font-size: 0.875em; /* 16x0.875=14 */ } p  { font-size: 0.75em;  /* 16x0.75=12 */ padding-left:.5em;padding-right:.5em;}
	 .grid-container {
    grid-template-areas:
      "Header"
      "Intro"
      "Main"
      "Landscapes"
      "FooterC";
  grid-template-rows: auto;  grid-template-columns: 1fr;  
    grid-gap: 8px; /* Optionally adjust gap for mobile */
  }
	
#header {display: flex;
  flex-direction: column;}

	#header .professional-landscaper-banner{font-size:0.7em;}
	
	
	
 #main h3, #main p  {
		padding-left:20%; 
		padding-right:20%;
		
		
	}	
	
		
	#menu-main {display: flex;
		flex-direction: column;
	text-align:left;}
	#menuToggle
{ display: block; position: relative; top: -5px; left:9px; z-index: 1; -webkit-user-select: none; user-select: none; margin-bottom:8px;}
#menuToggle input
{display: block;width: 40px;height: 32px;position: absolute;/* top: -7px;left: -5px; */cursor: pointer;opacity: 0; /* hide this */z-index: 2; /* and place it over the hamburger */-webkit-touch-callout: none;}
/* Just a quick hamburger
 */
#menuToggle span
{ display: block;width: 28px;height: 1px;margin-bottom: 7px;position: relative; background: /*#38b6ad #e1ff41*/ #4370B6;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),opacity 0.55s ease;}#menuToggle span:first-child{transform-origin: 0% 0%;}#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle span:nth-child(3) {width:28px;}
/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);background: #4689fd;
}
/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{ opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/*
 * Ohyeah and the last one should go the other direction
 */
 #menuToggle input:checked ~ span:nth-last-child(2)
{opacity: 1;
    transform: rotate(-45deg) translate(0, -1px);
}
	#menuToggle input:checked ~ .menu-main-container
{transform: none;}
	
	menuToggle input:checked ~ div {
  transform: none;
	}
	.menu-main-container
{ margin:0px 0px 0px 10px;padding: 5px;padding-top: 20px;background: #e1ff41;color:white;font-weight:400;text-transform:uppercase;list-style-type: none;-webkit-font-smoothing: antialiased; transform-origin: 0 0;transform: translate(-2000%, 0);
transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);display: flex;flex-direction: column;position: absolute; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:auto;border-radius:1px;width:450%;left: 0px; top:30px;}
nav.main-menu {width:50px;}nav.main-menu ul li {padding:0;margin-bottom:1rem; border-bottom: dashed 1px #242811; padding-bottom:1em; padding-left:2.5em;}nav ul ul li {width:0;}nav ul li:hover > ul {align-items:flex-start;justify-content:flex-start;padding-left:6px;}
	
 li.menu-item:hover {background:#29baef;}
	
/* 	LOGO */
	.mechanic-logo {
			width:100%;
	}
	
/* 	intro  */
	h1.intro {
		font-size:2.2em;
	}
	
	span.standout {
  padding: .9em;
  display: inline-block;
  color: #2c2b2b;
		margin: 0 auto;
  margin-bottom: 1em;
  background-color: white;
  border: 1px solid lightgray;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
  padding: .5em;
  border-radius: 12px;
		text-align: center;
}
	
	h3.intro-header {font-size:28px; width:50%; margin:0; font-weight: bold;background-color: rgba(255, 255, 255, .6); height: max-content; border-radius: 4px; padding:8px;}
	.professional-landscaper-banner .logo {width:100%;}
	#header .professional-landscaper-banner {flex-direction:row;justify-content: space-between;  padding-left: 0px;
  padding-right: 0px;}
	.a1-header-contacts {text-align: right;}
	.a1-header-contacts a {text-decoration: none;}
	.call-header {background-color: #4386fa; border-radius: 12px; padding:8px;}
	.a1-header-contacts i {margin-right:4px; font-size: 14px; background-color: #f5f3f3; padding:6px;  border-radius: 16px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);}
	.call-header i {background:none; padding:0; box-shadow: none; }
	a.whatsapp-header {text-decoration: none; color: black;}
	a.whatsapp-header i { background-color: #25D366; color: white;}
	a.email-header i {background-color:#fa5043; color:white;}
	#intro {background-image: url("images/porcelain-patio-fleet-job.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;
	    width:100%;
	}
	
	#intro p{background-color: rgba(255, 255, 255, .6); width:46%; height: max-content; align-self: flex-end; font-weight:800; margin-left:16px; padding:8px;border-radius: 4px;}
	
	#intro p button {width:70%; margin-top:8px; text-align: center; border-radius: 16px; border: none; color:white;}
	 a.call-header {color:white; margin-top:8px;display: inline-flex;}
	 
	 #intro.driveways {background-image: url("images/driveways-fleet.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
    
    	 #intro.patios {background-image: url("images/professional-patio-hampshire.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
   
    #intro.fencing {background-image: url("images/fencing-a1-landscapes.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
    #intro.turfing {background-image: url("images/turfing-fleet.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
    
    #intro.artificial {background-image: url("images/garden-artificial-grass-fleet-3.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
    
    #intro.brickwork {background-image: url("images/brick-work-fleet-main-image.jpg");min-height: 300px;
    background-size: cover;background-position: bottom;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    border-radius: 8px;
    padding: 24px; display: flex; flex-direction: row;}
    
	#mainContent > p {font-size:1.2em}
/* 	registration form */
	.enter-reg {display:flex;
	justify-content:center;
		padding-top: 1.3em;
		padding-bottom: 1.3em;
		background-color: rgba(67, 112, 182, .2);
		border-radius:6px;
  }
	
	#landscape-services-fleet {padding-top:42px;}
	section.why-us ul{list-style: none; margin-top:24px;}
	section.why-us ul li{background-image: url(" ./images/a1-list-icon-logo.svg");  background-repeat: no-repeat;margin-right: 5px; list-style: none; background-size: 35px 35px;}
	section.why-us ul li {padding-left:42px;}
	div.why-images img {border-radius: 8px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);}
	
	ul.services-list {display: flex;flex-direction: column;align-items: center;text-align: center; list-style: none;}
	ul.services-list li {margin-top:16px;width:100%;}
	ul.services-list li  img{border-radius: 8px;
  width: 250px;
  height: 250px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); margin:0 auto;}
	
	ul.services-list li button {background-color: #4386fa;
    border-radius: 16px;
    padding: 8px;
	border: none; font-weight:800; width:50%; font-size:.8em;}
	
	ul.services-list li button  a {color:white;}
	
	section.landscaping-project-images {background-color: #f5f3f3; padding:1.2em; margin-top:36px; margin-bottom:36px; text-align:center; border-radius: 8px;}
	
	ul.turf-services {display: flex;
    flex-direction: row;list-style:
none;
    flex-wrap: wrap;justify-content:space-around;}
    
    	ul.turf-services li img {border-radius: 4px;
  width: 100px;
  height: 100px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); }
	
	section.landscaping-project-images  ul {list-style: none; display: flex;flex-direction: row;
    flex-wrap: wrap;justify-content: space-evenly;}
	/*section.landscaping-project-images  ul li {width: 80px; height: 80px; background-color: white;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);*/
 /*   border: solid 1px lightgray;margin:8px; border-radius: 8px;}*/
 section.landscaping-project-images  ul li img {
 border-radius:
4px;
    width: 80px;
    height: 80px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 }
	
	.landscaping-faq {margin-top:44px;margin-bottom:44px; text-align: center;}
	.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.why-us {
      display:block;
      
      
      
  }

.accordion button[aria-expanded="true"] + .accordion-content {
  max-height: 500px; /* Adjust depending on how tall your content is */
}
	.accordion button[aria-expanded="true"] .icon {
  transform: rotate(45deg);
}
	footer {display: flex;flex-direction:column; align-items: center;  box-sizing: border-box;}
	.footer-left {width:95%; margin-bottom:24px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: solid 1px lightgray;} .footer-right{width:95%;  box-sizing: border-box; margin-bittom:16px;}
	.footer-right, .footer-left  {padding:24px; border-radius: 16px;  box-sizing: border-box;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: solid 1px lightgray;}
	
	.footer-left ul {list-style:none; font-size:0.75em;}
	.footer-logo {width:55%; margin-bottom:16px;}
	
	.footer-bottom {border-radius: 16px; padding:24px; margin-top:16px; width:95%;box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);border: solid 1px lightgray;}
	ul.footer-socials {list-style: none;  text-align: right; width:95%;}
	ul.footer-socials li {display: inline-block; padding: 8px;}
	.footer-data {font-size: smaller; list-style: none; display: flex; flex-direction: row; width:100%; justify-content: center;justify-content: space-between;}
	.footer-data copyright {}
	.footer-data a {color:black;}
	
	 .accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
  }
	
	.accordion {
  width: 80%;
  margin: 0 auto;
}
	.accordion {
  width: 90%;
  margin: 0 auto;
}
	 .accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7e7d7d;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
  }
	 .accordion button .accordion-title {
    padding: 1em 1.5em 1em 0;
  }
	 .accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: currentColor;
  }
	 .accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: currentColor;
  }
	 .accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    border: 1px solid;
    border-radius: 22px;
  }
	 .accordion .accordion-content {
/*    opacity: 0;*/
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
  }
	
	  .accordion .accordion-item {
    border-bottom: 1px solid #e5e5e5;
  }
	 span.standout {
    font-size: .7em;
  }
	
	 .contact-form {
      background: #fff;
      padding: 2rem;
      max-width: 500px;
      margin: 0 auto;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      width:100%;
    }

    .contact-form h2 {
      margin-bottom: 1rem;
      font-size: 1.5rem;
      text-align: center;
    }

    .form-group {
      margin-bottom: 1rem;
    }

    .form-group label {
      display: block;
      margin-bottom: 0.3rem;
      font-weight: bold;
    }

    .form-group input,
    .form-group textarea {
      width: 100%;
      padding: 0.7rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 1rem;
    }

    .form-group textarea {
      resize: vertical;
      min-height: 100px;
    }

    .form-group button {
      background-color: #007BFF;
      color: white;
      padding: 0.8rem 1.2rem;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      width: 100%;
    }

    .form-group button:hover {
      background-color: #0056b3;
    }
	
	.contact-wrapper {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-info {
    background: #f5f3f3;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    width:100%;
}

.contact-info h2 {
    margin-bottom: 16px;
}

.contact-info a {
    color: #4386fa;
    text-decoration: none;
}

.social-links {
    margin-top: 12px;
    display: flex;
    gap: 16px;
    font-size: 1.5rem;
}

.map-wrap {
    margin-top: 40px;
    border-radius: 8px;
    overflow: hidden;
}


	/* services  */
ol.mobile-services {
	list-style:none!important;
	display:flex;
	flex-direction:column;
	list-style-type:none!important;
	margin-top: 2.2rem;
}
	ol.mobile-services li {width:auto;}
ol.mobile-services li ul li::marker{display:none;}
ol li.servicing { background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mobile-servicing.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:40%;}
ol li.repairs {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mobile-mechanic-woking.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:40%;}
ol li.mot {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/02/mot-repairs.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:40%;}

ol li.smart-repairs {background-image: url("https://easyfixautos.co.uk/wp-content/uploads/2024/03/car-smart-repairs.svg");background-repeat: no-repeat;background-size: 40%;min-height: 100px; background-position: top; padding-top:40%;}

li.servicing ul li, li.repairs ul li, li.mot ul li, li.smart-repairs ul li  {
	list-style-type:none!important;list-style:none!important; padding-right:1.2em;width:auto;}
ol.mobile-services li ul{display:flex; flex-direction:row; flex-wrap:wrap;  justify-content: center;
}

li ul li i{color:#29dfff; font-size:1.2em; } 

}
		

@font-face
{
 
  font-family: "IcoFont";
font-weight: normal;
font-style: "Regular";
src: url("./fonts/icofont.woff2") format("woff2"),
url("./fonts/icofont.woff") format("woff");
}

[class^="icofont-"], [class*=" icofont-"]
{
  font-family: 'IcoFont' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  line-height: 1;
/* Better Font Rendering =========== */
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.icofont-whatsapp:before
{
  content: "\ed86";
}

.icofont-tiktok:before
{
  content: "\f033";
}

.icofont-facebook:before
{
  content: "\ed37";
}

.icofont-phone:before
{
  content: "\efbb";
}

.icofont-email:before
{
  content: "\ef12";
}

.icofont-ui-email:before
{
  content: "\ec56";
}

.icofont-google-map:before
{
  content: "\ed42";
}

[class^="icofont-"].icofont-duotone,
	[class*=" icofont-"].icofont-duotone
{
  position: relative;
}

[class^="icofont-"].icofont-duotone:before,
	[class*=" icofont-"].icofont-duotone:before
{
  position: absolute;
  left: 0;
  top: 0;
}

[class^="icofont-"].icofont-duotone:after,
	[class*=" icofont-"].icofont-duotone:after
{
  opacity: 0.4;
}

.icofont-xs
{
  font-size: .5em;
}

.icofont-sm
{
  font-size: .75em;
}

.icofont-md
{
  font-size: 1.25em;
}

.icofont-lg
{
  font-size: 1.5em;
}

.icofont-1x
{
  font-size: 1em;
}

.icofont-2x
{
  font-size: 2em;
}

.icofont-3x
{
  font-size: 3em;
}

.icofont-4x
{
  font-size: 4em;
}

.icofont-5x
{
  font-size: 5em;
}

.icofont-6x
{
  font-size: 6em;
}

.icofont-7x
{
  font-size: 7em;
}

.icofont-8x
{
  font-size: 8em;
}

.icofont-9x
{
  font-size: 9em;
}

.icofont-10x
{
  font-size: 10em;
}

.icofont-fw
{
  text-align: center;
  width: 1.25em;
}

.icofont-ul
{
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.icofont-ul > li
{
  position: relative;
  line-height: 2em;
}

.icofont-ul > li .icofont
{
  display: inline-block;
  vertical-align: middle;
}

.icofont-border
{
  border: solid 0.08em #f1f1f1;
  border-radius: .1em;
  padding: .2em .25em .15em;
}

.icofont-pull-left
{
  float: left;
}

.icofont-pull-right
{
  float: right;
}

.icofont.icofont-pull-left
{
  margin-right: .3em;
}

.icofont.icofont-pull-right
{
  margin-left: .3em;
}

.icofont-spin
{
  -webkit-animation: icofont-spin 2s infinite linear;
  animation: icofont-spin 2s infinite linear;
  display: inline-block;
}

.icofont-pulse
{
  -webkit-animation: icofont-spin 1s infinite steps(8);
  animation: icofont-spin 1s infinite steps(8);
  display: inline-block;
}

@-webkit-keyframes icofont-spin
{
  0%
  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%
  {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes icofont-spin
{
  0%
  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%
  {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.icofont-rotate-90
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.icofont-rotate-180
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.icofont-rotate-270
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.icofont-flip-horizontal
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.icofont-flip-vertical
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

.icofont-flip-horizontal.icofont-flip-vertical
{
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

:root .icofont-rotate-90,
	:root .icofont-rotate-180,
	:root .icofont-rotate-270,
	:root .icofont-flip-horizontal,
	:root .icofont-flip-vertical
{
  -webkit-filter: none;
  filter: none;
  display: inline-block;
}

.icofont-inverse
{
  color: #fff;
}