@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Saira:ital,wght@0,100..900;1,100..900&display=swap');


.container {
  display: grid;
  grid-template-areas:
    "header header header header"
    "hero-image hero-image hero-image hero-image"
    "hero-image hero-image hero-image hero-image"
    "Par1 Par2 Par3 Par4"
    "Footer Footer Footer Footer"
    ;
  grid-template-rows: 1fr 1fr 3fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 3px;
  background-color: black;
  padding: 5px;
}
.container div {
  background-color: white;
  padding: 10px;
  text-align: center;
}
.container div.header {
  grid-area: header;
  text-align: center;
  font-family: Saira;
}
.container div.Par1 {
    grid-area: Par1;
    font-family: Saira;
}
.container div.Par2 {
    grid-area: Par2;
    font-family: Saira;
}
.container div.Par3 {
    grid-area: Par3;
  font-family: Saira;
}
.container div.Par4 {
    grid-area: Par4;
    font-family: Saira;
}
.container div.Footer{
    grid-area: Footer;
    text-align: center;
    font-family: Aleo;
}
.container div.hero-image{
    grid-area: hero-image;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("Images/Berd.jpg");
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -30%);
  color: rgb(103, 41, 41);
}



body {
  background-image: url("Images/Berd.jpg");
  background-size: cover;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

}