*{
  margin: 0;
  padding: 0;
  font-family: "Gilory";
  box-sizing: border-box;
}
html,body{
  width: 100%;
  height: 100%;
}
#main{
  min-height: 100vh;
  width: 100%;
}
#top{
  width: 100%;
  min-height: 60vh;
  background-image: url(https://media.istockphoto.com/id/1130520324/photo/texture-wall-concrete-it-can-be-used-as-a-background.jpg?s=612x612&w=0&k=20&c=O8T8tshGMAkf_x5Q4m2DNwrlUMteX3tj759wqyjpJjo=);
  background-size:cover ;
  background-position: 50% 60%;
  
}
#overlay{
  position: relative;
  width: 100%;
  min-height: inherit
  /* background-color: rgb(222, 212, 231); */
}
#text{
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 20%;
  width: 100%;
  padding: 0 10vw;
  display: flex;
  color: black;

}
#textright{
  width: 60%;
  display: flex;
 align-items: center;
  justify-content: space-between;
}
#textright p{
  font-size: 12px;
  width: 40%;
}
#textright i{
  color: black;
}
#text h1{
  font-weight: 300;
  font-size: 5vw;
}
#bottom{
  display: flex;
  width: 100%;
  min-height: 40vh;
  background-color: blue;
}

#bone{
  padding: 30px;
  width: 25%;
  min-height: inherit;
  background-color: white;
}

#bone p{
  font-size: 12px;
  margin-top: 20px;

}
#btwo{
  width: 25%;
  min-height: inherit;
  background-image: url(https://plus.unsplash.com/premium_photo-1717916843908-7bbee16bad20?q=80&w=1364&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
  background-size: cover;
  background-position: center;
}
#bthree{
  width: 20%;
  min-height: inherit;
  background-color: black;
}
#bthreetop{
  padding: 20px;
  width: 100%;
  min-height: 20vh;
  background-color: orangered;
  color: white;
}
#bthreetop p{
  font-size: 12px;
}
#bthreebottom{
  width: 100%;
  min-height: 50%;
  background-image: url(https://images.unsplash.com/photo-1718054970826-36027982ba4d?w=400&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMzV8fHxlbnwwfHx8fHw%3D);
  background-size: cover;
  background-position: center;
}
#bfour{
  width: 30%;
  min-height: inherit;
  padding: 30px;
  background-color: #444;
  color: white;
}

.notf{
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

}

.notf #photo{
  width: 40px;
  height: 40px;
  background-color: red;
  border-radius: 50%;
}

.notf p{
  width: 86%;
  font-size: 12px;
}



@media(max-width:500px){
#overlay #text{
  flex-direction: column;
  align-items: flex-start;
}
#text h1{
  font-size: 10vw;
}
#bottom{
  min-height: 20vh;
}
#overlay #text #textright{
  align-items: flex-start;
  flex-direction: column;
}
#overlay #text #textright p{
      width: initial;
      margin-top: 20px;
}
#overlay #text #textright #icons{
  margin-top: 30px;

}

#bottom{
  flex-direction: column;
}
#bone{
  width: 100%;
}
#btwo{
  width: 100%;

}
#bthree{
  flex-direction: column;
  width: 100%;

}
#bfour{
  width: 100%;

}

}