/* ******************** HOME ******************** */

    #hero h1 {
        text-align: left;
    }

    #hero p {
        color: var(--color-gray-light);
        font-size: 1.25rem;
    }

    #hero .btn {
        box-shadow: 0 8px 28px var(--color-green-fluo-50);
    }

    #hero img {
        margin: 4rem 0;
    }

        #hero .btn:hover {
            box-shadow: 0 8px 28px var(--color-blue-fluo-50);
        }

    #skills i {
        font-size: 2.5rem;
    }

    #skills .skill {
        min-height: 278px;
        border-radius: 0.5rem;
        border: 1px solid var(--color-gray-extra-light);
        background-color: var(--color-gray-extra-light);
    }

        #skills .skill p {
            color: var(--color-gray) !important;
        }

        #skills .skill:hover {
            border: 1px solid var(--color-gray-light-25);
        }

        #skills .skill:hover > h5,
        #services .service:hover > h5 {
            color: var(--color-green-fluo);
        }

    #why-optimys div div:nth-of-type(2) p:first-of-type {
        font-style: italic;
    }

    #why-optimys h2 {
        text-transform: none;
    }

    #numbers {
        text-align: center;
    }

        #numbers div div p:first-of-type {
            font-size: 3rem;
            font-weight: bold;
            color: var(--color-green-fluo)
        }

    #services {
        background-color: var(--color-gray-extra-light);
    }

    #services,
    #team {
        text-align: center;
        background-color: var(--color-gray-extra-light);
    }

    #services .row .col-12:first-of-type,
    #team .row .col-12:first-of-type,
    #contact .row .col-12:first-of-type {
        text-align: center;
        padding: 2rem 0;
        position: relative;
    }

        #services .row .col-12:first-of-type h2,
        #team .row .col-12:first-of-type h2,
        #contact .row .col-12:first-of-type h2 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 20px;
            padding-bottom: 0;
            color: #5f687b;
            position: relative;
            z-index: 2;
        }

            #services .row .col-12:first-of-type span,
            #team .row .col-12:first-of-type span,
            #contact .row .col-12:first-of-type span {
                position: absolute;
                top: 30px;
                color: var(--color-gray-light-25);
                left: 0;
                right: 0;
                z-index: 1;
                font-weight: bold;
                font-size: 3rem;
                text-transform: uppercase;
                line-height: 0;
            }

        #services .service {
            min-height: 250px;
            background-color: var(--color-white);
        }

        #services i {
            font-size: 2rem;
        }

    #call-to-action {
        background-color: var(--color-green-fluo);
        text-align: center;
    }

        #call-to-action h3 {
            text-transform: capitalize;
            color: var(--color-light);
        }

        #call-to-action p {
            color: var(--color-light);
        }

        #call-to-action .btn {
                color: var(--color-white);
                border: 1px solid var(--color-white);
                transition: 0.5s;
                padding: 0.5rem 2rem;
                text-transform: uppercase;
        }

            #call-to-action .btn:hover {
                background-color: var(--color-blue-fluo);
                border: 1px solid var(--color-blue-fluo);
            }

    #team .collaborator {
        background-color: var(--color-white);
    }

        #team .collaborator h5,
        #team .collaborator p:first-of-type {
            color: var(--color-black);
        }

        #team .collaborator p:first-of-type {
            font-style: italic;
        }

        #team .collaborator p:last-of-type {
            color: var(--color-gray-light);
            font-style: italic;
        }

    #contact #contact-information,
    #contact #contact-form {
        background-color: var(--color-gray-extra-light);
        border-top: 3px solid var(--color-green-fluo);
        border-bottom: 3px solid var(--color-green-fluo);
    }

        #contact #contact-information i {
            background-color: var(--color-white);
            font-size: 1.5rem;
        }

        #contact #contact-information #map {
            height: 410px;
        }

        #contact #contact-form #contact-form-submit-container {
            text-align: center;
        }

        #contact #contact-information p {
            color: var(--color-gray-light);
        }

        #contact #contact-form textarea {
            min-height: 275px;
        }

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

    /* ********** Laptop with MDPI screen ********** */

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

            #contact #contact-form textarea {
                min-height: 200px;
            }

            footer  #footer-copyright {
                text-align: left;
            }

            footer  #footer-legal {
                text-align: right;
            }

            #hero img {
                animation: move-up-down 2s ease-in-out infinite alternate-reverse both;
            }

        }

    /* ********** Laptop with HiDPI screen ********** */

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

            #hero h1 {
                font-size: 3rem;
            }

            #hero p {
                font-size: 1.5rem;
            }

        }

    /* ********** Desktop - extra large ********** */

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

            #hero {
                margin-top: 10rem;
                margin-bottom: 10rem;
            }

        }

    /* ********** Desktop - extra large ********** */

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

            #hero {
                margin-top: 25rem;
                margin-bottom: 25rem;
            }

        }