body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

#desp-cont {
  border: 0px solid green;
  width: 40%;
  left: 30%;
  position: relative;
  font-weight: 500;
  font-size: large;
}

#desp {
  border: 0px solid red;
  margin-top: 50px;
  text-align: center;
  line-height: 1.5;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}


#desp>h1 {
  font-size: 40px;
  font-weight: bolder;
  line-height: 1.5;
}

#desp>h1+h1 {
  margin-bottom: 20px;
}

#subs {
  border: 0px solid yellowgreen;
  height: 150px;

}

#subs-btn {
  text-align: center;
  border: 0px solid violet;
  margin-top: 50px;
}

#subs-btn>button {
  color: #000;
  font-weight: bold;
  background-color: #fff;
  border: 0.5px solid black;
  border-radius: 5px;
  padding: 20px;
  font-size: 16px;
  cursor: pointer;
}

#subs-btn>button:focus,
#subs-btn>button:hover {
  background: #c6cceb;
  border: 2px solid #2c4bff;
  color: #2c4bff;

}

.fa-brands {
  margin: 0 5px;
}

#subs-social-handle {
  border: 0px solid orange;
  text-align: center;
  padding-top: 30px;
  font-size: x-large;
}

#container {
  height: auto;
  border: 0px solid blue;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 4% 6%;
  gap: 20px;
  /* background-image: url(https://images.pexels.com/photos/2340254/pexels-photo-2340254.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); */
  background-image: url(https://buffer.com/static/background/yellow-bg-withpattern.jpg);

}

.box {
  padding: 30px 10px 10px 20px;
  border: 1px solid black;
  background-color: white;
  border-radius: 5px;
  line-height: 2;
}

.box>p {
  text-align: left;
}

.box>button {
  width: 100%;
  margin: 20px 0;
  font-size: 16px;
  background-color: #2c4bff;
  padding: 10px 30px;
  color: aliceblue;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.box>button:hover {
  background-color: #e97284;
}

span {
  font-size: medium;
}

.price>h1 {
  color: blue;
  font-weight: 2000;
}

.price>p>span {
  font-weight: bolder;
}

#blue-poster {
  background-color: #2c4bff;
  height: 350px;
  color: aliceblue;
  margin-top: 0%;
  text-align: center;
  position: relative;
}

#blue-dsp {
  border: 0px solid black;
  font-size: x-large;
  font-weight: bolder;
  width: 30%;
  margin-left: 35%;
  position: absolute;
  bottom: 60%;


}

#blue-poster>button {
  position: absolute;
  bottom: 38%;
  left: 42%;
  height: 40px;
  border: 0px;
  border-radius: 5px;
  background-color: #e97284;
  color: azure;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
  font-size: medium;
  width: 15%
}

#blue-poster>button:hover {
  background-color: orange;
}

#blue-feature {
  border: 0px solid black;
  width: 40%;
  font-weight: 1500;
  display: flex;
  margin-left: 30%;
  justify-content: space-around;
  position: absolute;
  bottom: 28%;
}

#back-1 {
  height: 100%;
  width: 20%;
  background-image: url(https://buffer.com/static/background/triangle-green.svg), url(https://buffer.com/static/background/planet@2x.png), url(https://buffer.com/static/background/circle-pink.svg);
  background-repeat: no-repeat;
  background-size: 40px, 180px, 60px;
  background-position: 120px 75px, -55px 160px, 88px 105%;
  position: absolute;
  top: 0px;
  left: 0;
}

#back-2 {
  height: 100%;
  width: 20%;
  background-image: url(https://buffer.com/static/background/circle-brush@2x.png), url(https://buffer.com/static/background/lines-orange.svg), url(https://buffer.com/static/background/triangle-yellow.svg);
  background-repeat: no-repeat;
  background-size: 40px, 180px, 26px;
  background-position: 0px 30px, 137px 110px, 165px 246px;
  position: absolute;
  top: 0px;
  right: 0px;
}