/*Website done by a Mech Eng 3A Co-op Student Henry Guan on 2024-08-22*/


*, html {
    scroll-behavior: smooth !important;
    margin: 0;
    padding: 0;
}

/*Extra Large Screens*/
@media screen and (min-width: 1200px){
        
    /* showcase */
    #indexShowcase {
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8)),url('Images/LandingPage.png') no-repeat;
        height:120vh;

        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;

        background-attachment: fixed;

        background-position: center;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showcaseIOS {
        display:none;
    }
    .showcaseContainer {
        width:80%;
        overflow: hidden;
        position: relative;
        text-align: center;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .showcaseContainer h1 {
        font-size: 80px;
        margin-top:100px;
        margin-bottom:100px;
    }

    .fadesP {
        font-size: 45px;
        margin-bottom: 30px;
        color: white;
    }

    .fadesh4 {
        font-size: 30px;
        font-weight: 300;
        color: white;
    }

    /*welcome/what we do*/
    #welcome {
        background-color: white;
        height: auto;
        padding-top:50px;
        padding-bottom:50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #welcome > h1 {
        font-size: 50px;
        font-weight: 700;
        padding: 20px;
        align-self: left;
    }

    .expertise {
        position: relative;
        width: 80%;
        height: max-content;
    }

    .expertise h3 {
        font-weight: 700;
        font-size: 22.5px;
    }

    .expertise p {
        font-size:19px;
    }

    .ourMission {
        position: relative;
        width: 80%;
        height: max-content;
        margin-top:15px;
        background-color:#35424a;
        border-color: #35424a;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ourMission h3 {
        color: white;
        font-size: 22.5px;
        font-weight: 700;
        padding-top:30px;
        padding-left: 15px;
    }

    .ourMission p {
        margin-top: 0px;
        margin-bottom:0px;
        color: white;
        font-size: 19px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .qualityAssurance {
        background-color: #0f0c2c;
        color: white;
        width:80%;
        height:max-content;
        margin-top:2vh;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-color: #0f0c2c;
    }

    .qualityAssurance h3 {
        padding-top: 40px;
        padding-left: 0px;
        font-size:50px;
        font-weight:700;
        text-align: center;
    }

    .qualityAssurance h2 {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 19px;
        padding-bottom: 40px;
    }

    .qualityAssurance p {
        padding-left: 40px;
        padding-right: 40px;
        font-size:18px;
        padding-bottom: 10px;
    }

    /* Service Links */
    #serviceIntro {
        background-color: #35424a;
    }

    #serviceIntro h1 {
        text-align: center;
        margin:0;
        font-size:60px;
        padding:10px;
        color:white;
    }

    #serviceLinks {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;

    }

    .serviceItem {
        height:350px;
        position: relative;
    }

    .service-img-background {
        height: 350px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: 0.7s;
    }

    .serviceItem:hover .service-img-background {
        filter: brightness(30%);
    }

    .logo-text {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;

        /* left to right */
        justify-content: center;

        /*bottom to top */
        align-items: center;

        height: 100%;
        width: 100%;
        text-align: center;
        text-overflow: none;
    }

    .logo-text i {
        opacity:0.3;
        transition: 0.7s;
    }

    .logo-text p {
        font-weight:500;
        font-size:18px;
        transition: 0.7s;
        color: transparent;
        margin: 20px;
        white-space: nowrap;
        width:80%;
    }

    .logo-text:hover i {
        opacity:1.0;
    }

    .logo-text:hover p{
        color: white;
    }

    .fa-city {
        font-size: 100px;
    }

    .fa-bolt {
        font-size: 100px;
    }

    .fa-radiation {
        font-size: 100px;
    }

}

/*Large Screens*/
@media screen and (min-width: 992px) and (max-width:1199px){

    /* showcase */
    #indexShowcase {
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8)),url('Images/LandingPage.png') no-repeat;

        height:100vh;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showcaseIOS {
        display:none;
    }
    .showcaseContainer {
        width:80%;
        overflow: hidden;
        position: relative;
        text-align: center;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .showcaseContainer h1 {
        font-size: 60px;
        margin-top:100px;
        margin-bottom:100px;
    }

    .fadesP {
        font-size: 30px;
        margin-bottom: 30px;
        color: white;
    }

    .fadesh4 {
        font-size: 25px;
        font-weight: 300;
        color: white;
    }

    /*welcome/what we do*/
    #welcome {
        background-color: white;
        height: auto;
        padding-top:50px;
        padding-bottom:50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #welcome > h1 {
        font-size: 40px;
        font-weight: 700;
        padding: 20px;
        align-self: left;
    }

    .expertise {
        position: relative;
        width: 80%;
        height: max-content;
    }

    .expertise h3 {
        font-weight: 700;
        font-size: 20px;
    }

    .expertise p {
        font-size:17px;
    }

    .ourMission {
        position: relative;
        width: 80%;
        height: max-content;
        margin-top:15px;
        background-color:#35424a;
        border-color: #35424a;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ourMission h3 {
        color: white;
        font-size: 20px;
        font-weight: 700;
        padding-top:30px;
        padding-left: 15px;
    }

    .ourMission p {
        margin-top: 0px;
        margin-bottom:0px;
        color: white;
        font-size: 17px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .qualityAssurance {
        background-color: #0f0c2c;
        color: white;
        width:80%;
        height:max-content;
        margin-top:2vh;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-color: #0f0c2c;
    }

    .qualityAssurance h3 {
        padding-top: 40px;
        padding-bottom: 20px;
        padding-left: 0px;
        font-size:40px;
        font-weight:700;
        text-align: center;
    }

    .qualityAssurance h2 {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 17px;
        padding-bottom: 40px;
    }

    .qualityAssurance p {
        padding-left: 40px;
        padding-right: 40px;
        font-size:16px;
        padding-bottom: 10px;
    }

    /* Service Links */
    #serviceIntro {
        background-color: #35424a;
    }

    #serviceIntro h1 {
        text-align: center;
        margin:0;
        font-size:40px;
        padding:10px;
        color:white;
    }

    #serviceLinks {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;

    }

    .serviceItem {
        height:350px;
        position: relative;
    }

    .service-img-background {
        height: 350px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: 0.7s;
    }

    .serviceItem:hover .service-img-background {
        filter: brightness(30%);
    }

    .logo-text {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;

        /* left to right */
        justify-content: center;

        /*bottom to top */
        align-items: center;

        height: 100%;
        width: 100%;
        text-align: center;
    }

    .logo-text i {
        opacity:0.3;
        transition: 0.7s;
    }

    .logo-text p {
        font-weight:500;
        font-size:18px;
        transition: 0.7s;
        color: transparent;
        margin: 20px;
        text-wrap: wrao;
        width:80%;
    }

    .logo-text:hover i {
        opacity:1.0;
    }

    .logo-text:hover p{
        color: white;
    }

    .fa-city {
        font-size: 80px;
    }

    .fa-bolt {
        font-size: 80px;
    }

    .fa-radiation {
        font-size: 80px;
    }


}

/*Medium Screens*/
@media screen and (min-width: 768px) and (max-width:991px){

    /* showcase */
    #indexShowcase {
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8)),url('Images/LandingPage.png') no-repeat;

        height:100vh;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showcaseIOS {
        display:none;
    }
    .showcaseContainer {
        width:80%;
        overflow: hidden;
        position: relative;
        text-align: center;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .showcaseContainer h1 {
        font-size: 50px;
        margin-top:80px;
        margin-bottom:80px;
    }

    .fadesP {
        font-size: 25px;
        margin-bottom: 30px;
        color: white;
    }

    .fadesh4 {
        font-size: 20px;
        font-weight: 300;
        color: white;
    }

    /*welcome/what we do*/
    #welcome {
        background-color: white;
        height: auto;
        padding-top:50px;
        padding-bottom:50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #welcome > h1 {
        font-size: 35px;
        font-weight: 700;
        padding: 20px;
        align-self: left;
    }

    .expertise {
        position: relative;
        width: 80%;
        height: max-content;
    }

    .expertise h3 {
        font-weight: 700;
        font-size: 20px;
    }

    .expertise p {
        font-size:17px;
    }

    .ourMission {
        position: relative;
        width: 80%;
        height: max-content;
        margin-top:15px;
        background-color:#35424a;
        border-color: #35424a;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .ourMission h3 {
        color: white;
        font-size: 20px;
        font-weight: 700;
        padding-top:30px;
        padding-left: 15px;
    }

    .ourMission p {
        margin-top: 0px;
        margin-bottom:0px;
        color: white;
        font-size: 17px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 30px;
    }

    .qualityAssurance {
        background-color: #0f0c2c;
        color: white;
        width:80%;
        height:max-content;
        margin-top:2vh;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-color: #0f0c2c;
    }

    .qualityAssurance h3 {
        padding-top: 40px;
        padding-bottom: 20px;
        padding-left: 0px;
        font-size:35px;
        font-weight:700;
        text-align: center;
    }

    .qualityAssurance h2 {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 17px;
        padding-bottom: 40px;
    }

    .qualityAssurance p {
        padding-left: 40px;
        padding-right: 40px;
        font-size:16px;
        padding-bottom: 10px;
    }

    /* Service Links */
    #serviceIntro {
        background-color: #35424a;
    }

    #serviceIntro h1 {
        text-align: center;
        margin:0;
        font-size:35px;
        padding:10px;
        color:white;
    }

    #serviceLinks {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;

    }

    .serviceItem {
        height:350px;
        position: relative;
    }

    .service-img-background {
        height: 350px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: 0.7s;
    }

    .serviceItem:hover .service-img-background {
        filter: brightness(30%);
    }

    .logo-text {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;

        /* left to right */
        justify-content: center;

        /*bottom to top */
        align-items: center;

        height: 100%;
        width: 100%;
        text-align: center;
    }

    .logo-text i {
        opacity:0.3;
        transition: 0.7s;
    }

    .logo-text p {
        font-weight:500;
        font-size:16px;
        transition: 0.7s;
        color: transparent;
        margin: 20px;
        text-wrap: wrap;
        width:80%;
    }

    .logo-text:hover i {
        opacity:1.0;
    }

    .logo-text:hover p{
        color: white;
    }

    .fa-city {
        font-size: 65px;
    }

    .fa-bolt {
        font-size: 65px;
    }

    .fa-radiation {
        font-size: 65px;
    }


}

/*Small Screens*/
@media screen and (min-width:576px) and (max-width: 767px){
    
    /* showcase */
    #indexShowcase {
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8)),url('Images/LandingPage.png') no-repeat;

        height:80vh;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showcaseIOS {
        display:none;
    }
    .showcaseContainer {
        width:80%;
        overflow: hidden;
        position: relative;
        text-align: center;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .showcaseContainer h1 {
        font-size: 40px;
        margin-top:80px;
        margin-bottom:80px;
    }

    .fadesP {
        font-size: 20px;
        margin-bottom: 30px;
        color: white;
    }

    .fadesh4 {
        font-size: 18px;
        font-weight: 300;
        color: white;
    }

    /*welcome/what we do*/
    #welcome {
        background-color: white;
        height: auto;
        padding-top:35px;
        padding-bottom:35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #welcome > h1 {
        font-size: 30px;
        font-weight: 700;
        padding: 15px;
        align-self: left;
    }

    .expertise {
        position: relative;
        width: 80%;
        height: max-content;
    }

    .expertise h3 {
        font-weight: 700;
        font-size: 18px;
    }

    .expertise p {
        font-size:15px;
    }

    .ourMission {
        position: relative;
        width: 80%;
        height: max-content;
        margin-top:15px;
        background-color:#35424a;
        border-color: #35424a;
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .ourMission h3 {
        color: white;
        font-size: 18px;
        font-weight: 700;
        padding-top:20px;
        padding-left: 15px;
    }

    .ourMission p {
        margin-top: 0px;
        margin-bottom:0px;
        color: white;
        font-size: 15px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .qualityAssurance {
        background-color: #0f0c2c;
        color: white;
        width:80%;
        height:max-content;
        margin-top:2vh;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-color: #0f0c2c;
    }

    .qualityAssurance h3 {
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 0px;
        font-size:25px;
        font-weight:700;
        text-align: center;
    }

    .qualityAssurance h2 {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 15px;
        padding-bottom: 20px;
    }

    .qualityAssurance p {
        padding-left: 40px;
        padding-right: 40px;
        font-size:15px;
        padding-bottom: 5px;
    }

    /* Service Links */
    #serviceIntro {
        background-color: #35424a;
    }

    #serviceIntro h1 {
        text-align: center;
        margin:0;
        font-size:25px;
        padding:10px;
        color:white;
    }

    #serviceLinks {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;

    }

    .serviceItem {
        height:250px;
        position: relative;
    }

    .service-img-background {
        height: 250px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: 0.7s;
    }

    .serviceItem:hover .service-img-background {
        filter: brightness(30%);
    }

    .logo-text {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;

        /* left to right */
        justify-content: center;

        /*bottom to top */
        align-items: center;

        height: 100%;
        width: 100%;
        text-align: center;
    }

    .logo-text i {
        opacity:0.3;
        transition: 0.7s;
    }

    .logo-text p {
        font-weight:500;
        font-size:13px;
        transition: 0.7s;
        color: transparent;
        margin: 20px;
        text-wrap: wrap;
        width:80%;
    }

    .logo-text:hover i {
        opacity:1.0;
    }

    .logo-text:hover p{
        color: white;
    }

    .fa-city {
        font-size: 50px;
    }

    .fa-bolt {
        font-size: 50px;
    }

    .fa-radiation {
        font-size: 50px;
    }

}

/*Mobile Screens*/
@media screen and (max-width: 575px){
  
    /* showcase */
    #indexShowcase {
        background: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.8)),url('Images/LandingPage.png') no-repeat;

        height:80vh;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        
        -webkit-background-attachment: fixed;
        -moz-background-attachment: fixed;
        -o-background-attachment: fixed;
        background-attachment: fixed;
        
        -webkit-background-position: center;
        -moz-background-position: center;
        -o-background-position: center;
        background-position: center;
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .showcaseIOS {
        display:none;
    }
    .showcaseContainer {
        width:80%;
        overflow: hidden;
        position: relative;
        text-align: center;
        align-items: center;
        justify-content: center;
        color:white;
    }

    .showcaseContainer h1 {
        font-size: 30px;
        margin-top:80px;
        margin-bottom:80px;
    }

    .fadesP {
        font-size: 18px;
        margin-bottom: 30px;
        color: white;
    }

    .fadesh4 {
        font-size: 15px;
        font-weight: 300;
        color: white;
    }

    /*welcome/what we do*/
    #welcome {
        background-color: white;
        height: auto;
        padding-top:35px;
        padding-bottom:35px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #welcome > h1 {
        font-size: 25px;
        font-weight: 700;
        padding: 15px;
        align-self: left;
    }

    .expertise {
        position: relative;
        width: 80%;
        height: max-content;
    }

    .expertise h3 {
        font-weight: 700;
        font-size: 15px;
    }

    .expertise p {
        font-size:15px;
    }

    .ourMission {
        position: relative;
        width: 80%;
        height: max-content;
        margin-top:15px;
        background-color:#35424a;
        border-color: #35424a;
        border-top-left-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .ourMission h3 {
        color: white;
        font-size: 15px;
        font-weight: 700;
        padding-top:20px;
        padding-left: 15px;
    }

    .ourMission p {
        margin-top: 0px;
        margin-bottom:0px;
        color: white;
        font-size: 15px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .qualityAssurance {
        background-color: #0f0c2c;
        color: white;
        width:80%;
        height:max-content;
        margin-top:2vh;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-color: #0f0c2c;
    }

    .qualityAssurance h3 {
        padding-top: 30px;
        padding-bottom: 20px;
        padding-left: 0px;
        font-size:20px;
        font-weight:700;
        text-align: center;
    }

    .qualityAssurance h2 {
        padding-left: 40px;
        padding-right: 40px;
        font-size: 15px;
        padding-bottom: 20px;
    }

    .qualityAssurance p {
        padding-left: 20px;
        padding-right: 20px;
        font-size:15px ;
        padding-bottom: 5px;
    }

    /* Service Links */
    #serviceIntro {
        background-color: #35424a;
    }

    #serviceIntro h1 {
        text-align: center;
        margin:0;
        font-size:25px;
        padding:10px;
        color:white;
    }

    #serviceLinks {
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;

    }

    .serviceItem {
        height:250px;
        position: relative;
    }

    .service-img-background {
        height: 250px;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .logo-text {
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;

        /* left to right */
        justify-content: center;

        /*bottom to top */
        align-items: center;

        height: 100%;
        width: 100%;
        text-align: center;
    }

    .logo-text i {
        opacity:1;
        transition: 0.7s;
    }

    .logo-text p {
        font-weight:500;
        font-size:15px;
        transition: 0.7s;
        color: white;
        margin: 20px;
        text-wrap: wrap;
        width:80%;
    }

    .fa-city {
        font-size: 50px;
    }

    .fa-bolt {
        font-size: 50px;
    }

    .fa-radiation {
        font-size: 50px;
    }  
}