.otop-why {
    font-size: var(--font-size-md); 
    font-weight: 600;
    height: auto;
    width: 100%;
    padding: 10px;
    margin: 0;
  }

  .img-contain-why{
    display: none;
    width: 900px;
    height: auto;
    padding: 30px; 
    display: flex;
    justify-content: center;
    align-items: center;
}
  
  
  
  @media screen and (max-width: 950px) {

    .otop-why {
      font-size: var(--font-size-md);
    }

     .img-contain-why{
      display: none;
    }

    .wbox{
      left: 0;
    }

    .oto{
      padding: 20px;

    }

  }


/* PRF Start */
    .grid-contain1{
        display: grid;
        grid-template-columns: .3fr 1fr 30px 1fr .3fr;
        grid-template-rows: repeat(5, auto);
        padding: 30px;
    }

    .problem{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        grid-column: 2/5;
        grid-row: 1/1;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .pr{
        font-size: var(--font-size-xl);
        font-weight: 900;
        padding-bottom: 20px;
    }

    .prp{
        padding-bottom: 20px;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: var(--font-cl);
    }

    .reason{
        display: flex;
        justify-content: flex-end;
        grid-column: 2;
        grid-row: 2;
        font-size: var(--font-size-xl);
        font-weight: 800;
    }

    .reasonp{
        grid-column: 4;
        grid-row: 2;
        padding-bottom: 30px;
        line-height: 1.6;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: #303133;
    }

    .facts{
        display: flex;
        justify-content: flex-end;
        grid-column: 2;
        grid-row: 3;
        font-size: var(--font-size-xl);
        font-weight: 800;
    }

    .factsp{
        grid-column: 4;
        grid-row: 3;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: #303133;
    }

    .facts-list{
        grid-column: 4;
        grid-row: 4;
        color: var(--font-li-g);
        font-size: var(--font-size-md);
        line-height: 1.75;
        margin-left: -15px;
    }

    .listfooter{
        display: flex;
        justify-content: center;
        align-items: center;    
        padding: 30px;
        font-size: var(--font-size-base);
        color: var(--font-li-g);
        font-weight: 900;
    }

    @media screen and (max-width: 1232px){
      .grid-contain1{
        display: grid;
        grid-template-columns:  1fr;
        grid-template-rows: repeat(6, auto);
        padding: 30px;
    }

    .problem{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        grid-column: 1;
        grid-row: 1/1;
        padding-bottom: 30px;
        padding-top: 30px;
    }

    .pr{
        font-size: var(--font-size-xl);
        font-weight: 900;
        padding-bottom: 20px;
    }

    .prp{
        padding-bottom: 20px;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: var(--font-cl);
    }

    .reason{
        display: flex;
        justify-content: center;
        grid-column: 1;
        grid-row: 2;
        font-size: var(--font-size-xl);
        font-weight: 800;
    }

    .reasonp{
        grid-column: 1;
        grid-row: 3;
        padding-bottom: 30px;
        line-height: 1.6;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: #303133;
    }

    .facts{
        display: flex;
        justify-content: center;
        grid-column: 1;
        grid-row: 4;
        font-size: var(--font-size-xl);
        font-weight: 800;

    }

    .factsp{
        grid-column: 1;
        grid-row: 5;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: #303133;
    }

    .facts-list{
        grid-column: 1;
        grid-row: 6;
        color: var(--font-li-g);
        font-size: var(--font-size-md);
        line-height: 1.75;
        margin-left: -15px;
    }

    .listfooter{
        display: flex;
        justify-content: center;
        align-items: center;    
        padding: 30px;
        font-size: var(--font-size-base);
        color: var(--font-li-g);
        font-weight: 900;
    }
    }
/* PRF END */

.blackrow{
    background-color: var(--font-cl);
    display: grid;
    grid-template-columns: .5fr 1fr .5fr;  
}

.bback-p{
    color: white;
    font-size: var(--font-size-xl);
    grid-column: 2;
    text-align: center;
}

/*Solution Start*/
    .sl-grid-contain{
        display: grid;
        grid-template-columns: 1fr .5fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
    }

    .Solution{
        grid-row: 1;
        grid-column: 2/5;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: var(--font-cl);
    }

    .solution--span{
        font-size: var(--font-size-xl);
        font-weight: 900;
        padding-bottom: 20px;
    }

    .solution--p{
        padding-bottom: 30px;
        font-size: var(--font-size-base);
        color: var(--font-li-g);
        text-align: center;
    }

    .reason--span{
        grid-column: 2;
        grid-row: 2;
        font-size: var(--font-size-xl);
        font-weight: 800;
        display: flex;
        justify-content: flex-end;
        color: var(--font-cl);
    }

    .reason--p{
        grid-column: 4;
        grid-row: 2;
        padding-bottom: 30px;
        line-height: 1.5;
        font-size: var(--font-size-md);
        font-weight: 500;
        color: var(--font-cl);
        margin: 0;
    }

    .features--span{
        grid-column: 2;
        grid-row: 3;
        font-size: var(--font-size-xl);
        font-weight: 800;
        display: flex;
        justify-content: flex-end;
        padding-top: 30px;
        color: var(--font-cl);
    }

    .reason--list{
        grid-column: 4;
        grid-row: 3;
        font-size: var(--font-size-md);
        line-height: 3;
        margin-left: -20px;
        list-style: none;
        color: var(--font-cl);
    }

    .reason_a{
     color: inherit;
     text-decoration: underline;
     cursor: pointer;
    }

    .reason_a:hover{
        color: var(--mainbackground);

    }

    @media screen and (max-width: 1232px){
      .sl-grid-contain{
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: repeat(5, auto);
    }

    .Solution{
        grid-row: 1;
        grid-column: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: var(--font-cl);
    }


    .reason--span{
        grid-column: 1;
        grid-row: 2;
        display: flex;
        justify-content: center;

    }

    .reason--p{
        grid-column: 1;
        grid-row: 3;
        text-align: center;
    }

    .features--span{
        grid-column: 1;
        grid-row: 4;
        display: flex;
        justify-content: center;
    }

    .reason--list{
        grid-column: 1;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .reason--list li{
      text-align: center;
    }

    }



/*Solution END*/