/* CSS Variables */
:root {
    --primary-color: #9899cc;
    --secondary-color: #6698cb;
    --navigation-bg: black;
    --hamburger-bg: #cb3332;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
font-family: "puffin", sans-serif;
font-weight: 400;
font-style: normal;
}

main h2 {
font-family: "gelica", sans-serif;
font-weight: 600;
font-style: italic;
}

aside h1 {
font-family: "merel", sans-serif;
font-weight: 700;
font-style: normal;
}

body header div p {
font-family: "merel", sans-serif;
font-weight: 700;
font-style: normal;
}



header div img.logo {
    width: 50%;
    position: relative;
}

header {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    justify-content: center;
    height: 5rem;
}

header div.leading {
    font-weight: 500;
    padding: 15px;
}

nav.responsive-nav {
    background-color: #cb3332;
}

header div.tel {
    font-weight: 500;
    padding: 15px;
}

header div p {
    color: white;

}



aside.hero {
    display: none;
}



main {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
    min-width: 360px;
}

/* main.home {
    font-family: 'Arimo', sans-serif;
    font-family: 'Inter', sans-serif;
    font-family: 'Playpen Sans', cursive;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-family: 'Rethink Sans', sans-serif;
    font-family: 'Roboto', sans-serif;
    font-family: 'Rubik', sans-serif;
} */

aside h1 {
    text-align: center;
    color: aliceblue;
    font-size: 2rem;
    display: block;
    font-weight: bold;
}

main h2 {
    font-size: 1.5rem;
    text-align: center;
    padding: 18px;
    color: white;
    background-color: var(--secondary-color);
}

main.home section.industry-general {
    background-color: aliceblue;}

main.about section.company-about {
        background-color: aliceblue;}


main.home section.industry-application {
        background-color: aliceblue;}


main.home section.industry-general div.left article {
    background-color: lightblue;
    padding: 10px;
    border: 1px;
    border-radius: 10px;
    margin: 10px; 
}

main.about section.company-about div.left article{
    background-color: lightblue;
    padding: 10px;
    border: 1px;
    border-radius: 10px;
    margin: 10px; 
    line-height: 1.5rem;
}

main.home section.industry-general div.right {
    padding: 10px;
}

main.about section.company-about div.right {
    padding: 10px;
}

main.home section.industry-general h3 {
    text-align: left;
    font-size: 1rem;
}

main.about section.company-about h3 {
    text-align: left;
    font-size: 1rem;
}


main.home h3 {
    font-size: 1rem;
    text-align: center;
}

main.about h3 {
    font-size: 1rem;
    text-align: center;
}

main section article h2 {
    text-align: center;
}
main.home section.industry-application article p {
    font-style: italic;
}

main.about section.honor article p {
    font-style: italic;
}

main.home section.industry-application article.application2 {
    display: none;
}

main.home section article figure {
    padding: 10px;
    border-radius: 10px;
}

main.about section article figure {
    padding: 30px;
    border-radius: 10px;
}

header {
    background-color: var(--navigation-bg);
}



main.home seciton.industry-general.left {
    text-align: left;
}

main.home section p {
    text-align: left;
}

a {
    text-decoration: none;
}

main section img {
    width: 100%;
}


main.home section article {
    min-width: 150px;
    }

main.home section article figure {
background-color: lightblue;    
margin: 10px
}

main.about section article figure {
    background-color: lightblue;    
    margin: 10px
    }
    main.about section.honor article p {
        font-style: italic;
        text-align: center;}


main.home section.partner img {
    min-width: 75px;
    max-width: 150px;
    width: 100%;
}

main.home section.partner {
    background-color: aliceblue;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding:20px;
    align-items: center;
    justify-items: center;

}

main h2 {
font-size: 1.5rem;
    text-align: center;
    padding: 18px;
    color: white;
    background-color: var(--secondary-color);}



    main.product section article figure{
        background-color: lightblue;
        margin: 10px;
        padding: 22px;
        border-radius: 10px;
    }
   

        main.product section {
            background-color: aliceblue;}



        main.product section article p {
            font-style: italic; }

    main.product section article {
            min-width: 150px;
            width:100%;
            }
  
 

    main.product section article:nth-child(2) {
                    display: none;}

footer {
    background-color: var(--secondary-color);
    padding: 1em;
}

footer p {
    color: white;
}

footer p.copyright {

    text-align: center;

}

.responsive-nav .nav-items {
    background-color: var(--hamburger-bg);
    list-style: none;
    padding: 0;
    display: none;
}

.responsive-nav .nav-items a {
    text-decoration: none;
    color: white;
}

.responsive-nav button {
    border: none;
    background-color: var(--hamburger-bg);
    color: black;
    font-size: 1em;
}

/* .time-icon::before {
    content: url('media/timer-icon.svg');
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right:10px;
    margin-bottom: 0; */

footer p.add::before {
    content: url(../media/location-24px.png);
    margin: 10px;
}

footer p.tel1::before {
    content: url(../media/telephone-call-24px.png);
    margin: 10px;
}

footer p.tel2::before {
    content: url(../media/telephone-call-24px.png);
    margin: 10px;
}

footer p.email::before {
    content: url(../media/email-file-24px.png);
    margin: 10px;
}

footer ul li {
    list-style: none;
    display: list-item;
}

main.product section article figure ol {
    line-height: 1.2rem;
    }

main.product section article figure h3 {
    padding-bottom: 10px;
}

main.home section article figure h3 {
    padding-bottom: 10px;
}

/* Medium Layout - based on medium.jpg mockup */
@media screen and (min-width: 600px) {
    header div img.logo {
        width: 43%;
        position: relative
    }

    aside.hero {
        /* display: block; */
        height: 400px;
        width: 100%;
        background-image: url("../media/hero_2.jpeg");
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    aside h1 {
        font-size: 3rem;
    }
main h2 {
    font-size: 2rem;
}
    header {
        grid-template-columns: 1fr 1.5fr 1.5fr;
        height: 4rem;
    }

    header div.leading {
        font-weight: 500;
        padding: 1
        5px;
    }

    header div.tel {
        font-weight: 500;
        padding: 15px;
    }

    header div p {
        color: white;
        font-size: 1rem;
    }

    aside.hero img {
        width: 100%;
    }


    main section article figure img {
        display: block;
        border-radius: 10px;
    }



    .responsive-nav .hamburger {
        display: none;
    }

    .responsive-nav .nav-items {
        display: flex;
    }

    .responsive-nav .nav-items li {
        margin: 1em;
    }

    main.home section.industry-general {
        display: flex;
        justify-content: center;
        padding: 20px;
        column-gap: 4px;
       }
 
    

    main.home section.industry-general div.right iframe{

        width: 300px;
        height: 315px;}

    main.about section.company-about div.right video{

            width: 300px;
            }

    main.home section.industry-application {
        display: flex;
        column-gap: 5px;
        justify-content: center;


    }

    main.home section.industry-application article.application2 {
        display: none;
    }
 
    main.about section.company-about {
        display: flex;
        justify-content: center;
    }


    main.home section.partner {
        grid-template-columns: 1fr 1fr 1fr;
    }

    main.about section.honor article :nth-child(4){
        display: none;
    }

    main.about section.honor  {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    main.about section.staff article :nth-child(4){
        display: none;
    }

    main.about section.staff {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-content: center;
    }

    main.product section article figure img {
        display: block;
        border-radius: 10px;}


    main.product section {
                    display: flex;
                    column-gap: 5px;
                    justify-content: center;}

    main.product section article:nth-child(2) {
                    display: none;}

main section article p {
    line-height: 1.3rem;
}

main.product section article figure ol {
line-height: 1.3rem;
}

}

/* Wide Layout - based on wide.jpg mockup */
@media screen and (min-width: 1000px) {
    header {
        grid-template-columns: 1fr 1.5fr 1.5fr;
    }

    aside.hero {
        /* display: block; */
        height: 400px;
        width: 100%;
        background-image: url("../media/hero_2.jpeg");
        background-size: cover;
        background-position: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    aside h1 {
        font-size: 5rem;
    }

    main h2 {
        font-size: 2.5rem;
    }

    header div img.logo {
        width: 28%;
        position: relative
    }

    

    header div.leading {
        font-weight: 600;
    }

    header div.tel {

        font-weight: 600;
    }

    header div p {
        color: white;
        font-size: 1.2rem;
    }

    aside.hero img {
        width: 100%;
    }


    main section article figure img {
        display: block;
        border-radius: 10px;
        width:100%;
    }

    .responsive-nav .hamburger {
        display: none;
    }

    .responsive-nav .nav-items {
        display: flex;
    }

    .responsive-nav .nav-items li {
        margin: 1em;
    }

    main.home section.industry-general {
        display: flex;
        justify-content: center;
        padding: 20px;
        column-gap: 4px;

    }

    main.home section.industry-general div.right iframe{

        width: 500px;
        height: 315px;}

    main.home section.industry-application {
        display: flex;
        column-gap: 5px;
        justify-content: center;
    }

    main.home section.industry-application article.application2 {
        display: block;
    }

    main.home section.partner {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }


    main.about section.honor  {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
    }



    main.about section.staff {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;}

    

    main.about section.company-about div.right video{

        width: 500px;
        }

        main.product section article figure image {
            display: block;
            border-radius: 10px;}

        main.product section article:nth-child(2) {
                display: block;}
    
        main.product section {
                display: flex;
                column-gap: 5px;
                justify-content: center;}

                main section article p {
                    line-height: 1.5rem;
                }
    
                main.product section article figure ol {
                    line-height: 1.5rem;
                    }
    }