#container{
    width: 100%;
    background-color: var(--background);
    padding: 80px 40px ;
}
.sub-title{
    font-size: 25px;
    padding-top: 5vh;
}
h1{
    font-size: 30PX;
    font-family: 'Nunito', sans-serif;

}
#container hr{
    width:35%; opacity: 1;
    border: 0.5px solid var(--primary-color);
    margin-top:  2vh;
    margin-bottom: 4vh;
}
.content{
    font-size: 1.8rem;
    line-height: 2.8rem;
    margin: 25px 0;
    text-align: justify;

}

ul.item > li:before{
    content: "- ";
    text-indent: -5px;
}

 
/* @media  (max-width: 1366px){
    #container h1{font-size: 2.8rem;line-height: 3rem;  text-align: center;}
    #container h3{  font-size: 2.8rem;
        line-height: 3.5rem;
        text-align: center;
  
   }
   #container hr{ display: none;} 
} */


@media (max-width: 428px){
    #container h1{font-size: 2.4rem;line-height: 3rem;  text-align: center;}
    #container h3{  font-size: 2.8rem;
        line-height: 3.5rem;
        text-align: center;
  
   }
#container hr{
    width:70%; opacity: 1;
    border: 0.5px solid var(--primary-color);
    margin-top:  2vh;
    margin-bottom: 2vh;
    margin-left: 6vh;
}
  }
  
  @media (min-width: 429px) and (max-width: 768px){
    #container h1{font-size: 2.8rem;line-height: 3rem;  text-align: left;}
    #container h3{  font-size: 2.8rem;
        line-height: 3.5rem;
        text-align: left;
    }
  #container hr{
    width:35%; opacity: 1;
    border: 0.5px solid var(--primary-color);
    margin-top:  2vh;
    margin-bottom: 2vh;
}
  
   }