.responsive-box {
     width: 80%;
    flex: 1;
    min-width: 300px;
   max-width: 600px;
    padding: 40px;
}

img {            
    display: block;             
    object-fit: contain;   
}
 /*--this is the style for the paragraphs, I previously made the paragraphs being put within the content section, I did this since it is pretty hard styling the paragraphs with it alone, I tried using a container for my paragraphs, but sadly it didt work.    --*/

.content-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px; 
}

/*--this is the style for my heading 1.  --*/
.main-heading {
                text-align: center;
                padding: 30px;
            }

    /*--this is the responsive stlying for my template  --*/
    @media (max-width: 768px) {
         .header {    
                display:flex;
                justify-content: space-between;
                align-items: center;
                padding:15px 30px;
                }
                
                
    
                }
                

            /*--the end  --*/