body, html {
    	height: 100%; /* Ensures body takes full viewport height */
        padding: 0; /* reset default padding*/
        margin: 0; /* reset default padding*/
    	background-color: white;
	font-family: candara, sans-serif;
}

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



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

#header {
	max-width:100%;
        height:10em;
        display: block;
        margin-left: 30%;
        margin-right: auto;
	width: 50%;
	margin-bottom: 1em; /* controls gap between C&C logo and text below*/
	margin-top: 2em; /*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;
}

/*size of text "Small business accountants"*/
h1 {
            text-align: center;
            font-size: 28px;
            left: 50%;
}


/* item 2 relates to the white background below the Clarke & Co logo, including
h1 Small Business Accountants 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;
   line-height: 40px; /*gap between clarke & co logo and 'small bus...' etc*/
   font-family: candara, sans-serif;
   position: relative;
   margin-top: 20px;
   padding-bottom: 40px; /*gap between 'small bus acs' and phone logo etc*/
   left: -1px;
 }

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

 .gridcontainer {
  display: grid;
  grid-template-columns: 15% 30% 10% 45%;
  grid-template-rows: auto;
  width: auto;
  height: 15vh;
  margin-bottom: 80px;
}
  
  /* "phone" relates to phone image and the "phonenumber" 
  <a href="tel:01452536355" in the html doc means that you can touch the image 
  to automatically make your mobile phone call the number*/
  
   .phone {
   display: grid;
   background-color: white;
   grid-column: 1/ 1;
   grid-row: 1 / 1;
   background-size: 100%;
   background-repeat: no-repeat;
   position: relative;
   left: 100%;
    
}

.phone img{
    display: flex;
    max-width: 100%;
    max-height: 100%;
    width: 22%;
    height: auto;
    margin-top: 5px; /* Move the elementdown */
    
}

.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;
   grid-column: 3/ 4;
   grid-row: 1 / 1;
   background-size: 100%;
   background-repeat: no-repeat;
   position: relative;
   left: 140%;
  
}


 .envelope img{
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 35%;
    height: auto;
    margin-top: 5px; /* Move the element down */
    
}


.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" in the html doc means that you can 
touch the image to automatically make your   mobile phone call the number*/

/*color of all <a href links in the website with no underline*/
a {
    color: #007a5e;
    text-decoration: none;
}



.phonenumber {
   background-color: white;
   display: grid;
   font-weight: bold;
   grid-column: 2/ 1;
   grid-row: 1 / 1;
   background-size: 100%;
   background-repeat: no-repeat;
   position: relative;
   top: 5%;
   left: 140%;
   font-size: 23px;
  }

/* 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: flex;
   float: right;
   background-color: white;
   font-weight: bold;
   grid-column: 4 / 4;
   grid-row: 1 / 1;
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
   position: relative;
   top: 5%;
   left: 20%;
   font-size: 1.25em;
  }



/* 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.4), 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: -8%;   /*controls gap betwee hero image and phone logo etc*/
   position: relative;

/* background-attachment: fixed; */

	display: grid;
	display: grid;
    grid-template-columns: repeat(3, 33%);
    grid-template-rows: repeat(3, 30% 30% auto);
    grid-column-gap: 0.5%;
    grid-row-gap: 0.5%;
    padding: 2%; /*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-area: 1 / 1 / 2 / 2; 
  border-radius: 20px;
  font-size: 22px; /*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-area: 1 / 2 / 2 / 3; 
  border-radius: 20px;
  font-size: 22px; /*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-area: 1 / 3 / 2 / 3; 
  border-radius: 20px;
  font-size: 22px; /*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: 2 / 1 / 3 / 2; 
  border-radius: 20px;
  font-size: 22px; /*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: 2 / 2 / 3 / 3; 
  border-radius: 20px;
  font-size: 22px; /*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: 2 / 3 / 3 / 3; 
  border-radius: 20px;
  font-size: 22px; /*size of font*/
  display:inline;
  padding: 0 0 3px 3px; /*space inside accounts*/
  text-align: center;
  margin-top: 10%; /*spce outside accounts*/
}



.Home { 
  grid-area: 3 / 2 / 3 / 3; 
  border-radius: 20px;
  font-size: 22px; /*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{
    margin: 0 auto; /*this will cause the div to be centered*/
	padding: 0%;
	position: relative;
	width: 60%;
}

.groove {
	background-image: linear-gradient(rgba(201,242,151), rgba(178,222,39));
	border: 0.063em solid #007a5e;
    border-radius: 0.125em;
	height: 8vh;
	line-height:8vh;
 	max-width: 100vw;
	text-align: center;
  	font-size: 170%;
	position: relative;
	left: 0%;
}






/* Google Maps*/
/* Center the map container */

.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: 35vh;  /* Viewport-based height */
    width: 98%;  /* Full width of the container */
    max-width: 800px;  /* 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 */
}

/* general text size about clarke & co*/
.size {
font-size: large;
font-family: candara, sans-serif;
}

/*contact: Clarke & Co text above phone/email and logos at bottom of page*/
h3 {
text-align: center;

}


/* Address on Contact webpage */

.address {
	margin: 1px;
	padding: 1px;
	position: relative;
	width: 100vw;
}

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



.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 & IFA */

 .logosgrid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  height: 40vh;
  margin-bottom: 1px;
  align-items: center;
 
  
  }
  
.aatlogo {
   display: grid;
   grid-column: 1 / 2;
   grid-row: 1 / 2;
   background-color: white;
   position: relative;
   left: 0%;
   
}

/*AAT text deleted from website*/

.aattext {
   display: block;
   align-content: stretch;
   flex-direction: column;
   text-align: left;
   grid-column: 1 / 2;
   grid-row: 2 / 2;
   position: relative;
   font-size: 10px;
   line-height : 0px;
   left: 27%;

}
 

 

.ifalogo {
   display: grid;
   grid-column: 2 / 2;
   grid-row: 1 / 2;
   object-fit: contain;
   max-width: 100%; /* set the maximum width to 100% of its container */
   height: auto; /* maintain aspect ratio of the image */
   background-color: white;
   position: relative;
   bottom: -10%;
   left: 15%;
   
}




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




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