*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body{
  background-color: white;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 100vh;
}

.main{
  width: 100%;
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.g-img{
  width: 30rem;
  height: 10rem;
   object-fit: cover;
  object-position: center;
}

.content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10rem;
  align-items: center;
}

.content .search{
  margin-bottom: 1rem;
  width: 50rem;
  height: 4rem;
  border-radius: 40px;
  position: relative;
  display: flex;
}
input{
  width: 40rem;
  height: 3rem;
  border-radius: 40px;
  background-color: transparent;
  border: 2px solid #ccc;
  padding: 0px 1rem;
  outline: none;
  font-size: 1rem;
}

.search span{
  position: absolute;
  color: #ccc;
  top: 0.5rem;
  right: 0.5rem;
  /* font-size: 1.5rem; */
  right: 21%;
  /* border-radius: 50%; */
}

.search span img{
  width: 2rem;
  background-color: #ccc;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
}

.search span:hover{
  cursor: pointer;
}

.content .search input:focus{
  border: 2px solid #000;
}

.buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-right: 10rem;
}

.buttons button{
  width: 15rem;
  height: 3rem;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none;
  background-color: whitesmoke;
  font-size: 1rem;
  margin: 0px 1rem;
  cursor: pointer;
}

.buttons button:hover{
  background-color: #ccc;
}


/* responsive design */

@media screen and (max-width: 768px){
 .g-img{
  width: 20rem;
  height: 8rem;
   object-fit: cover;
  object-position: center;
}

.content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* margin-left: 10rem; */
  align-items: center;
}

.content .search{
  margin-bottom: 1rem;
  width: 30rem;
  height: 4rem;
  border-radius: 40px;
  position: relative;
  /* display: flex; */
}
input{
  width: 20rem;
  height: 3rem;
  border-radius: 40px;
  background-color: transparent;
  border: 2px solid #ccc;
  padding: 0px 1rem;
  outline: none;
  font-size: 1rem;
}

.search span{
  position: absolute;
  color: #ccc;
  top: 0.5rem;
  right: 0.5rem;
  /* font-size: 1.5rem; */
  right: 35%;
  /* border-radius: 50%; */
}

.search span img{
  width: 2rem;
  background-color: #ccc;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
}

.search span:hover{
  cursor: pointer;
}

.content .search input:focus{
  border: 2px solid #000;
}

.buttons{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  margin-right: 10rem;
}
.buttons button{
  margin-bottom: 1rem;
}
}