.container {
    position: relative;
    max-width:100%;
    text-align: center;
    margin-top: 60px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* For all header */
.mid h1{
    color:lightgray;
    font-weight: 600;
    text-align: center;
    top: 50%;
    left: 50%;
    font-size: 3.5rem;
}

.left h1 {
    color:lightgray;
    font-weight: 600;
    text-align: left;
    top: 50%;
    left: 50%;
    font-size: 3.5rem;
}

.Section{
    margin-bottom: 80px;
    margin-top: 80px;
}
.h1_hr{
    border: 5px solid #ffc107;
    width:8%;
}

a:link{
    color: white;
}
.mid h2 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2.9rem;
    transform: translate(-50%, -70%);
}

.fixed-bg-gate h2 {
    color:black;
    font-weight:600;
    top:50%
    left:50%;
    font-size:4.0rem;
    font-family:auto;
}

.fixed-bg-gate h3 {
    font-size:3.0rem;
}

.Div_Content{
    height:auto;
    background-color:white;
    margin-bottom: 80px;
    margin-top: 80px;
}
.fixed-bg-gate {
    /* The background image */
    background-image: url("src/Gate.png");

    /* Set a specified height, or the minimum height for the background image */
    min-height: 100%;

    /* Set background image to fixed (don't scroll along with the page) */
    /*background-attachment: fixed;*/

    /* Center the background image */
    background-position: center;

    /* Set the background image to no repeat */
    background-repeat: no-repeat;

    /* Scale the background image to be as large as possible */
    background-size: cover;
}
.fixed-bg-about {
    /* The background image */
    background-image: url("src/Factory.jpg");

    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;

    /* Set background image to fixed (don't scroll along with the page) */
    /*background-attachment: fixed;*/

    /* Center the background image */
    /*background-position: right;*/

    /* Set the background image to no repeat */
    background-repeat: no-repeat;

    /* Scale the background image to be as large as possible */
    background-size: cover;
}
/* Style the counter cards */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    text-align: center;
    background-color: #D3D3D3;
    height: 400px;
}

.card2 {
    padding: 16px;
    text-align: left;
    background-color: white;
}
.card2.p {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1.2rem
;
}

.card3 {
    padding: 16px;
    text-align: left;
    background-color: white;
    line-height: 30px;
}

.product_img{
    width: 100%;
    height: auto;
}

.factory_img {
    width:90%;
    height：auto;
}


/* Float four columns side by side */
.column {
    float: left;
    width: 30%;
    padding: 0 10px;
}
/* Float four columns side by side */
.column2 {
    float: left;
    width: 50%;
    padding: 0 10px;
}

.column3 {
    width: 50%;
    float:left;
}

.column_about{
    float: left;
    margin-left: 10%;
    width: 50%;
}

.column_about hr{
    margin-left: 0%;
    width: 10%;
}
.column_about_bg{
    float: left;
    margin-left: 10%;
    margin-right: 0%;
    width: 45%;
}

.column_about h1{
    color:lightgray;
    font-weight: 600;
    text-align: left;
    top: 50%;
    left: 50%;
    font-size: 3.5rem;
}
/*.column_about p{
    font-size: 1.7rem;
}*/
.column2 h3{
    line-height: 200%;
}

/* Remove extra left and right margins, due to padding */
.row_product {
    margin-left: 10%;
    margin-bottom: 80px;


}

.row_about {
   margin-left: 5%;
}

.row_about1 {
   margin-left: 15%;
   margin-right: 15%;
}

/* Clear floats after the columns */
.row_product:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}