body, html {
    	height: auto;
    	width: 100%; /* moves entire webpage slightly to left as % reduces*/
        padding-top: 1%; /* padding from top of screen*/
    	background-color: white;
	font-family: candara, sans-serif;
}

/* This is the 'box' around everything so that the text etc all have a border*/
#wrapper {
height: auto;
width: 80%;
margin: 0 auto; /*this will cause the div to be centered*/

}



/* HEADER SECTION - this relates to the Clarke & Co logo*/

#header {
	    width:400px;
        height:352px;
        display: block;
        margin-left: auto;
        margin-right: 15px; /*moves Clarke & Co logo left*/
	margin-bottom: -185px; /* controls gap between logo and text below*/
	margin-top: 16px; /*increases gap between top of logo and top of webpage*/
        background-image: url("gloucester-accountants-images/clarkeandcologo.png");
        background-repeat: no-repeat;
        background-size: contain;
}

/* item 2 relates to the white background below the Clarke & Co logo to make it 
look as one image so that 'Small business accountants' appears as one image */

 .item2 {
   background-color: white;
   color: #007a5e;
   text-align: center;
   font-size: 20px;
   line-height: 30px; /*gap between 'small bus. and 'accountants'*/
   font-family: candara, sans-serif;
   position: relative;
   margin-top: 0;
   padding-bottom: 32px; /*gap between 'Small bus...' and phone logo*/
 }



/* this gridcontainer contains 4 items - phone image (phone image and number 
along with envelope image and email address) */

 .gridcontainer {
  display: grid;
  grid-template-columns: 10%, 90%;
  grid-template-rows: auto auto;
  width: auto;
  height:20vh; /* moves phone closer to envelope and makes it all smaller*/
  margin-bottom: 80px; /*increases gap between envelope and hero image*/
}
  
  /* "phone" relates to phone image and the "phonenumber" */
  
   .phone {
   display: grid;
   background-color: white;
   grid-column: 1/ 2;
   grid-row: 1 / 2;
   background-repeat: no-repeat;
   position: relative;
   bottom: 1%;  /*moves phone image up and down*/
   left: 40%;
   
}

    .phone img{
    max-width: 100%;
    max-height: 100%;
    width: 60%;
    height: auto;
    display: block;
}



.phone:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}


/*  relates to the envelope image and the "item 4b" href in the html 
doc means you can touch the icon to automatically open up an email*/

.envelope {
   background-color: white;
   display: grid;
   justify-content: flex-start;
   grid-column: 1/ 2;
   grid-row: 2 / 2;
   background-repeat: no-repeat;
   position: relative;
   bottom: 5%;
   left: 30%; /*moves image right*/
  
}


 .envelope img{
    max-width: 100%;
    max-height: 100%;
    width: 75%;
    height: auto;
    display: block;
}



.envelope:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* the "phonenumber" <a href="tel:01452536355" */

.phonenumber {
   background-color: white;
   display: grid;
   color: #007a5e;
   font-weight: bold;
   grid-column: 2 / 2;
   grid-row: 1 / 2;
   background-size: 64px;
   background-repeat: no-repeat;
   background-position: center center;
   position: relative;
   white-space: nowrap; /*stops phone number 'wrapping'*/
   top: 5%;
   left: 35%; /*moves phone number right away from phone image*/
   font-size: 20px;
  }


/* item 'email' relates to the "<a target='blank'" in the html doc means you can 
 touch the icon to automatically open up an email*/

.email {
   display: inline-block;
   margin-top: 0px;
   margin-left: 0px;
   background-color: white;
   color: #007a5e;
   font-weight: bold;
   position: relative;
   top: 12%;
   left: 190%; /*moves text further from envelope*/
   font-size: 17px;
  }
  
  .email a {
      display: flex;
      float: right;
  }


.test-text {
    color: orange;
}

/* HERO SECTION - this is the picture of Gloucester docks with the 6 'buttons'
overlayed=*/

/* The hero image - Gloucester Docks */

/* HERO SECTION - this is the picture of Gloucester docks with the 6 'buttons'
overlayed=*/

/* The hero image - Gloucester Docks */

.hero {
    
  /* Use "linear-gradient" to add a darken background effect to the image 
  (photographer.jpg).   This will make the text easier to read */

  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));

   height: 50vh;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   top: 50%; /* Move to vertical center */
   left: 50%; /*moves 6 titles and docks photo left as a unit*/
   margin-left: -50vw;
   margin-right: -50vw;
   max-width: 100vw; /*keeps 6 titles with vw of screen inside docks photo*/
   width: 100vw;
   margin-top: -1%;   /*controls gap betwee hero image and phone logo etc*/
   position: relative;

/* background-attachment: fixed; */

	display: grid;
	display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-template-rows: repeat(5, 19% 19% 19% 19% auto);
    grid-column-gap: 0.5%;
    grid-row-gap: 0.5%;
    padding: 5%; /*gap between screen edge and 6 titles*/
	font-family: "candara", candara, sans-serif;
	align-items: center;
    
}


/*grid postion: row start, column start, row end, column end*/

/* Apply to all four sides */
/*padding: 1em;*/

/* top and bottom | left and right */
/*padding: 5% 10%;*/

/* top | left and right | bottom */
/*padding: 1em 2em 2em;*/

/* top | right | bottom | left */
/*padding: 5px 1em 0 2em;*/


.Accounts { 
  grid-row: 1 / 2;
  grid-column: 1 / span 2; /* Start at column 1 and span 2 columns */
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: -10%; /*spce outside accounts - moves down*/
  postion: relative;
  left: 20px;
}

.CIS { 
  grid-row: 2 / 3;
  grid-column: 1 / span 2; /* Start at column 1 and span 2 columns */
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
 padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: -10%; /*spce outside accounts*/
  postion: relative;
}

.Rental { 
  grid-row: 3 / 4;
  grid-column: 1 / span 2; /* Start at column 1 and span 2 columns */
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
 padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: -10%; /*spce outside accounts*/
}

.Review { 
  grid-area: 4 / 1 / 5 / 2; 
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: 10%; /*spce outside accounts*/
}


.Contact { 
  grid-area: 4 / 2 / 5 / 2; 
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: 10%; /*spce outside accounts*/
}

.About { 
  grid-area: 5 / 1 / 5 / 2; 
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: 10%; /*spce outside accounts*/
}



.Home { 
  grid-row: 5 / 5;
  grid-column: 2 / 2; 
  border-radius: 20px;
  font-size: 20px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: 15%; /*spce outside accounts*/
}



/*text boxes for 6 items on hero image*/
/*text is white, border is white*/

/* top | right | bottom | left */
/*padding: 5px 1em 0 2em;*/

.button-link {
  color: white;  /*color of txt in hero boxes*/
  border-radius: 80px; /*curve on button*/
  display: inline;
  padding: 4px 15px 4px 15px; /*gap for border around the text*/
  border: solid white;
  font-size: 100%; /*size of font for 6 x titles*/
  text-align: center;
  margin: 1%;
}




/*Advertising under hero picture*/

.advert{
	padding: 1px;
	margin: 0 auto; /*this will cause the div to be centered*/
	position: relative;
	width: 110%; /*this will increase size of advert and space to text*/

}

.groove {
	background-image: linear-gradient(rgba(201,242,151), rgba(178,222,39));
	border: 2px solid #007a5e;
    border-radius: 10px;
	height: 8vh;
	line-height: 4vh;
 	max-width: 90%;
	text-align: center;
  	font-size: 18px;
	position: relative;
}



/*scrolling text using CSS*/

.marquee {
height: 40px;
overflow: hidden;
position: relative;
}

.marquee h3 {
    display: flex;
    justify-content: space-between;
    margin-right: 200px;
font-size: 175%;
color: #007a5e;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 18px;
text-align: center;
transform:translateX(100%);
animation: cssmarquee 10s linear infinite;
}
@keyframes cssmarquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}




/* This is the style for Google Maps*/
/* Style google map */

.map {
    display: flex;
    margin: 0 auto; /*this will cause the div to be centered*/
    justify-content: center;
    align-items: center;
    border: 1px solid black;  /* Visible border */
    height: 30vh;  /* Viewport-based height */
    width: 98%;  /* Full width of the container */
    max-width: 350px;  /* Optional: Set a max-width if needed */
    left: 2px;
}


.map iframe {
    height: 100%;   /* Full height of the container */
    width: 100%;    /* Full width of the container */
    border: 0;      /* No border on iframe */
    transform: translateZ(0);  /* Force hardware acceleration */
}




.size {
font-size: 18px; /* text size of main text about clarke & co*/
}

/* Address on Contact webpage */

.address {
	margin: 1px;
	position: relative;
	width: 95%;
}

.adds {
    color: #007a5e;
    font-size: 24px;
    align-items: center;
    text-align: center;
}


.phonenumber2 {
   background-color: white;
   display: flex;
   justify-content: center;
   font-family: sans-serif; 
   font-weight: bold;
   position: relative;
   font-size: 24px;
  }



/* This is the grid that contanins 2 logos: AAT/text (combined div) & IFA */

 .logosgrid {
  display: grid;
  position:relative;
  grid-template-rows: auto;
  height: 20vh;
  width: 80vw;
  margin-bottom: 0px;
  
  }
  
.aatlogo {
   display: grid;
   grid-row: 1 / 2;
   background-color: white;
   position: relative;
   bottom: -1%;
   left: -5%;

}

.aatlogo img{
    max-width: 100%;
    max-height: 100%;
    display: block;
    padding: 20%;
}


.aattext {
    display: block;
    text-align: left;
    font-size: 12px;
    position: relative;

}
 

.ifalogo {
   display: grid;
   grid-row: 2 / 2;
   background-color: white;
   position: relative;
   left: -100%;
   bottom: 10%;

}

.ifalogo img{
    max-width: 170%; /* size of image */
    max-height: auto;
    display: block;
    position: relative;
    left: -60%; /* move image left */
    padding: 1%;
}




.positivessl {
   background-color: white;
   background-size: 70%;
   background-repeat: no-repeat;
   position: relative;
   bottom: 40%;
   left: -1%;
   
}


 
a {
color: #007a5e;
}  



#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 48px;
    margin-top: -48px;
    left: 3%;
}