/* -------- universal style -------- */
/* header */
header {
    color: #fff;
    background-color: #3d405b;
    background-image: url(../images/image-2.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 2em;
}

.grid-container {
    display: grid;
    padding: 0.5em;
    background-color: rgba(0, 0, 0, 0.376);
}

.header-intro p, .header-intro a {
    margin: auto;
}

.menu-list {
    text-align: center;
    list-style-type: none;
    padding: 0;
    background: #f2cc8f;
    margin-bottom: 0;
}

.menu-list li {
    word-spacing: 2em;
}

/* main */
main {
    display: block;
    width: 80%;
    text-align: left;
    margin: auto;
}

section {
    margin-bottom: 2em;
}

section::after {
    display: block;
    content: "";
    height: 0.05em;
    background-color: #3d405b;
    margin: 0.1em 0em;
}

section:first-child::after {
    display: none;
}

section:last-child::after {
    display: none;
}

.icon {
    width: 0.7em;
}

h2, h3 {
    text-align: center;
}

/* section - about */
#about {
    border: #3d405b 0.5em double;
    border-radius: 0.5em;
    padding: 1em;
    margin-bottom: 2em;
}

#about p, .price, #services ul {
    text-align: center;
}

/* section - services */
#services>p, #contact>p, #techu>p {
    text-align: center;
}

#services li {
    list-style-type: none;
}

/* section - contact */
table {
    margin: auto;
}

caption {
    text-align: center;
    caption-side: top;
}

tr, td, th {
    border: #3d405b 1px dashed;
    padding: 0.5em;
    text-align: center;
}

/* footer style */
footer {
    background-color: #f2cc8f;
    text-align: center;
    padding: 1em;
}

footer p {
    margin-bottom: 0;
}

footer p:nth-of-type(3){
    margin-bottom: 1rem;
}

/* -------- mobile phone -------- */
@media screen and (max-width: 767px) {
    :root {
        font-size: 70%;
    }

    /* header */
    h1 {
        font-size: 2rem;
    }

    .grid-container {
        grid-template-rows: 1fr 1fr;
        text-align: center;
    }

    .logo {
        grid-row: 1/2;
        text-align: center;
        margin: auto;
    }

    .logo img{
        width: 50vw;
        height: auto;
    }

    .phone-header-intro{
        grid-row: 2/3;
    }

    .header-intro p {
        display: inline;
    }
    
    .menu-list li::after {
        display: block;
        content: "";
        height: 0.05em;
        background-color: #3d405b;
        margin: 0.1em 7em;
    }

    .menu-list li:last-child::after {
        display: none;
    }

    /* section - contact */
    .tech-support {
        margin: 2em auto;
    }

    /* section - techu */
    .techu-item:nth-of-type(2), .techu-item:nth-of-type(3), .techu-item:nth-of-type(4) {
        margin-top: 1em;
    }
}

/* -------- tablet -------- */
@media screen and (min-width: 768px) and (max-width:1024px) {
    /* header */
    header {
        background-position: center top 20%;
    }

    .grid-container {
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;
    }

    .logo {
        grid-column: 1/2;
        text-align: center;
        margin: auto;
    }
    
    .phone-header-intro {
        grid-column: 2/3;
    }

    .menu-list {
        padding:0.3em 0;
    }
    
    .menu-list li {
        display: inline;
        font-size: 1.3rem;
        word-spacing: 2em;
    }

    /* section */
    .row {
        padding: 0 1rem 1rem;
        overflow: hidden;
        display: flex;
        flex-flow: row wrap;
        align-content: space-between;
    }

    /* section - help */
    .six-col, .six-col-m {
        width: 45%;
    }

    .mg-right-two-m {
        margin-right: 10%;
    }

    /* section - services */
    table {
        margin: 0;
    }

    .four-col {
        width: 30%;
    }

    .mg-right-three-m {
        margin-right: 5%;
    }

    /* section - contact */
    .inquiries, .tech-support {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    /* section - techu */
    .techu-item {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .techu-item:nth-of-type(3), .techu-item:nth-of-type(4) {
        margin-top: 2em;
    }

    #techu h3 {
        text-align: left;
    }
}

/* -------- desktop -------- */
@media screen and (min-width: 1025px) {
    /* header */
    header {
        background-position: center top 30%;
    }

    .grid-container {
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;
    }

    .logo {
        grid-column: 1/2;
        text-align: center;
        margin: auto;
    }
    
    .grid-container .header-intro {
        grid-column: 2/3;
    }

    .menu-list {
        text-align: center;
        list-style-type: none;
        padding: 0;
        background: #f2cc8f;
        margin-bottom: 0;
        padding:0.3em 0;
    }
    
    .menu-list li {
        display: inline;
        font-size: 1.3rem;
        word-spacing: 2em;
    }

    /* section */
    .row {
        padding: 0 1rem 1rem;
        overflow: hidden;
        display: flex;
    }

    /* section - help */
    .six-col {
        width: 50%;
    }

    /* section - services */
    .four-col {
        width: 33.3333%;
    }

    table {
        margin: 0;
    }

    /* section - contact */
    .inquiries, .tech-support {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* align-content: space-between; */
        align-items: center;
    }

    .tech-support {
        margin: 0;
    }

    /* section - techu */
    .three-col-l {
        width: 22%;
    }

    #techu h3 {
        text-align: left;
    }

    .mg-right-two-m {
        margin-right: 10%;
    }

    .mg-right-four-l {
        margin-right: 4%;
    }

    .techu-item {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* footer */
    footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 2em;
        padding-bottom: 0.5rem;
    }

    footer p:nth-child(3) {
        margin-bottom: 0;
    }
}