/*Things to consdier
- Look at text fonts and possibily see if there is one better suited to this style of website 
- I want to edit this stylesheet to contain the basic styling for sections such as backgrounds fonts and so on and then each page can contain its own stylesheet to be styled indivdually 
*/
 body{
  background-color: #FFF5EA;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

h1{
  text-align: center;
}

.hero-image{
    /* Refrence for image needs to be added */
    /* Visit Angelsey. (). Aerial Image of Menai birdge on a clear day [Jpeg]. https://www.visitanglesey.co.uk/en-gb/explore/towns/menai-bridge */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/ArielShoot.jpg");

    height: 500px;
    /* Allows for the image to take up the entire width of the screen */
    width: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    object-fit: cover;
}

.hero-text{
  text-align: center;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, 50%);
  color: #eae5e5;
  font-size: x-large;
} 

 

.title{
  color: rgb(85, 85, 240);
  text-shadow: 1px 1px #2b2929;
  font-size: xx-large;
  display: inline;
}

.subtitle{
  color: rgba(102, 102, 103, 0.634);
  font-size: large;
  display: inline;
}

.box {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}


  /*Sections create a box at specfied point to hold text and images and seperate elements in each page */
.section {
  height: 400px; /* Set desired height for sections */
  width: 100%; /* Adjust based on your layout */
  display: flex;
}
  
  /*Half seperates section into two coloums allowing you to add elements such as image on one side text on another */
.half {
  flex: 1; /* Each half takes equal space */
  /*Set display and flex direction to column 
  allowing text to go above or bellow correctly */
  display: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Text color */
  /*Move text colour to section or keep text colour consis */ 
  color: rgb(0, 0, 0); 
  font-size: 24px;
  }


  /* Sections create a box at specified point to hold text and images and separate elements in each page */
  /* Edited version of the section but instead all the content remains in the center */
.middle-section {
  height: 400px; /* Set desired height for sections */
  width: 100%; /* Adjust based on your layout */
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */

}

/* Center-content centers all content within the section */
.center-content {
  /* Set display and flex direction to column allowing text to go above or below correctly */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Text color */
  /* Move text colour to section or keep text colour consistent */
  left: 5px;
  font-size: 24px;
}


/* Used to decrease the line section within the middle section container */
.middle-section p{
  line-height: 1px;
}

  #PastelGreen{
    background-color: #C7EFCF ;
  }

  button {
    background-color: #147fc2; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: auto;
    /* Used to curve the button corners */
    /* Helps ensures buttons have distance between eachother */
    border-radius: 8px;
    margin-bottom: 25px;
  }

  button:hover{
    background-color: #136699;
  }

  .center{
    margin: 25px;
    width: 50%;
    height: 25%;
  }

  .box {
    height: 17rem;
    width: 30rem;
    background-color: rgba(87, 169, 242, 0.749);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
  }

  .center-text{
    text-align: center;
    margin-top: 0; /*helps to ensure spacing between certain elements isnt massive */

}



/* Cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 300px; /* Set width for consistent card size */
  margin: 20px; /* Add some margin for spacing */
  text-align: center;
  font-family: arial;
  border-radius: 8px;
  background-color: white;
}

.card img {
  /* Used to curve top image corners */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  width: 100%; /* Make the image fill the card width */
  height: 200px; /* Set a fixed height for the images */
  object-fit: cover; /* Maintain aspect ratio and fill the space */
}

.adress {
  color: grey;
  font-size: 22px;
}

.card-button {
  border: none;
  outline: 0;
  padding: 12px;
  color: white;
  background-color: #1a54b1;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;

  /* Curves only the bottom corners */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.card-button:hover {
  opacity: 0.7;
}

/* Used to help position the cards beside one another */
.card-position {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center align the cards */
}