.oto-fm {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 610px;
  background-color:rgb(88, 195, 118);
  padding: 20px;
}

.wbox-fm { 
  max-height: 420px;
  max-width: 525px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px;
  background-color: #ffffff;
  position: relative;
  right: 8vw;
}

.otoh-fm {
  font-size: var(--font-size-xxl);
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;

}

.otop-fm {
  font-size: var(--font-size-md); 
  padding-top: 20px;
  height: auto;
  width: 100%;
  margin: 0;
 
}

.img-contain-fm{
  width: 900px;
  height: auto;
  padding: 30px; 
  display: flex;
  justify-content: center;
  align-items: center;
}


.otoi-fm {
  max-width: 800px;
  max-height: 100%;
  width: 100%; 
  height: auto;  
  display: block;
  z-index: 1;
  min-height: 215px;
  min-width: 322px;
}

@media screen and (max-width: 1200px){


  .oto-fm {
    height: auto;
  }

  .wbox-fm{
    padding: 20px;
  }

  .otoh-fm {
    font-size: var(--font-size-xl); 
  }

  .otop-fm {
    font-size: var(--font-size-base); 
  }

}




@media screen and (max-width: 860px){
  .oto-fm {
    height: auto;
  }


  .wbox-fm {
    max-width: 250px;
    padding: 15px;
    padding: 40px;
    left: 0;
  }

  .img-contain-fm {
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }

  .otoi-fm{
    display: none;
  }

  .otoh-fm {
    font-size: var(--font-size-xl); 
  }

  .otop-fm {
    font-size: var(--font-size-base);
  }


}


  

/* slide show start */
.slider{
    position: relative; 
    height: auto; 
    width: 100%;
    background-color: lightgrey;
    overflow-x: hidden;
  }
  
  .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    max-width: 100%;
  }
  
  .slide {
    flex: 1;
    min-width: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
  }
  
    .slide-1 {
      display: flex;
      flex-direction: column;
      text-align: center;
      width: 600px;
      max-height: 690px;
      min-height: 400px;
      padding: 36px;
      align-self: center;
      height: auto;
      object-fit: cover; 
    }
    
    .slide-2 {
      display: flex;
      flex-direction: column;
      text-align: center;
      width: 600px;
      max-height: 690px;
      min-height: 400px;
      padding: 36px;
      align-self: center;
      justify-content: center;
      height: auto;
      object-fit: cover; 
    }
  
    .slide-3 {
      display: flex;
      flex-direction: column;
      text-align: center;
      width: 600px;
      max-height: 690px;
      min-height: 400px;
      padding: 36px;
      align-self: center;
      justify-content: center;
      height: auto;
      object-fit: cover; 
    }
    
    .title {
      text-align: left;
      max-width: 600px;
      font-size: var(--font-size-xl);
      color: var(--font-cl);
    }
    
    .quotes {
      padding-top: 36px;
      font-size: var(--font-size-base);
      text-align: left;
      line-height: clamp(7px, 3.45vh, 1.5em);
      color: var(--font-li-g);
      margin: 0;
    }
    
    .names {
      padding-top: 36px;
      text-align: left;
      font-size: var(--font-size-base);
      color: var(--font-li-g);
      margin: 0;
      padding-bottom: 20px;
    }

    .boldnm{
        color: var(--font-cl);
    }
    
    button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      height: 70px;
    } 
    
    .prev {
      left: 0;
    }
    
    .next {
      right: 0;
    }

    .bttnlg{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    width: 225px;
    background-color: #61b85a;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 19px;
    color: white;
    transition: all 0.3s ease;
    }

    .bttnlg:hover {
    background-color: white;
    border: 2px solid #61b85a;
    color: #61b85a;
  }



    /*Photo Block*/
    .photoblock{
        background-color: var(--footer);
    }

    /*block 2*/
    
/* Block 2 */
.block2 {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 5fr 1fr;
}


.block2 > *:nth-child(even) {
  background-color: #e3f3e6; 
}

.block2 > *:nth-child(odd) {
  background-color: #ffffff; 
}

.sticky {
    display: flex;
    justify-content: flex-end;
    padding-top: 20px;
    position: sticky;
    position: -webkit-sticky;
    top: 10px; 
    z-index: 1;
}

.rw1--h1,
.rw3--h3{
  grid-row: 1/2;
  grid-column: 1;
  font-size: var(--font-size-lg);
  text-align: end;
  height: fit-content;
}

.rw2--h2,
.rw4--h4{
  grid-row: 1/2;
  grid-column: 2;
  font-size: var(--font-size-lg);
  text-align: end;
  height: fit-content;
}

.bl2--rw1,
.bl2--rw2,
.bl2--rw3,
.bl2--rw4{
  padding: 30px;
}

.rw1--p,
.rw1--p2,
.rw2--p,
.rw2--p2,
.rw2--p3,
.rw3--spn,
.rw3--ul,
.rw4--p,
.rw4--p2{
    margin: 0;
    padding-bottom: 20px;
    font-size: var(--font-size-md);
    color: var(--font-cl);
}

/*rw1*/

.bl2--rw1{
    grid-column: 2;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns:  1fr 60px 4fr;
}


.rw1--p{
    grid-row: 1;
    grid-column: 3;
}

.rw1--p2{
    grid-row: 2;
    grid-column: 3;
}


.rw1-btn {
    grid-row: 3;
    grid-column: 3;
    padding-top: 0;
    padding-bottom: 0;
}

/* Row 2 */

.bl2--rw2{
    grid-column: 1/4;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 60px 4fr 1fr;
}

.rw2--p {
    grid-row: 1;
    grid-column: 4;
}

.rw2--p2{
    grid-row: 2;
    grid-column: 4;
}

.rw2--p3 {
    grid-row: 3;
    grid-column: 4;
}

/* Row 3 */

.bl2--rw3{
    grid-column: 2;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 60px 4fr;
}

.rw3--spn{
    grid-row: 1;
    grid-column: 3;
    height: fit-content;
}

.rw3--ul li{
    line-height: 1.8;
}

/* Row 4 */

.bl2--rw4{
    grid-column: 1/4;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 60px 4fr 1fr;
}

.rw4--p{
    grid-column: 4;
    grid-row: 1;
}

.rw4--p2{
    grid-column: 4;
    grid-row: 2;
  }

  @media screen and (max-width: 800px){

    .block2 {
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: 9fr;
    }

    .sticky {
      all: unset;
    }

    .bl2--rw1,
    .bl2--rw2,
    .bl2--rw3,
    .bl2--rw4{
      padding: 30px;
      display: flex;
      flex-direction: column;
    }

    .rw1--h1,
    .rw2--h2,
    .rw3--h3,
    .rw4--h4{
      font-size: var(--font-size-lg);
      padding-bottom: 20px;
      text-align: center;
    }
  }

/*block3*/
.bl3--gridcontain{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    line-height: 1.5;
}

.bl3--p1{
    grid-column: 2;
    font-size: var(--font-size-lg);
}

.bl3--p2{
    grid-column: 2;
    font-size: var(--font-size-lg);
}

@media screen and (max-width: 800px){
  .bl3--gridcontain{
    display: flex;
    flex-direction: column;
    line-height: 1.5;
    padding: 20px;
}
}

/*block4*/

.block4{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
  }
  
  .bl4--gridcon{
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
    gap: 40px;
    padding-bottom: 30px;
  }
  
  .bl4--gridcon img{
    max-width: 96px;
    height: auto;
    padding-right: 5px;
  }
  
  .bl4--h {
    color: var(--font-cl);
    font-size: var(--font-size-lg);
  }
  
  .bl4--gridcon p{
    color: var(--font-li-g);
  }

  .box1--grid{
    grid-column: 2;
  } 

  .box2--grid{
    grid-column: 3;
  }
  
  .box3--grid{
    grid-column: 4;
  }

  .box1--grid,
  .box2--grid,
  .box3--grid{
    display: grid;
    grid-template-columns: auto;
  }

  
  .box-1,
  .box-2,
  .box-3{
    line-height: 1.75;
    grid-column: 2;
  }

  .spcrt,
  .blcash,
  .blgear{
    grid-column: 1;
  }

  @media screen and (max-width: 800px){
    .block4{
      padding: 20px;
    }
    
    .bl4--gridcon{
      display: flex;
      flex-direction: column;
      gap: 40px;
      padding-bottom: 30px;
    }
  }

  /*block 5*/
  
.block5{
    background-color: #61b85a;
    color: white;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
  }

  .bl5--gridcon{
    grid-column: 2;
  }

  .bl5--h1{
    font-size: var(--font-size-lg);
    padding: 40px 0;
    display: flex;
    justify-content: center;

  }
  
  .bl5--h2{
    font-size: var(--font-size-xl);
    display: flex;
    justify-content: center;
    padding-bottom: 40px;

  }

  .line-2{
    border: 0;
    border-top: 1px solid white;
    display: flex;
  }

  .bx--con{
    display: grid;
    grid-column: 1fr 1fr 1fr;
    padding-top: 30px;
  }

  .cp--bx1,
  .cp--bx2,
  .cp--bx3{
    margin: 0 70px;
    text-align: center;
  }

  .cp--bx1{
    grid-column: 1;
  }

  .cp--bx2{
    grid-column: 2;
  }

  .cp--bx3{
    grid-column: 3;
  }

  .bx--con {
    font-size: var(--font-size-xl);
    margin: 0;
  }

  .bl5--p{
    font-size: var(--font-size-base);
  }

  @media screen and (max-width: 800px){
    .block5{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .bl5--h2{
      text-align: center;
    }

    .bx--con{
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding-top: 30px;
    }
  
  }

  /*block6*/
  
  .block6{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
    color: var(--font-cl);
    padding: 30px;
  }

  .bl6--h1{
    text-align: center;
    font-size: var(--font-size-xxl);
    padding: 30px;
  }
  
  .bl6--bttndb a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 55px;
    width: auto;
    background-color: #61b85a;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'roboto', sans-serif;
    font-weight: bold;
    font-size: var(--font-size-base);
    color: white;
    transition: all 0.3s ease;
    padding-left: 30px;
    padding-right: 30px;
    word-spacing: 2px;
    }
    
    .bl6--bttndb a:hover {
      background-color: white;
      border: 1px solid #61b85a;
      color: #61b85a;
    }