HTML CSS

Hey ,You did amazing work congratulations for completing this challenge

To fix accessibility issues :

• Page must contain level-one-heading so use <h1></h1> instead of <h2></h2>

------------------------------------------------------------------ Tip ---------------------------------------------------------------------

• don't use Two h2 as heading is one sentence so you can use this :

Html

<h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>

css

h1 span
{
display:  block
}

• use media query for mobile and Ipad but in this challenge you will use for mobile only with min-width:375px or smaller and max-width:775px.

• don't give section or div specific height that will damage the responsivity in mobile remove height and use min-height instead.

• don't give section.top and section.bottom any height as content will overlap above each other in Ipad and Mobile screen.

• use grid template instead using position and top or left as this

/*
give semantic classes names to divs and section so instead of bottom class you can rename it to **cards** and and give children class name as card and semantic name about what is contain as **Supervisor,Team Builder ,etc...**  

*/
  section.cards
  {
    display: grid;
    grid-auto-rows: minmax(200px,auto);
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 'Supervisor Team-Builder Calculator '
                         'Supervisor Karma Calculator';
    gap: 30px 30px;
  }

  .cards .card.Supervisor
  {
      grid-area: Supervisor;
      align-self: center;
      border-top: 5px solid var(--Cyan);
  }

  .cards .card.Team-Builder
  {
      grid-area: Team-Builder;
      border-top: 5px solid var(--Red);
  }

  .cards .card.Karma
   {
        grid-area: Karma;
        border-top: 5px solid var(--Orange);
   }

 .cards .card.Calculator
  {
      grid-area: Calculator;
      align-self: center;
      border-top: 5px solid var(--Blue);
  }


  @media(max-width: 775px)
  {
    section.cards 
    {
      grid-template-areas: 'Supervisor Supervisor Supervisor' 
                           'Team-Builder Team-Builder Team-Builder '
                           'Karma  Karma Karma' 
                           'Calculator Calculator Calculator';
    }
  }
    
    
  @media(min-width: 775px) and (max-width:1100px)
  {
    section.cards
    {
      grid-template-columns:repeat(2,1fr);
      grid-template-areas: 'Supervisor Team-Builder ' 
                           'Karma Calculator';
    }
  }

and this guide to use Grid

• give cards border-radius to be more beautiful

• you can use variables in css and save colors or fixed sizes in variables like this :

:root 
{
--main-color:#3829e0;
--font-family:'Red Hat Display',sans-serif;
}
h1 
{
font-family:var(--font-family)/*to call  value of the variable*/
}

Regardless You did amazing I hope this is useful to you... Keep coding👍