:root{
    --white: #fff;
    --text: #000;
    --pale: #E1AA58;
    --red: #E61616;
    --shadedwhite: #dddddd;
}

*{ /*universal, for all of the features*/
    margin: 0; /*remove the space between the top and right-most*/
}

body{
    background-color: var(--white);
}

#header-img,
.the-product{ /*set the place for the logo and the name*/
    margin-left: 370px;
}

#header-img{
    width: 50px;
    object-fit: contain; /*allows the image to fit wheter its aspect ratio*/
}

#nav-bar{
    display: flex; /*flexible box layout, can arrange the elements within a container, either vertical or horizontally*/
    flex-direction: column; /*flex items should be laid out vertically along the cross axis*/
    justify-content: space-around; /*evenly spaces the flex items along the main axis*/
    align-items: center; /*put all the items in the middle */
    position: fixed; /*positioned relative to the browser window*/
    width: 100%; /*put all the items in the middle */
    top: 0; /*header will stay at the top of the screen even when the user scorlls*/
    background-color: var(--white);
    padding: 10px; /*space for each elements*/
}

.nav-links{
    display: flex; /*to make it side-by-side*/
    list-style: none; /*remove the dot*/
}

.nav-links a{
    text-decoration: none; /*remove the underline*/
    color: var(--text); 
    padding: 5px 15px; /*space top-bottom left-right*/
    font-family: "montserrat";
    font-size: 18px;
    margin-right: 35px;
    margin-top: 10px;
}

.the-product{
    font-size: 25px;
    margin-left: 20px; /*space from the logo*/
    font-weight: 700; /*bold text*/
    font-family: "montserrat";
}

#company-profile{
    margin-top: 150px; /*space between the top margin and the h2*/
    font-family: "montserrat";
    font-size: 20px;
}

section::before{ /*create an imaginary elemnt, doesn't exist in the HTML markup*/
    display: block;
    content: " "; /*create a empty element*/
    margin-top: -100px; /*pulls up the content above where it would naturally appear*/
    height: 100px;
    visibility: hidden; /*taken all space that the-product have use it*/
    pointer-events: none; /*not interecting with clicks or hovers*/
}

#features p{
    font-family: "montserrat";
    font-size: 20px;
    text-align: center;
}

#features h2{
    font-family: "montserrat";
    margin-top: 30px;
    text-align: center;
}

section{
    margin: 40px 20px; /*top-bottom left-right*/
    text-align: center; /*put all the content in the middle*/
} 

#features{
    text-align: left; /*make the h2 to the left*/
    max-width: 800px;
    margin: auto;
}

.feature{
    display: flex; /*make the icon stay in the left of the senteces*/
    align-items: center; /*put it in the center of the senteces*/
    justify-content: center;
    margin: 30px; /*spaces between the features*/
    font-family: "montserrat";
}

#garage{
    width: 100%;
    margin-top: 5px;
}

#laboratory-facilities,
#production-facilities,
#production-area,
#warehouse,
#products,
#customers,
#contact-us{
    font-family: "montserrat";
    color: var(--red);
}

#customer-text{
    font-family: "montserrat";
    color: var(--text);
    font-size: 12px;
    margin: 0 150px 0 150px;
}

.laboratory-cards{
    margin-top: 30px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(270px, 1fr)); /*3 card in one line, min width 270px, max width is the available space*/
}

.laboratory-image{
    width: 100%;
    margin: auto;
    height: 350px;
    border: 1px solid var(--text);
    border-radius: 10px 10px 0 0;
    background-repeat: no-repeat; /*make the background image not repeating*/
    background-size: cover; /*fit the whole screen*/
}

.laboratory1{
    background-image: url('images/connecting-jig-tester.jpg');
}

.laboratory2{
    background-image: url('images/push-pull-machine.jpg');
}

.laboratory3{
    background-image: url('images/digital-clipper.jpg');
}

.laboratory4{
    background-image: url('images/digital-micrometer.jpg');
}

.laboratory5{
    background-image: url('images/dino-lite-digital-microscope.jpg');
}

.card{
    background-color: var(--shadedwhite);
    border-radius: 10px;
    width: 90%;
    margin: auto; /*make the item in the middle*/
    margin-bottom: 10px; /*space between the items*/
}

.inner-card{
    display: flex;
    flex-direction: column; /*rearrange the sentences place*/
    justify-content: space-around;
    padding: 10px;
}

.content{
    font-family: "montserrat";
    color: var(--text);
    margin-bottom: 10px;
}

.function{
    font-family: "montserrat";
    color: var(--text);
    text-transform: uppercase;
}

.name{
    font-family: "fraunces";
    margin: 10px 0; /*top-bottom left-right*/
    color: var(--red);
}

.production-cards{
    margin-top: 30px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(270px, 1fr)); /*3 card in one line, min width 270px, max width is the available space*/
}

.production-image{
    width: 100%;
    margin: auto;
    height: 400px;
    border: 1px solid var(--text);
    border-radius: 10px 10px 0 0;
    background-repeat: no-repeat; /*make the background image not repeating*/
    background-size: cover; /*fit the whole screen*/
}

.production1{
    background-image: url('images/yxt200.jpg');
}

.production2{
    background-image: url('images/koderac370a.jpg');
}

.production3{
    background-image: url('images/koderac380.jpg');
}

.production4{
    background-image: url('images/TX1.2.jpg');
}

.production5{
    background-image: url('images/machine-crimping.jpg');
}

.production6{
    background-image: url('images/machine-crimping2.jpg');
}

.production7{
    background-image: url('images/chulun-crimping.jpg');
}

.production8{
    background-image: url('images/j:n.jpg');
}

.production9{
    background-image: url('images/leoco.jpg');
}

.production10{
    background-image: url('images/machine-crimping3.jpg');
}

.production11{
    background-image: url('images/stripping-cramping-machine.jpg');
}

.production12{
    background-image: url('images/stripping-cramping-machine2.jpg');
}

.production13{
    background-image: url('images/winding-machine.jpg');
}

#production-area .production-area{
    display: grid;
    grid-template-columns: repeat(3, minmax(270px, 1fr));
    gap: 30px;
    padding: 20px;
    place-items: center;
    max-width: 1200px;
    margin: 30px auto;
}

#production-area .area-tile{
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--shadedwhite);
    border-radius: 10px;
    
}

#production-area .area-tile img,
#warehouse .warehouse-tile img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#production-area .area-tile p,
#warehouse .warehouse-tile p{
    font-size: 23px;
    padding: 20px;
    font-family: "montserrat";
    color: var(--red);
}

#warehouse .warehouse{
    display: grid;
    grid-template-columns: repeat(2, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px;
    place-items: center;
    max-width: 800px;
    margin: 30px auto auto auto;
}

#warehouse .warehouse-tile{
    height: 500px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--shadedwhite);
    border-radius: 10px;
}

#products .products,
#customers .customers{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    max-width: 1400px;
    margin: 30px auto;
    padding: 20px 10px;
}

#contact-us{
    width: 80%;
    margin: auto;
    padding: 80px 0 0 0;
}

#contact-us iframe{
    width: 100%;
    margin-top: 50px;
}

#contact-text p{
    font-family: "montserrat";
    color: var(--text);
    font-size: 20px;
}

.outer-footer{
    padding: 50px 10px 10px 10px;
    text-align: center;
    color: var(--text);
    font-size: 15px;
    font-family: "montserrat";
}

@media only screen and (min-width: 600px){ /*css rules for screens with a min width of 600 px*/
    #nav-bar{
        flex-direction: row;
    }
}

@media only screen and (450px < width < 600px){ /*css rules for screens between 450 px and 600 px*/
    .card{
        font-size: 0.85rem;
    }
    .facility-image{
        height: 400px;
    }
    #contact-us{
        width: 60%;
    }
}

@media only screen and (450px <= width){ /*css rules for screens if its under 450 px*/
    .card{
        display: flex;
        max-width: 525px;
    }
    .inner-card{
        width: 300px;
        padding: 20px;
    }
    .facility-image{
        width: 400px;
        border-radius: 10px 0 0 10px;
    }
}

@media only screen and (width >= 1000px){ /*css rules for screens if its greater than 1000 px*/
    #garage{
        width: 60%;
    }
    .facilities-cards{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}