/*---------Start 1--------*/
.Title {
  position: relative;
  text-align: center;
}

.Title-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 88px;
  font-weight: 500;
  color: rgb(255, 255, 255);
}

.Background img {
  width: 100%;
  filter: brightness(80%);
}
/*--------END 1---------*/



/*--------Start 2--------*/
.Introduce {
  display: grid;
  grid-template-columns: auto;
  justify-items: center;  
  align-items: center;    
}

.Introduce p {  
  width: 606px;
  height: 89.25px;
  font-size: 24px;
  font-weight: 500;
  color: rgb(25, 25, 25);
  text-align: center;
  margin: 120px 0;
}

/*-----------END 2-----------*/


/*-----------Start 3---------*/
.Container-page{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
}

.WE-picture{
  grid-row: 1;
  grid-column: 1;
}
.WE-picture img{
  width: 598px;
  height: 816.200px;
  float: right;
}
.Container-WE{
  grid-row: 1;
  grid-column: 2;
  margin: 200px 0 0 100px;  
}
.Container-WE h3{
  font-size: 48px;
  margin-bottom: 20px ;
}
.WE-content {
  font-size: 18px;
  font-weight: 400;
  color: rgb(93, 87, 94);
  width: 391.1px;
  height: 259.2px;
}
/*...............................*/
.Container-M{
  grid-column: 1;
  grid-row: 2;
  margin-top: 200px;
  width: 458px;
  height: 201.6px;
  padding-left: 140px;
}
.Container-M h3{
  font-size: 48px;
  margin-bottom: 20px;
}
.M-content{
  font-size: 18px;
  font-weight: 400;
  color: rgb(93, 87, 94);
}
.M-picture{
  grid-row: 2;
  grid-column: 2;
}
.M-picture img{
  width: 606px;
  height: 544.062px;
  margin-top: 100px;
  margin-bottom: 100px;
}
/*-------------END 3--------------*/


@media (max-width: 1195px){
  .WE-picture img{
    width: 100%;
    height: auto;
  }
  .WE-content{
    width: 80%;
    height: auto;
  }
  .M-picture img{
    width: 100%;
    height: auto;
  }
  .Container-M{
    width: 80%;
    height: auto;
    padding-left: 0;
  }
}

@media (max-width: 920px){
  .Title-content {
    font-size: 50px;
  }
  .Introduce p{
    width: 328px;
    height: 148.75px;
  }
  .Container-page{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    justify-items: center;  
    align-items: center;  
  }
  .WE-picture{
    grid-column: 1;
    grid-row: 1;
  }
  .WE-picture img{
    width: 328px;
    height: 313px;
    float: none;
  }
  .Container-WE{
    grid-column: 1;
    grid-row: 2;
    margin: 50px 0;  
  }
  .Container-WE h3{
    font-size: 36px;
    margin-bottom: 10px ;
  }
  .WE-content {
    width: 328px;
    height: 313px;
  }
  /*...............................*/
  .Container-M{
    width: 328px;
    height: 313px;
    grid-column: 1;
    grid-row: 4;
    margin-top: 50px;
    margin-bottom: 150px;
  }
  .Container-M h3{
    font-size: 36px;
    margin-bottom: 10px;
  }
  .M-picture{
    grid-column: 1;
    grid-row: 3;
  }
  .M-picture img{
    width: 328px;
    height: 313px;
    margin: 0;
  }
}