@media (max-width: 500px) {
    /*----------------------------------------------------------*/
    /* GLOBAL COMPONENT STYLES */
    /*----------------------------------------------------------*/
    .title-1 {
        font-size: 2.2em;
    }

    .title-2 {
        font-size: 1.5em;
    }

    .title-3 {
        font-size: 1em;
    }

    .text-1 {
        font-size: 0.7em;
    }

    .text-2 {
        font-size: 0.8em;
    }

    .text-3 {
        font-size: 0.8em;
    }

    .buttons-container .main-button {
        font-size: 0.8em;
    }

    .buttons-container .secondary-button {
        font-size: 0.8em;
    }

    .mobile-hidden {
        display: none;
    }


    /*----------------------------------------------------------*/
    /* NAVIGATION */
    /*----------------------------------------------------------*/
    .nav-panel .content-container {
        width: 80%;
    }


    /*----------------------------------------------------------*/
    /* HEADER */
    /*----------------------------------------------------------*/
    header .top {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding-top: 60px;
        width: 92%;
        margin-left: 4%;
    }

    header .top-socmed {
        align-self: start;
        order: 2;
        margin-top: 1%;
    }

    header .top-socmed ul {
        justify-content: left;
    }

    header .top-socmed li {
        margin-left: 0;
        margin-right: 20px;
    }

    header .top-socmed li img {
        height: 20px;
    }

    header .bottom {
        width: 92%;
        margin-left: 4%;
        margin-top: 8%;
    }

    header .bottom .bottom-img .buttons-container {
        right: 6%;
    }


    /*----------------------------------------------------------*/
    /* SERVICES SECTION */
    /*----------------------------------------------------------*/
    .services {
        margin-top: 15%;
        padding: 15% 10%;
    }

    .services .content-container {
        width: 100%;
    }

    .services .col-sm img {
        margin-top: 10%;
        height: auto;
        width: 100%;
    }


    /*----------------------------------------------------------*/
    /* FOOTER */
    /*----------------------------------------------------------*/
    footer .contact {
        padding: 30%;
    }

    footer .contact .display-layer {
        width: 90%;
        transform: translate(-50%, -70%);
    }

    footer .contact-title h2 {
        font-size: 1.8em;
        text-wrap: balance;
    }

    footer .fixed-layer {
        left: 0;
    }

    footer .footer-part {
        padding: 10% 10%;
        box-sizing: border-box;
    }

    footer .footer-part .company-logo {
        text-align: center;
    }
    
    footer .footer-part .soc-med ul {
        text-align: center;
    }
}