.hero {
    height: 100vh;
}

.hero h3 {
    font-size: 2rem;
    text-transform: none;
    font-weight: 300;
}

.hero .hero-message {
    margin-top: 2rem;
}

/* SERVICES STYLING */
/********************/

.services .container {
    padding-top: 4rem;
}

.heading-services {
    font-family: 'Archivo Narrow', sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 4rem;
    color: #425664;
    position: relative;
    margin-bottom: 5rem;
    text-transform: uppercase;
}

.heading-services::after {
    content: "";
    position: absolute;
    background: linear-gradient(65deg, #b89c7a 0%, #e2dad0 100%);
    width: 20rem;
    height: 4px;
    border-radius: 2rem;
    bottom: -1rem;
    left: 50%;
    -webkit-transform: translateX(-100px) translateY(-50%);
            transform: translateX(-100px) translateY(-50%);
}

.card-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    align-content: center;
}

.card {
    background-color: #768d9e;
    color: #f6f4f2;
    margin: 2rem 0;
    min-width: 320px;
    max-width: 450px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.card .card-img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    width: 100%;
    height: 20rem;
    -o-object-fit: cover;
       object-fit: cover;
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-1.jpg") center no-repeat;
    background-size: 500px;
    -webkit-filter: blur(0.4px);
            filter: blur(0.4px);
}

.card .card-img-first {
    height: 22.5rem;
}

.card .card-img-second {
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-2.jpg") center no-repeat;
    background-size: 500px;
    height: 23rem;
}

.card .card-img-third {
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-3.jpg") center no-repeat;
    background-size: 500px;
}

.card .card-img-fourth {
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-4.jpg") center no-repeat;
    background-size: 500px;
}

.card .card-img-fifth {
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-5.jpg") center no-repeat;
    background-size: 500px;
}

.card .card-img-sixth {
    background: linear-gradient(98deg, rgba(198, 178, 143, 0.2) 0%, rgba(226, 215, 198, 0.8) 100%),
    url("../images/card-background-6.jpg") center no-repeat;
    background-size: 500px;
}

.service-img {
    width: 15rem;
    height: 15rem;
    -o-object-fit: scale-down;
       object-fit: scale-down;
    border-radius: 20%;
    margin-top: -12rem;
    z-index: 100;
    border: 0.5rem solid #b89c7a;
    background-color: #f6f4f2;
}

.card h1 {
    font-size: 2.2rem;
    margin: 2rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
}

.card p {
    font-size: 1.3rem;
    margin: 2rem 1.5rem;
    text-align: center;
    font-weight: 200;
    letter-spacing: 1px;
}

.card-button {
    margin: 2rem 0;
    padding: 1.2rem 2rem;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: #f6f4f2;
    background-color: #c6ad8f;
    border-radius: 5rem;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.card-button:hover {
    background-color: #b89c7a;
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}


/* ABOUT STYLING */
/*****************/

.about-us {
    background-color: #f6f4f2;
    padding-top: 5rem;
    color: #425664;
    text-align: center;
}

.about-us-header {
    font-family: 'Archivo Narrow', sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 4rem;
    color: #425664;
    position: relative;
    margin-bottom: 5rem;
    text-transform: uppercase;
}

.about-us-header::after {
    content: "";
    position: absolute;
    background: linear-gradient(65deg, #e2dad0 0%, #c9b7a1 100%);
    width: 10rem;
    height: 4px;
    border-radius: 2rem;
    bottom: -1rem;
    left: 50%;
    -webkit-transform: translateX(-50px) translateY(-50%);
            transform: translateX(-50px) translateY(-50%);
}

.about-main-paragraph {
    font-size: 1.7rem;
    margin: 2rem 0;
    font-weight: 400;
    letter-spacing: 0.2rem;
}

.about-wrapper {
    margin-top: 7rem;
}

.icon {
    font-size: 8rem;
    color: #b89c7a;
}

.about-wrapper h3 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.about-wrapper p {
    letter-spacing: 1px;
    font-size: 1.3rem;
    font-weight: 200;
}

.about-clients {
    margin-top: 6rem;
}

.about-relationships {
    margin-top: 6rem;
}

.about-customer-service {
    margin-top: 6rem;
    margin-bottom: 2rem;
}


/* SOLUTIONS STYLING */
/*********************/

.solutions {
    color: #425664;
    padding-top: 5rem;
}

.solutions .container {
    text-align: center;
}

.solutions-header {
    font-family: 'Archivo Narrow', sans-serif;
    text-align: center;
    letter-spacing: 0.1rem;
    font-size: 4rem;
    color: #425664;
    position: relative;
    margin-bottom: 5rem;
    text-transform: uppercase;
}

.solutions-header::after {
    content: "";
    position: absolute;
    background: linear-gradient(65deg, #b89c7a 0%, #e2dad0 100%);
    width: 20rem;
    height: 4px;
    border-radius: 2rem;
    bottom: -1rem;
    left: 50%;
    -webkit-transform: translateX(-103px) translateY(-50%);
            transform: translateX(-103px) translateY(-50%);
}

.solutions-main-paragraph {
    text-align: center;
    font-size: 1.7rem;
    margin: 7rem 0;
    font-weight: 400;
    letter-spacing: 0.2rem;
}

.solutions-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    align-content: center;
}

.solutions-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: start;
            justify-content: flex-start;
    text-align: center;
    margin-bottom: 3rem;
    /* background-color: #f6f4f2; */
    border-radius: 2px;
    width: 320px;
    padding: 0 1.5rem;
    /* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); */
    box-shadow: 0 0 8px 0.1px #0000001f;
    border-radius: 8px;
}

.solutions-item h1 {
    font-size: 2.5rem;
    padding: 3rem 1rem;
}

.img-wrap {
    height: 300px;
    width: 300px;
    margin: auto 5px;
}

.solutions-item img {
    max-height: 100%;
    border-radius: 5px;
    margin-bottom: 2rem;
}

.solutions-item .solutions-img {
    max-width: 100%;
    margin-bottom: 2rem;
}

.solutions-wrapper p {
    padding-bottom: 1rem;
    letter-spacing: 1px;
    font-size: 1.3rem;
    font-weight: 200;
}

.check-availability p,
.utility-billing p,
.website-optimization p,
.rm-tracking p,
.futures-trading p {
    margin-bottom: 2rem;
}

.riskview {
    margin-bottom: 6rem;
}

.solutions-button-wrap {
    margin-bottom: 3rem;
    height: 30px;
}

.solutions-button {
    padding: 1.2rem 6rem;
    margin: 3rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    color: #f6f4f2;
    background-color: #c6ad8f;
    border-radius: 5rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.solutions-button:hover {
    background-color: #b89c7a;
    box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.2);
    font-size: 1.8rem;
    font-weight: bold;
}


/* MEDIA QUERIES */
/*****************/

@media screen and (min-width: 225px) {

    .services .heading-services {
        font-size: 3rem;
    }

    .heading-services::after {
        width: 13rem;
        -webkit-transform: translateX(-68px);
                transform: translateX(-68px);
    }

    .about-us-header {
        font-size: 3rem;
    }

    .solutions-header {
        font-size: 3rem;
    }

    .solutions-header::after {
        width: 13rem;
        -webkit-transform: translateX(-67px);
                transform: translateX(-67px);
    }

}

@media screen and (min-width: 600px) {

    .services .heading-services {
        font-size: 4rem;
    }

    .about-us-header {
        font-size: 4rem;
    }

    .solutions-header {
        font-size: 4rem;
    }

    .solutions-item {
        width: 450px;
    }

}

@media screen and (min-width: 605px) {

    .hero {
        height: 75rem;
    }

}

@media screen and (min-width: 800px) {

    .hero {
        height: 85rem;
    }

    .hero .hero-message {
        margin-top: 1rem;
    }

}

@media screen and (min-width: 1100px) {

    .hero .hero-message h1 {
        font-size: 5rem;
    }

    .card-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-pack: center;
                justify-content: center;
    }

    .card {
        margin: 2rem 2rem;
        height: 585px;
    }

    .card p {
        font-size: 1.7rem;
    }

    .about-us p {
        font-size: 1.7rem;
    }

    .card:nth-child(4) p{
        margin: 3.2rem 2rem;
    }

    .card:nth-child(5) p{
        margin: 4.3rem 2rem;
    }

    .card:nth-child(6) p{
        margin: 5.37rem 2rem;
    }

    .about-us p {
        font-size: 1.7rem;
    }

    .about-wrapper {
        text-align: center;
    }

    .about-us .about-main-paragraph {
        text-align: center;
    }

    .solutions-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
                flex-direction: row;
        flex-wrap: wrap;
        -webkit-box-pack: center;
                justify-content: center;
        margin-bottom: 4rem;
    }

    .solutions-wrapper p {
        font-size: 1.7rem;
    }

    .solutions-item {
        margin: 2rem 2rem;
        height: 450px;
    }

    .solutions-item h1 {
        font-size: 2rem;
    }

    .solutions-item .img-wrap img {
        height: 300px;
    }

}