.main_grid  {
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: 100vh auto auto;
  row-gap: 50px;
}

.hero_section {
  grid-column: 1/2;
  grid-row: 1/2;
  display: inline-grid;
  grid-template-columns: 12% 38% 50%;
  grid-template-rows: 5% 15% 60% 20%;
}

.sec_01 {
  grid-column: 1/2;
  grid-row: 3/4;
}

.sec_01 p {
  transform: rotate(270deg);
  white-space: nowrap;
  color: #536778;
  font-size: 4rem;
  font-weight: 500;
  margin: 5.7em 0em 0em 0.5em;
}

.sec_02 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.sec_02 p {
  font-size: 4rem;
  font-weight: 500;
  color: #536778;
  margin: 0.3em 0em 0em 0em;
}

.red  {
  color: #CC1F2F;
}

.sec_03 {
  grid-column: 2/3;
  grid-row: 3/4;
  background-color: #8996a2;
}

.sec_03 p {
  color: #ffffff;
  font-size: 2.05rem;
  font-weight: 300;
  padding: 3.4em 1.7em 1.7em 1.7em;
}

.sec_04 {
  grid-column: 3/4;
  grid-row: 2/5;
  max-width: 711px;
  background-image: url(images/img_j01.jpg);
  background-position: center;
  background-size: cover;
}

.about_section  {
  grid-column: 1/2;
  grid-row: 2/3;
  display: inline-grid;
  grid-template-columns: 35% 65%;
  grid-template-rows: auto;
}

.sec_11 {
  grid-column: 1/2;
  grid-row: 1/2;
  margin: 4em 0em 4em 0em;
  opacity: 0;
  transform: translateY(60px);
  transition: 0.5s all ease-in-out;
}

.sec_11_appear {
  opacity: 1;
  transform: translateY(0px);
}

.about_header {
  font-size: 3.8rem;
  font-weight: 500;
  margin: 0em auto 0em auto;
  padding: 1em 1em 0em 2em;
  position: relative;
}

.about_header::after {
  content: "";
  position: absolute;
  bottom: -2.5em;
  left: 2.7em;
  width: 40%;
  height: 7px;
  background: #CC1F2F;
  transform: rotate(270deg);
}

.sec_12 {
  grid-column: 2/3;
  grid-row: 1/2;
  margin: 4em 0em 4em 0em;
  opacity: 0;
  transform: translateX(30px);
  transition: 0.5s all ease-in-out;
}

.content_appear1 {
  opacity: 1;
  transform: translateX(0px);
}

.sec_12 p {
  font-size: 1.55rem;
  padding: 2em 2.3em 2em 2em;
  line-height: 1.6;
}

.review_section {
  grid-column: 1/2;
  grid-row: 3/4;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 20% 20% 20% 20% 20%;
  margin-top: 40px;
}

.review_header  {
  grid-column: 2/4;
  grid-row: 1/3;
  font-size: 3.8rem;
  font-weight: 500;
  margin: 0.2em 2.3em 0em 2em;
  text-align: right;
  opacity: 0;
  transform: translateX(30px);
  transition: 0.5s all ease-in-out;
}

.review_header_appear {
  opacity: 1;
  transform: translateX(0px);
}

.review_1 {
  grid-column: 1/2;
  grid-row: 1/4;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto;
  opacity: 0;
  transform: translateY(60px);
  transition: 0.5s all ease-in-out;
}

.review_2 {
  grid-column: 2/3;
  grid-row: 2/5;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto;
  opacity: 0;
  transform: translateY(60px);
  transition: 0.5s all ease-in-out;
}

.review_3 {
  grid-column: 3/4;
  grid-row: 3/6;
  width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto;
  opacity: 0;
  transform: translateY(60px);
  transition: 0.5s all ease-in-out;
}

.review_1_appear, .review_2_appear, .review_3_appear {
  opacity: 1;
  transform: translateY(0px);
}

.review_1 img, .review_2 img, .review_3 img {
  width: 60%;
  margin-bottom: 3em;
}

.description_p  {
  font-size: 1.4rem;
  padding: 2em 0.5em 1em 0.5em;
  text-align: center;
  position: relative;
}

.description_p::before {
  content:"";
  position: absolute;
  left: 25%;
  top: -5px;
  width: 50%;
  height: 5px;
  background-color: #CC1F2F;
}

.description_p::after {
  content:"";
  position: absolute;
  left: 25%;
  bottom: -70px;
  width: 50%;
  height: 5px;
  background-color: #CC1F2F;
}

.name_p {
  font-size: 1.3rem;
  font-weight: 300;
}

@media screen and (max-width: 1425px) {
  .sec_01 p {
    margin: 5.8em 0em 0em 0.5em;
  }
  .sec_03 p {
    padding: 2.2em 1.7em 1.7em 1.7em;
  }
}

@media screen and (max-height: 697px) {
  .sec_01 p {
    margin: 5em 0em 0em 0.5em;
  }
}

/* iPad pro - Potrait */
@media screen and (min-width: 1024px) and (orientation: portrait) {
  .main_grid  {
    grid-auto-rows: 60vh auto auto;
  }
}

@media screen and (max-width: 1340px) {
  .about_header {
    padding: 1em 0.5em 0em 1.5em;
  }
  .about_header::after {
    left: 2.3em;
  }
  .review_section {
    padding: 0px 20px;
  }
  .review_header  {
    margin: 0.1em 1.8em 0em 2em;
    transform: translateY(30px);
  }
  .review_header_appear {
    transform: translateY(0px);
  }
}

@media screen and (max-width: 1165px) {
  .sec_03 p {
    padding: 1.6em 1.7em 1.7em 1.7em;
  }
  .review_1, .review_2, .review_3 {
    width: 320px;
  }
  .review_section {
    padding: 0px 40px;
    margin-top: 0px;
  }
  .review_header  {
    margin: 0.1em 1em 0em 1em;
  }
  .sec_12 {
    transform: translateY(30px);
  }
  .content_appear1 {
    transform: translateY(0px);
  }
}

@media screen and (max-width: 1155px) {
  .sec_01 p {
    margin: 5.9em 0em 0em 0.5em;
  }
  .sec_03 p {
    padding: 1.7em 1.2em 0em 1.2em;
  }
  .about_section  {
    grid-template-columns: 28% 72%;
  }
  .about_header {
    padding: 1.5em 0.5em 0em 1.6em;
  }
  .about_header::after {
    left: 1.5em;
  }
}

@media screen and (max-width: 1050px) {
  .hero_section {
    grid-template-columns: 12% 35% 53%;
    grid-template-rows: 5% 13% 58% 24%;
  }
  .sec_01 {
    grid-column: 1/3;
    grid-row: 4/5;
  }
  .sec_01 p {
    transform: rotate(0);
    margin: 0.25em 0em 0em 1em;
  }
  .sec_02 {
    grid-column: 1/3;
  }
  .sec_02 p {
    margin: 0.1em 0em 0em 1em;
  }
  .sec_03 {
    grid-column: 1/3;
  }
  .sec_03 p {
    padding: 2.2em 1.2em 0em 1.7em;
  }
  .sec_04 {
    max-height: 650px;
  }
  .sec_11 {
    margin: 0em 0em 4em 0em;
  }
  .sec_12 {
    margin: 0em 0em 4em 0em;
  }
  .sec_12 p {
    padding: 2em 2.5em 2em 2em;
  }
  .review_section {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 8% auto auto auto 0%;
    row-gap: 100px;
  }
  .review_header  {
    grid-column: 1/4;
    grid-row: 1/2;
    text-align: left;
    margin: 0.1em 0em 0em 0.5em;
  }
  .review_1 {
    grid-column: 1/4;
    grid-row: 2/3;
    width: 90%;
  }
  .review_2 {
    grid-column: 1/4;
    grid-row: 3/4;
    width: 90%;
  }
  .review_3 {
    grid-column: 1/4;
    grid-row: 4/5;
    width: 90%;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 20%;
    margin-bottom: 2em;
  }
  .description_p  {
    padding: 2em 0.5em 1em 0.5em;
  }
  .description_p::before {
    left: 40%;
    top: 0px;
    width: 20%;
  }
  .description_p::after {
    display: none;
  }
  .name_p {
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 920px) {
  .main_grid  {
    grid-auto-rows: 710px auto auto;
  }
  .hero_section {
    grid-template-columns: 20% 40% 40%;
    grid-template-rows: 20% 30% 25% 25%;
  }
  .sec_01 {
    grid-column: 3/4;
    z-index: 3;
  }
  .sec_01 p {
    margin: 1em 0em 0em 0em;
    color: #294156;
  }
  .sec_02 {
    grid-column: 1/4;
    grid-row: 1/2;
    z-index: 3;
    background-color: #284156;
  }
  .sec_02 p {
    margin: 0.5em 0em 0em 1em;
  }
  .sec_03 {
    grid-column: 1/4;
    grid-row: 2/5;
    background-color: #284156;
    opacity: 70%;
  }
  .sec_03 p {
    padding: 2em 3em;;
    margin: 3em auto;
  }
  .sec_04 {
    grid-column: 1/4;
    grid-row: 1/5;
    max-width: 1440px;
    max-height: 790px;
  }
  .about_header::after {
    left: 1em;
    width: 70%;
  }
}

@media screen and (max-width: 860px) {
  .hero_section {
    grid-template-columns: 20% 35% 45%;
  }
  .about_section  {
    grid-template-columns: auto;
    grid-template-rows: auto auto;
  }
  .sec_11 {
    margin: 0em 0em 2.5em 0em;
  }
  .about_header {
    padding: 1.5em 0em 0em 1.2em;
  }
  .about_header::after {
    content: "";
    position: absolute;
    bottom: -0.7em;
    left: 9%;
    width: 20%;
    height: 7px;
    background: #CC1F2F;
    transform: rotate(0);
  }
  .sec_12 {
    grid-column: 1/2;
    grid-row: 2/3;
    margin: 0em 0em 1em 0em;
  }
  .sec_12 p {
    padding: 2em 3em 2em 3em;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 31%;
  }
}

@media screen and (max-width: 760px) {
  .hero_section {
    grid-template-columns: 20% 30% 50%;
  }
  .about_header {
    padding: 1.5em 0em 0em 1.1em;
  }
  .about_header::after {
    left: 10%;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 35%;
  }
}

@media screen and (max-width: 680px) {
  .hero_section {
    grid-template-columns: 20% 27% 53%;
  }
  .sec_01 p {
    font-size: 3.7rem;
  }
  .sec_02 p {
    font-size: 3.7rem;
  }
  .sec_03 p {
    font-size: 1.9rem;
    margin: 2.4em auto;
  }
  .about_header {
    font-size: 3.5rem;
    padding: 0.9em 0em 0em 1.2em;
  }
  .about_header::after {
    left: 11%;
  }
  .sec_12 {
    font-size: 1.5rem;
  }
  .sec_12 p {
    padding: 2em 3em 1.2em 3em;
  }
  .review_section {
    row-gap: 80px;
  }
  .review_header  {
    font-size: 3.5rem;
    margin: 0.1em 0em 0em 0.5em;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 37%;
    margin-bottom: 2.5em;
  }
  .description_p  {
    font-size: 1.35rem;
    padding: 2.2em 0.5em 1em 0.5em;
  }
}

@media screen and (max-width: 610px) {
  .hero_section {
    grid-template-columns: 20% 20% 60%;
  }
  .about_header {
    padding: 0.9em 0em 0em 0.8em;
  }
  .about_header::after {
    left: 8%;
  }
  .sec_12 p {
    padding: 2em 2em 1.2em 2em;
  }
  .review_header  {
    margin: 0.1em 0em 0em 0.1em;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 44%;
  }
}

@media screen and (max-width: 570px) {
  .sec_01 p {
    font-size: 3.4rem;
    margin: 1.3em 0em 0em 0em;
  }
  .sec_02 p {
    font-size: 3.4rem;
    margin: 0.7em 0em 0em 0.6em;
  }
  .sec_03 p {
    font-size: 1.8rem;
    margin: 2.2em auto;
  }
  .about_header {
    font-size: 3.3rem;
  }
  .about_header::after {
    width: 25%;
  }
  .sec_12 p {
    font-size: 1.4rem;
  }
  .review_header  {
    font-size: 3.2rem;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 50%;
  }
}

@media screen and (max-width: 530px) {
  .hero_section {
    grid-template-columns: 20% 16% 64%;
  }
  .sec_03 p {
    font-size: 1.7rem;
    margin: 2.3em auto;
  }
  .about_header {
    font-size: 3.1rem;
    padding: 0.6em 0em 0em 0.8em;
  }
  .about_header::after {
    left: 9%;
  }
  .sec_12 p {
    font-size: 1.3rem;
    padding: 2em 2em 0.3em 2em;
  }
  .review_section {
    row-gap: 50px;
  }
  .review_header  {
    font-size: 2.9rem;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 53%;
  }
  .name_p {
    margin-bottom: 3.2em;
  }
}

@media screen and (max-width: 485px) {
  .hero_section {
    grid-template-columns: 20% 13% 67%;
  }
  .sec_03 p {
    padding: 2em 1.6em;
  }
  .about_header {
    font-size: 2.8rem;
    padding: 0.6em 0em 0em 0.6em;
  }
  .about_header::after {
    left: 7%;
  }
  .sec_12 p {
    font-size: 1.28rem;
    padding: 2em 1.5em 0.3em 1.5em;
  }
  .review_section {
    padding: 0px 30px;
    row-gap: 40px;
  }
  .review_header  {
    font-size: 2.7rem;
  }
}

@media screen and (max-width: 440px) {
  .hero_section {
    grid-template-columns: 20% 10% 70%;
  }
  .sec_03 p {
    padding: 2em 1.5em 2em 1.9em;
  }
  .review_section {
    row-gap: 0px;
  }
  .review_header  {
    font-size: 2.5rem;
    padding-bottom: 1.2em;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 62%;
  }
  .description_p  {
    padding: 2.2em 0em 1em 0em;
  }
  .description_p::before {
    left: 34%;
    width: 32%;
  }
  .name_p {
    margin-bottom: 4em;
  }
}

/* iPhone 6/7/8 Plus */
@media screen and (max-width: 414px)  {
  .sec_01 p {
    margin: 0.9em 0em 0em 0em;
  }
}

/* iPhone 12 */
@media screen and (max-width: 390px)  {
  .hero_section {
    grid-template-columns: 20% 6% 74%;
  }
  .sec_01 p {
    margin: 1.6em 0em 0em 0em;
  }
  .review_header  {
    font-size: 2.44rem;
    padding-bottom: 1.4em;
  }
  .review_1 img, .review_2 img, .review_3 img {
    width: 68%;
  }
}

/* iPhone X */
@media screen and (max-width: 375px)  {
  .review_header  {
    font-size: 2.3rem;
  }
}

/* Samsung S10 / S20 */
@media screen and (max-width: 360px)  {
  .hero_section {
    grid-template-columns: 20% 3% 77%;
  }
  .sec_03 p {
    padding: 1.5em 1.2em 2em 1.7em;
  }
  .review_section {
    grid-template-rows: 7% auto auto auto 0%;
    padding: 0px 15px;
  }
  .review_header  {
    font-size: 2.2rem;
    margin: 0.1em 0em 0em 0.4em;
  }
}