.middle_container{
   background-color: hsl(218, 28%, 13%);
   padding: 0 8%;
   color: #fff;
   font-size: 0.9rem;
   border: none;
}
.features_grid{
   display: grid;
   max-width: 75%;
   grid-template-columns: 1fr 1fr;
   column-gap: 9rem;
   row-gap: 5rem;
   margin: 0 auto 5rem;
   text-align: center;
}

.card_icon{
   display: flex;
   justify-content: center;
   height: 5rem;
   margin-bottom: 1rem;
}

.third_page_grid{
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 5rem;
   margin: 9rem auto;
}
.third_page_grid > .column{
   margin: auto;
}
.illustration2{
   width: 100%;
}
.third_page_text{
   width: 80%;
}
.third_page_text > p{
   margin: 1rem 0;
}
.third_page_text > h1{
   width: 80%;
}
.arrow_link{
   text-decoration: underline;
   color: hsl(176, 68%, 64%);
}
.arrow_link:hover{
   color: #fff;
}
.testimonials{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 3rem;
}
.profile{
   background-color: hsl(219, 30%, 18%);
   padding: 3rem 2rem 2rem;
   border-radius: 10px;
}
.profile_details{
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-top: 1rem;
}
.profile_picture > .icon{
   width: 3rem;
   border-radius: 100%;
}
.profile_name > .name{
   font-weight: 700;
}
.profile_name{
   font-size: 0.8rem;
}
.bottom_card{
   max-width: 56rem;
   padding: 3rem;
   margin: auto;
   text-align: center;
   position: relative;
   background-color: hsl(219, 30%, 18%);
   top: 8rem;
   border-radius: 10px;
   z-index: 1;
}
.bottom_card > .card_text{
   margin-bottom: 2rem;
}
.sign_up_form{
   display: flex;
   width: 90%;
   margin: auto;
   gap: 1rem;
}
.email_input{
   min-width: 60%;
   border-radius: 40px;
   color: rgba(0, 0, 0, 0.627);
   outline: none;
   min-height: 3rem;
}
.bottom_error{
   text-align: left;
   padding-left: 1.5rem;
   color: hsl(0, 100%, 63%);
}
.hidden{
   display: none;
}
.bottom_button{
   background-color: hsl(198, 60%, 50%);
   padding: 0.75rem 4rem;
   border-radius: 40px;
}

@media (max-width: 1200px){
   .features_grid{
      max-width: 85%;
      column-gap: 5rem;
   }
   .third_page_text{
      width: 100%;
   }
   .testimonials{
      grid-template-columns: 1fr 1fr;
   }
   .testimonials > div:nth-of-type(3){
      grid-column: 1 / 3;
      min-width: 55%;
      max-width: 55%;
      justify-self: center;
   }
}

@media (max-width: 970px){
   .features_grid{
      grid-template-columns: 1fr;
   }
   .features_grid > div {
      max-width: 25rem;
      justify-self: center;
   }
   .third_page_grid{
      grid-template-columns: 1fr;
      text-align: center;
      gap: 6rem;
      margin-top: 3rem;
   }
   .third_page_grid > div{
      width: 80%;
   }
   .third_page_text > h1{
      margin: 0 auto;
   }
}

@media(max-width: 875px){
   .testimonials{
      grid-template-columns: 1fr;
      column-gap: 0;
   }
   .testimonials > div { 
      grid-column: 1;
      max-width: 80%;
      justify-self: center;
   }
   .testimonials > div:nth-of-type(3) { 
      max-width: 80%;
   }
   .sign_up_form{
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
      justify-content: center;
      max-width: 70%;   
   }
   .bottom_card{
      padding: 2rem 1.3rem;
   }
}

@media(max-width: 515px){
   .testimonials > div {
      max-width: 90%;
   }
   .testimonials > div:nth-of-type(3) { 
      max-width: 90%;
   }
   .middle_container{
      font-size: 0.8rem;
   }
   .email_input{
      min-height: 2rem;
   }
   .bottom_button{
      padding: 0.5rem 4rem;
   }
   .profile_name{
      font-size: 0.7rem;
   }
}

@media(max-width: 400px){
   .testimonials > div {
      max-width: 95%;
   }
   .testimonials > div:nth-of-type(3) { 
      max-width: 95%;
   }
   .third_page_text > h1{
      margin: auto;
      width: 100%;
   }
   .bottom_card{
      padding: 2rem 1rem;
   }
   .middle_container{
      font-size: 0.7rem;
   }
   .sign_up_form{
      max-width: 80%;
   }
   .profile{
      padding-top: 2rem;
      padding-bottom: 1.5rem;
   }
}