@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700;900&display=swap')
    ;

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

html {
    font-size: 62.5%;
}

body,html {
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.clear {
    clear: both;
}

p {
    color: rgb(186, 189, 201);
}

.fw600 {
    font-weight: 600;
}

.fc1 {
    color: rgb(186, 189, 201);
}

.fc2 {
    color: rgb(194, 196, 203);
}

.fc3 {
    color: rgb(150, 169, 220);
}

/*(Nav)vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv*/

nav {
    background-color: #1B1C24;
    padding: 2rem;
    padding-top: 1rem;
}

nav h1 {
    float: left;
    width: 390px;
    padding-right: 1.5rem;
}

nav a {
    color: rgb(230, 237, 245);
    text-decoration: none;
    font-size: 1.8rem;
}

h1 img {
    max-width: 100%;
    max-height: 100%;
}

nav ul {
    float: right;
    position: relative;
    padding-top: 11rem;
    list-style: none;
}

nav li {
    float: left;
    margin: 0rem 1.5rem;
}

@media (max-width: 860px) {
    nav li a {
        font-size: 1.2rem;
    }

    nav ul {
        padding-top: 9rem;
    }

    nav li {
        margin: 0rem 1rem;
    }

    nav #logo {
        max-width: 30rem;
        padding-top: inherit;
    }

    nav {
        padding-bottom: 0.8rem;
    }

}

@media (max-width: 668px) {
    nav li a {
        font-size: 1rem;
    }

    nav li {
        margin: 0rem 0.8rem;
    }

    nav ul {
        padding-top: 7.5rem;
    }

    nav #logo {
        max-width: 25rem;
        padding-top: 1rem;
    }

    nav {
        padding-bottom: 0.8rem;
    }

}

@media (max-width: 529px) {
    nav li a {
        font-size: 0.8rem;
    }

    nav li {
        margin: 0rem 0.6rem;
    }

    nav ul {
        padding-top: 9rem;
    }

    nav #logo {
        max-width: 22rem;
        padding-top: 1.9rem;
    }

    nav {
        padding-bottom: 0.8rem;
    }

}

@media (max-width: 444px) {
    nav li a {
        font-size: 0.8rem;
    }

    nav li {
        margin: 0rem 0.6rem;
    }

    nav ul {
        padding-top: 2rem;
    }

    nav #logo {
        max-width: 22rem;
        padding-top: 1rem;
    }

    nav {
        flex-direction: column;
        padding: 0 0 0.6rem 0;
        padding-top: 0;
    }

    nav, nav div:first-of-type,
    nav ul  {
        display: flex;
        justify-content: center;
    }
}


/*(Nav)^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ vvvvvvvvvvvvvvvvvvvvvv(Hero Section) */

.hero-section {
    background-image: url(mps-workshop_v2.png);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;
    text-shadow: 3px 3px 10px black;
    flex-grow: 1;
}

.hero-section .container {
    height: 92rem;
    display: flex;
    flex-direction: column;
    padding-top: 30rem;
}

.hero-section h2,.contentHeader {
    margin: 0 2.8rem 0 2.8rem;
    font-size: 7.2rem;
}

.hero-section h2 {
    font-weight: 900;
}
.hero-section h3 {
    font-weight: 700;
}


@media (max-width: 424px) {
    .hero-section .container h2 {
        font-size: 3.5rem;
    }

    .hero-section .container h3 {
        font-size: 1.9rem;
    }

    .hero-section .container {
        padding-top: 21rem;
    }
}
@media (min-width: 425px) {
    .hero-section .container h2 {
        font-size: 4.9rem;
    }

    .hero-section .container h3 {
        font-size: 2.5rem;
    }

    .hero-section .container {
        padding-top: 21rem;
    }
}
@media (min-width: 528px) {
    .hero-section .container h2 {
        font-size: 7.2rem;
    }
    
    .hero-section .container h3 {
        font-size: 2.8rem;
    }
    
    .hero-section .container {
        padding-top: 30rem;
    }
}

.hero-section h3 {
    margin: 0 5.6rem 0 5.6rem;
    font-size: 2.8rem;
    display: flex;
    justify-content: center;
}

h2 {
    padding: 8rem 0 2rem 0;
    display: flex;
    justify-content: center;
}

/* Hero Section ^^^^^^^^^^^^^^^^^^^^ vvvvvvvvvvvvvvvvvvvvvvvv ServiceCards */

.serviceCards-section .card {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 308px;
    height: 400px;
    background-color: #595E75;
    margin: 30px 10px;
    padding: 20px 15px;
    box-shadow: 0.5px 10px 7px  rgb(48, 52, 61);
}

.serviceCards-section .container .card .imgBx {
    position: relative;
    width: 260px;
    height: 260px;
    top: -60px;
    left: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
}

.serviceCards-section .container .card .imgBx img {
    max-width: 100%;
    border-radius: 10px;
}

.serviceCards-section .imgBx:hover img {
    transform: scale(1.1);
}

.crdTxt {
    padding-bottom: 0.2rem;
    font-weight: 700;
    color: rgb(216, 219, 228);
    font-size: 3.2rem;
}

.serviceCards-section .crdTxt {
    padding-top: 2rem;
}

.serviceCards-section,.contact-section {
    text-align: center;
    padding-bottom: 3rem;
    background-color: #393B4A;

}

.serviceCards-section .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 2.8rem 0 2.8rem;
    padding-top: 2.6rem;
}

/* ServiceCards Section ^^^^^^^^^vvvvvvvvvv Services Section */

.services-section {
    text-align: center;
    padding-bottom: 3rem;
    background-color: #393B4A;
    flex-grow: 1;
}

.services-section .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    
}

@media (min-width: 341px) {
    .services-section .container {
        max-width: 333px;
    }
    .services-section .imgBx {
        width: 332px;    
    }
}   

/* xs -- Mobile Phones */
@media (min-width: 481px) {
    .services-section .imgBx {
        width: 400px;    
    }
}   

@media (max-width: 481px) {
    .services-section .container > div {
        flex-direction: column;
        align-items: center;
        position: relative;
    }
}

/* sm */
@media (min-width: 640px) {
    .services-section .imgBx {
        width: 400px;    
    }
    .services-section .card {
        font-size: 0.9rem;    
    }
    .services-section .crdTxt {
        font-size: 2.3rem;    
    }
    .services-section .bulContainer {
        font-size: 0.6rem;    
    }
}    

@media (max-width: 640px) {
    .services-section .container > div {
        flex-direction: column;
        align-items: center;
        position: relative;
    }
}    

/* md -- Tablets */
@media (min-width: 769px) {
    .services-section .card {
        font-size: 1.05rem;    
    }
    .services-section .crdTxt {
        font-size: 3rem;    
    }
    .services-section .bulContainer {
        font-size: 0.8rem;    
    }
}

/* lg -- Laptop */
@media (min-width: 1024px) {
    .services-section .container {
        flex-direction: column;
    }
    .services-section .card {
        font-size: 1.4rem;    
    }
    .services-section .crdTxt {
        font-size: 3.2rem;    
    }
    .services-section .bulContainer {
        font-size: 1.1rem;    
    }
}    

/* xl -- Laptop LG */
@media (min-width: 1280px) {
    .services-section .container {
        flex-direction: column;
    }
    .crdBullets {
        font-size: 1.4rem;
    }
    .services-section .card {
        font-size: 1.6rem;
        align-content: center;
    }
}    

/* 2xl -- Monitor */
@media (min-width: 1536px) {
    .services-section .container {
        flex-direction: column;
    }
    .services-section .crdTxt {
        font-size: 4.8rem;
        position: relative;
        bottom: 0.9rem;    
    }
}    

.services-section .container > div {
    margin: 2rem 3rem 0 3rem;
    display: flex;
    justify-content: center;

}

.services-section .card {
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
    width: 100%;
    background-color: #595E75;
    padding: 20px 15px;
    box-shadow: 0.5px 10px 7px  rgb(48, 52, 61);
    line-height: 1.8;
}

.services-section .imgBx {
    height: 100%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    aspect-ratio: 1/1;
}

.services-section .imgBx img {
    width: 100%;
    height: auto;
}

.contentHeader {
    font-weight: 900;
    color: rgb(230, 237, 245);
    font-size: 48px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.952);
}

@media (max-width: 560px) {
    .serviceCards-section .contentHeader,
    .services-section .contentHeader,
    .contact-section .contentHeader {
        font-size: 3.4rem;
    }
}


/* Location Section vvvvvvvvvvvvvvvvvvvv^^^^^^^^^^^^^^^^^^^^^^ Services Section */

.location-section .container {
    display: flex;
    flex-direction: row;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.location-section ul {
    float: right;
    position: relative;
    list-style: none;
    font-size: 1.4rem;
}

.location-section .container ul:first-child {
    margin-right: 4rem;
}

@media (max-width: 402px) {
    .location-section ul {
        font-size: 2.3rem;    
    }
    .location-section .container ul:first-child {
        margin-right: 2.4rem;
    }
}   

.location-section {
    display: flex;
    background-color: #232536;
    justify-content: center;
}

.location-section a {
    color: rgb(103 108 125);
}

/* Location Section ^^^^^^^^^^^^^^^vvvvvvvvvvvvvvvvvvvvvvv About Section */

.about-section {
    text-align: center;
    padding-bottom: 3rem;
    background-color: #393B4A;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.about-section .container{
    display: flex;
    justify-content: center;
}

.about-section .card {
    display: flex;
    flex-direction: column;
    position: relative; 
    background-color: #595E75;
    padding: 15px 15px;
    margin: 0 3rem 0 3rem;
    box-shadow: 0.5px 10px 7px  rgb(48, 52, 61);
    font-size: 1.6rem;
}

.about-section span {
    padding-top: 0.8rem;
}

.about-section .container .card div:first-of-type {
    padding-top: 1.8rem;
}

.specContainer {
    display: flex;
    justify-content: center;
}

@media (max-width: 341px) {
    .about-section .contentHeader {
        font-size: 2.3rem;    
    }
}

@media (min-width: 341px) {
    .about-section .contentHeader {
        font-size: 2.3rem;    
    }
}   

/* xs -- Mobile Phones */
@media (min-width: 481px) {
    .about-section .contentHeader {
        font-size: 3.5rem;    
    }
}   

/* sm */
@media (min-width: 640px) {
    .about-section .contentHeader {
        font-size: 4.2rem;    
    }
}    

/* md -- Tablets */
@media (min-width: 769px) {
    .about-section .contentHeader {
        font-size: 4.8rem;    
    }
}

/* About Section ^^^^^^^^^^^^^^^^^^^^vvvvvvvvvvvvvvvvvvvvvvv Contact Section */

.contact-section {
    flex-grow: 1;
}

.contact-section .container {
    display: flex;
    position: relative;
    justify-content: center;
    overflow: hidden;
    padding-bottom: 3rem;
}

.contact-section .container {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.contact-section .card {
    position: relative;
    background-color: #595E75;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    box-shadow: 0.5px 10px 7px  rgb(48, 52, 61);
    justify-content: space-evenly;
}

@media (max-width: 491px) {
    .contact-section .card h2 {
        font-size: 2.7rem;
    }
    .contact-section .card h3 {
        font-size: 1.5rem;
    }
    .contact-section .container{
        width: 260px;
    }
    .contact-section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }    
}

@media (min-width: 491px) {
    .contact-section .card h2 {
        font-size: 2.7rem;
    }
    .contact-section .card h3 {
        font-size: 1.5rem;
    }
}

@media (min-width: 644px) {
    .contact-section .card h2 {
        font-size: 2.4rem;
    }
    .contact-section .card h3 {
        font-size: 1.7rem;
    }
    /*Email Line*/.contact-section .contactBlock h3:nth-child(2){
        font-size: 1.3rem;
    }      
    .contact-section .card{
        width: 300px;
    }
}

@media (max-width: 643px) {
    .contact-section .container{
        flex-direction: column;
        align-items: center;
    }
    .contact-section .card, iframe{
        width: 100%;
    }
    /*Address Line 1*/.contact-section .addressBlock div:first-of-type h3:nth-child(1),
    /*Address Line 2*/.contact-section .addressBlock div:first-of-type h3:nth-child(2),
    /*Address Line 3*/.contact-section .addressBlock div:nth-of-type(2) h3:nth-child(1),
    /*Address Line 4*/.contact-section .addressBlock div:nth-of-type(2) h3:nth-child(2) {
        display: inline;    
    }
}

@media (min-width: 769px) {
    .contact-section .card h2 {
        font-size: 2.9rem;
    }
    .contact-section .card h3 {
        font-size: 2.1rem;
    }
    /*Phone Line*/.contact-section .contactBlock h3:nth-child(1){
        font-size: 2rem;
    }
    /*Email Line*/.contact-section .contactBlock h3:nth-child(2){
        font-size: 1.6rem;
    }        
}

@media (min-width: 1023px) {
    .contact-section .card h2 {
        font-size: 3.5rem;
    }
    .contact-section .card h3 {
        font-size: 2.2rem;
    }
    /*Email Line*/.contact-section .contactBlock h3:nth-child(2){
        font-size: 1.9rem;
    }    
}

@media (min-width: 1536px) {
    .contact-section .card h2 {
        font-size: 3.5rem;
    }
    .contact-section .card h3 {
        font-size: 2.2rem;
    }
}

.contact-section .card h2 {
    padding: 0;
}

/* Bullets vvvvvvvvvvvvvvvvvvvvvvvvvvv^^^^^^^^^^^^^^^^^^ Contact Section */

.bulContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 0.8rem;
}

.crdBullets {
    padding-bottom: 0.2rem;
    padding-top: 0.8rem;
    list-style-position: inside;
}

ul.crdBullets li {
    font-family: Poppins, sans-serif;
    color: rgb(186, 189, 201);
    padding: 0.5rem 0 0 1rem;
}

ul.crdBullets:first-of-type li {
    padding: 0.5rem 0 0 0;
}

/* Footer vvvvvvvvvvvvvvvvvvvvvvvvvvv^^^^^^^^^^^^^^^^^^ Bullets */

footer h4 {
    background-color: rgb(29, 29, 36);
    height: 4rem;
    text-align: center;
    padding: 1.5rem;
    color: rgb(74, 74, 88);
}

@media (max-width: 475px) {
    footer h4 {
        font-size: 0.6rem;
    }
}

body .contPositi{
    display: flex;
    justify-content: center;
}

.contPositi {
    position: relative;
    overflow: hidden;
}

/* Footer ^^^^^^^^^^^^^^^^^^^^^ vvvvvvvvvvvvvvvvvvvvvvvv .Containers */

/* xs -- Mobile Phones */
@media (min-width: 481px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container,
    .contact-section .container {
        max-width: 481px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}   

/* sm */
@media (min-width: 640px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* sm */
@media (min-width: 644px) {
    .contact-section .container {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* md -- Tablets */
@media (min-width: 769px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container,
    .contact-section .container {
        max-width: 769px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* lg -- Laptop */
@media (min-width: 1024px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container,
    .contact-section .container {
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}    

/* xl -- Laptop LG */
@media (min-width: 1280px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container,
    .contact-section .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}    

/* 2xl -- Monitor */
@media (min-width: 1536px) {
    .hero-section .container,
    .serviceCards-section .container,
    .about-section .container,
    .services-section .container,
    .contact-section .container {
        max-width: 1536px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }            
}