/*--this are all the responsive style for the information page. the one below is responbile for the postion of the images and the paragraphs --*/
         .responsive-container {
display: flex;
    margin: 40px auto; 
    max-width: 1200px; 
    padding:  40px; 
    align-items: flex-start;
}


    .responsive-container img {
        width: 100%;
        height: auto;
        display: block;
    }
    

    .image-container {
        flex: 0 1 auto; 
        width: 500px; 
        margin: 0 20px;
    }
       /*--this is the paragraph styling, I previously had some troubles making the text not being to distance I want with the images, so I did some research  and used this method.  --*/
 
/*-this is the h4 styling of the text, this is to make sure that it is able to be creating a certain distance between it and the image, or else the text would just crash with the image, the same thing goes for the text container p  --*/

.text-container {
    flex: 1;
    min-width: 300px;
    font-size: 16px;
    padding: 20px;
    margin: 0 20px;
}
   
.text-container p {
    flex: 1;
    min-width: 300px; 
    font-size: 16px;
    margin: 0 0 16px;
}
    /*- since my paragraph is positioned on the both the right and left side, and it's veyr hard editing it individually since of the styling in the style.css can cause the text to crash with the information text styles, so I made another style for the paragraphs and h4 individually in this information page --*/


#right p{
     width: 100%;
    max-width: 500px;
        font-size: 17px;
        margin: -20px;
    
} 

#left h4{
        width: 100%;
        max-width: 500px;
        font-size: 17px;
        margin: 10px;
    }

 
    
@media (max-width:768px){
    .responsive-container{
        flex-direction: column;
        margin: 40px 20px;
    }
    .image-container{
        width: 100%;
        max-width:600px;
        margin: auto;
    }
 
}