@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box;}
body{margin: 0; padding: 0;background-color: rgb(243, 243, 244); color: #000;font-family: "Roboto", serif; font-size: 0.875rem; line-height: 1.5;}
main{position: relative;overflow-x: hidden;}
main:after{content:'';position: absolute;left: 0; top: 0; height: 50.5rem; width: 26.313rem; background-image: url(./assets/Rectangleright.png); background-size: contain; background-repeat: no-repeat;}
main:before{content:'';position: absolute;right: 0; top: 0; height: 30rem; width: 22.5rem; background-image: url(./assets/Rectangleleft.png); background-size: contain; background-repeat: no-repeat;}
header{padding-block: 0.75rem;}
.container{margin: 0 auto; max-width: 90rem; padding-inline: 4%;position: relative; z-index: 1;}
h1{font-weight: 600; font-size: 4.375rem; color: #fff; text-align: center;margin-block-end: 1.25rem;}
h2{font-size: 1.625rem; margin-block-end: 1rem; font-weight: 600;}
h3{font-size: 1.25rem; font-weight: 600;}
.banner{padding-block: 5.625rem; background-color: rgb(0, 104, 56);}
.banner p{color: #fff; text-align: center; font-weight: 400; font-size: 0.875rem; line-height: 1.3;}
.description{padding-block: 5rem 2.813rem;}
.description ul{margin: 0rem; padding: 0rem; display: flex; gap: 1rem; list-style: none;}
.description ul li{width: calc((100% - 1rem) / 2);box-shadow: 0rem 0rem 1.313rem 0rem rgba(0, 0, 0, 0.039); background-color: #fff; padding: 1.75rem 2.063rem; border-radius: 0.625rem;
}
.description ul li p{color: rgba(0, 0, 0, 0.5);}
.more-details{text-align: center;}
.more-details p{margin-block-end: 1rem;color: rgba(0, 0, 0, 0.5);}
footer{text-align: center; margin-block-start: 2rem;}
footer div.container{border-block-start: 0.063rem solid rgba(0, 0, 0, 0.5);;padding-block: 1.25rem;}


@media screen and (max-width: 991px) {
  .banner{padding-block: 3rem;}
  h1{font-size: 3.125rem;}
  main:after{height: 38rem;width: 15.25rem;}
  main:before{ height: 17.5rem; width: 12.5rem; top: 3.5rem;}
}

@media screen and (max-width: 575px) {
  header img{max-width: 6.25rem;}
  .banner{padding-block: 3rem;}
  h1{font-size: 2rem;}
  h2{font-size: 1rem;}
  h3{font-size: 0.875rem;}
  p{font-size: 0.875rem;}
  main:after{height: 14.563rem;width: 9.188rem;top: 16rem;left: -2rem;}
  main:before{ height: 10.188remx;width: 7rem;top: 5.5rem;}
  .description{padding-block: 2.5rem;}
  .description ul{ flex-direction: column;}
  .description ul li{width: 100%;padding: 0.75rem;}
  footer div.container{padding-block: 0.8rem;}
}