nav li:nth-child(4) {
    border-bottom: 2px solid white;
}

header {
    background-size: initial;
    height: initial;
    background-position: initial;
    position: initial;
}

#bg {
    position: relative;
    padding: 120px 120px 40px;
    background-color: #3ABFBC;
    color: #efefef;
}

#bg h2 {
    max-width: 500px;
    font-size: 40px;
    padding-bottom: 20px;
    line-height: normal;
    color: #fff;
}

#bg .highlight {
    color: #FFD966;
}

#title {
    color: #3ABFBC;
    padding-top: 60px;
    padding-left: 120px;
}

#title h2 {
    text-decoration: underline;
}

#intro {
    color: #919396;
    text-align: left;
    max-width: 85%;
    padding-left: 120px;
    margin-bottom: 60px;
}

#intro p {
    padding: 10px 10px 10px 60px;
}

#role {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 30px;
    padding-bottom: 200px;
    max-width: 1080px;
    margin: 0 auto;
}

#role div {
    height: 300px;
    box-shadow: 6px 6px 20px rgba(144, 144, 144, 0.4);
    padding: 10px;
    margin: 0 5px 20px;
    border: 1px solid #ddd;
    color: #3ABFBC;
    font-weight: 700;
}

#role h2 {
    font-size: 30px;
}

#role p {
    font-weight: 100;
    font-size: 15px;
}

#role .IE {
    box-sizing: border-box;
    width: 420px;
    background: url("https://megainterview.com/wp-content/uploads/2023/02/What-Does-an-Inspection-Engineer-Do.jpeg") top no-repeat;
    background-size: 100% 75%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px 0 0 0;
    transition: transform 0.2s ease-in-out;
}

#role .IE h2,
#role .weld h2 {
    padding: 5px 10px 10px 10px;
    margin-top: auto;
    font-size: 20px;
}

#role .coat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 620px;
    background: linear-gradient(to right, #3ABFBC, rgba(255, 255, 255, 0) 90%), url("https://ssw-americas.com/wp-content/uploads/sites/16/2020/10/92084-182-coating-inspector-program-from-nace-v3.jpg") top/cover no-repeat;
    color: #fff;
    border-radius: 0 15px 0 0;
    transition: transform 0.2s ease-in-out;
}

#role .auto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 50px 60px 80px;
    box-sizing: border-box;
    width: 340px;
    background: #3ABFBC;
    color: #fff;
    transition: transform 0.2s ease-in-out;
}

#role .weld {
    box-sizing: border-box;
    width: 340px;
    background: url("https://www.twitraining.com/assets/images/course/welding-inspector-1.jpg") top no-repeat;
    background-size: 100% 75%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease-in-out;
}

#role .specialized {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 50px 60px 60px;
    box-sizing: border-box;
    width: 340px;
    background: #3ABFBC;
    color: #fff;
    transition: transform 0.2s ease-in-out;
}

#role .specialized p {
    padding: 5px 10px 5px 10px;
}

#role .test {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 60px 50px 60px 60px;
    box-sizing: border-box;
    width: 680px;
    background: #3ABFBC;
    color: #fff;
    border-radius: 0 0 0 15px;
    transition: transform 0.2s ease-in-out;
}

#role .cert {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 50px 60px 60px;
    box-sizing: border-box;
    width: 360px;
    background: #fff;
    border-radius: 0 0 15px 0;
    transition: transform 0.2s ease-in-out;
}

#role .coat h2,
#role .auto h2,
#role .specialized h2,
 #role .cert h2,
 #role .test h2 {
    max-width: 250px;
    margin-top: auto;
    font-size: 30px;
    margin-bottom: 20px;
}
 #role .cert h2{
    padding-left: 25px;
 }
#role .coat p,
#role .auto p,
#role .specialized p,
 #role .cert .p,
 #role .test p {
    font-weight: 100;
    font-size: 15px;
    margin-bottom: 5px;
}

#role .auto p,
#role .specialized p{
    padding-left: 25px;
}
#role .test p{
    padding-left: 20px;
}
#role .cert p{
    max-width: 200px;
    padding-left: 80px;
}
#role .auto,
#role .specialized,
#role .cert,
#role .test {
    padding-left: 40px;
    text-align: center;
}

#role .coat .p2,
#role .specialized .p2,
 #role .cert .p2 {
    margin-bottom: 40px;
}
 #role .cert .p2{
    padding-left: 55px;
 }
#role .cert span{
    display: block;
}

#role .auto:hover,
#role .coat:hover,
#role .IE:hover,
#role .specialized:hover,
#role .test:hover,
#role .weld:hover,
#role .cert:hover{
    transform: scale(1.1);
}

@media screen and (max-width: 767px) {
    nav li:nth-child(4) {
        border-bottom: 2px solid white;
    }

    nav {
        background-color: #298482;
    }

    header {
        background-size: initial;
        height: initial;
        background-position: initial;
        position: initial;
    }

    #bg {
        position: relative;
        padding: 20px;
        background-color: #3ABFBC;
        color: #efefef;
    }

    #bg h2 {
        max-width: none;
        font-size: 30px;
        padding-bottom: 10px;
        line-height: normal;
        color: #fff;
    }

    #bg .highlight {
        color: #FFD966;
    }

    #title {
        color: #3ABFBC;
        padding-top: 30px;
        padding-left: 20px;
    }

    #title h2 {
        text-decoration: underline;
    }

    #intro {
        max-width: 100%;
        padding-left: 20px;
        margin-bottom: 40px;
    }

    #intro p {
        padding: 10px;
    }

    #role {
        padding-bottom: 40px;
    }

    #role div {
        height: auto;
        box-shadow: none;
        padding: 20px;
        margin: 0 0 20px;
        border: none;
    }

    #role h2 {
        font-size: 24px;
    }

    #role p {
        font-weight: 100;
        font-size: 14px;
    }

    #role .IE,
    #role .coat,
    #role .auto,
    #role .weld,
    #role .specialized,
    #role .test,
    #role .cert {
        width: 70%;
        background-size: cover;
        padding-left: 0;
        border-radius: 0;
        text-align: center;
    }

    #role .IE,
    #role .weld {
        color: #fff;
        height: 200px;
        background-size: 100% 100%;
    }

    #role .cert{
        background: #3ABFBC;
        color: #fff;
    }
    #role .IE h2,
    #role .weld h2,
    #role .coat h2,
    #role .auto h2,
    #role .specialized h2,
    #role .cert h2,
    #role .test h2 {
        max-width: none;
        font-size: 20px;
        margin-bottom: 10px;
    }

    #role .coat p,
    #role .auto p,
    #role .specialized p,
    #role .cert .p,
    #role .test p {
        font-weight: 100;
        font-size: 14px;
        margin-bottom: 5px;
    }

    #role .auto p,
    #role .specialized p {
        padding-left: 0;
    }

    #role .test p {
        padding-left: 0;
    }

    #role .cert p {
        max-width: none;
        padding-left: 0;
    }

    #role .auto,
    #role .specialized,
    #role .cert,
    #role .test {
        padding-left: 0;
        text-align: center;
    }

    #role .IE:hover,
    #role .coat:hover,
    #role .auto:hover,
    #role .weld:hover,
    #role .specialized:hover,
    #role .test:hover,
    #role .cert:hover {
        transform: scale(1);
    }
}