*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:"Barlow Semi Condensed", sans-serif;
}
.col4{
    background-color: hsl(219, 29%, 14%);
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f4f6; 
}
.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "col1 col1 col2 col5"
      "col3 col4 col4 col5";
    gap: 20px;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
  }
 .parent h2{
    color:hsl(214, 17%, 92%);
    font-size: 16px;
    font-weight: 500;
 } 
 .parent h3{
    color: hsl(0, 0%, 100%);
    margin: 10px 0px 20px 30px;
    font-size: 22px;
    font-weight: 600;
 } 
 .parent p{
    color:hsl(214, 17%, 92%);
    font-size: 13px;
 }
 .parent .pp{
    color:hsl(214, 17%, 92%);
    font-size: 13px;
    margin: 0px 15px 20px 30px;
 } 
 
  
  .col1 {
    grid-area: col1;
    background-position: 400px 10px;
    background-color: hsl(263, 55%, 52%);
  }
  .col2 {
    grid-area: col2;
  }
  .col3 {
    grid-area: col3;
  }
  .col4 {
    grid-area: col4;
    background-color: hsl(219, 29%, 14%);
  }
  .col5 {
    grid-area: col5;
    height: 100%; /* خليه ياخد طول الصفين */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
.col1 img,.col2 img,.col3 img,.col4 img,.col5 img{
  margin: 25px 0px 0px 30px;
}
.col1 div div,.col2 div div,.col3 div div,.col4 div div,.col5 div div{
    margin: 25px 0px 20px 2px;
}
.col3 h2,.col5 h2,.col3 h3,.col5 h3{
    color: hsl(219, 29%, 14%);
}
.col3 p,.col5 p,.col3 .pp,.col5 .pp{
    color: hsl(217, 19%, 35%);
}
.col3 h3{
    margin: -10px 0px 20px 30px;
}
.col5 h3{
    margin: -15px 0px 20px 30px;
}
.col3 .pp{
    margin: 0px 40px 0px 30px;
}
.col5 .pp{
    margin: 0px 45px 50px 30px;
}
@media (max-width:800px) {
    .parent {
        display: grid;
        grid-template-columns: repeat(1, 1fr); /* 4 أعمدة */
        grid-template-areas:
          "col1"
          "col2"
          "col3"
          "col4"
          "col5";
        gap: 50px;
        max-width: 1200px;
        margin: auto;
        padding: 20px;
      }
}