/* -----------------
    the title
 -------------------*/
.section-title h1 {
  color: #08798c;
  font-size: 100px; 
  position: relative;
  width: 45%
}
.section-title{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title h2 {
    font-size: 45px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
    color: #71b36e;
    line-height: 1.7em;
  }

@media (max-width:1603px){
    .section-title h1{
        font-size: 500%;
    }
}
@media (max-width:1282px){
    .section-title h1{
        font-size: 406%;
    }
}
@media (max-width:1041px){
    .section-title h1{
        font-size: 330%;
    }
    .section-title h2{
        font-size: 40px;
    }
}
@media (max-width:847px){
    .section-title h1{
        width:55%
    }
}
@media (max-width:692px){
    .section-title h1{
        width:67%
    }
}
@media (max-width:570PX){
    .section-title h1{
        width:82%
    }
}
@media (max-width:464PX){
    .section-title h1{
        width:100%
    }

}
@media (max-width:380PX){
    .section-title h1{
        font-size: 42.3px;
    }
    .section-title h2 {
        font-size: 35px;
    }
}
@media (max-width:305PX){
    .section-title h1{
        font-size: 34.4px;
    }
    .section-title h2 {
        font-size: 30px;
    }
}

/*
------------------------
 the content section
------------------------
 */
.section-bg .container{
    margin-top: 50px;
    max-width: 1200px;
}
.background_white {
    background-color: #ffffff;
}
section .container .row h2{
    font-size: 350%;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;  
    color: #71b36e;
}
section .container .row h3{
    font-size: 300%;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;  
    color: #08798c;
    line-height: 1.7em;
}
section .container .row h4{
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 20px;
    padding-bottom: 20px;  
    line-height: 1.9em;
}
  section .container .row img {
    width: 50%;
  }
@media (max-width:991px){
    .tutorial {
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    section .container .row h2{
        font-size: 40px !important;
    }
    section .container .row h3{
        text-align: center;
        font-size: 35px !important;
    }
    section .container .row h4{
        text-align: center;
        font-size: 30px !important;
    }
}
@media (max-width:500px){
    section .container .row h2 {
        font-size: 30px !important;
    }
    section .container .row h3{
        font-size: 26px !important;
        text-align: center;
    }
    section .container .row h4{
        font-size: 24px !important;
        text-align: center;
    }
    section .container .row img {
        width: 80%;
      }
}
@media (max-width:403px){
    section .container .row h2 {
        font-size: 30px !important;
    }
    section .container .row h3{
        font-size: 25px !important;
        text-align: center;
    }
    section .container .row h4{
        font-size: 23px !important;
        text-align: center;
    }
    section .container .row img {
        width: 100%;
      }
}