/* TABLET OPTIMIZATION */
@media (max-width: 900px) {
    .nav-logo {
        top: 3.2%;
        left: 8%;
    }

    #desktop_nav_first, #desktop_nav_second {
        display: none;
    }

    #desktop_nav_second.active {
        display: none;
    }

    #walter_white.active {
        height: 95px;
    }

    nav {
        display: block;
    }
}


/* PHONE OPTIMIZATION */
@media (max-width: 500px) {
    html, body {
        overflow-x: hidden !important;
    }


    /*----------------------------------------------------------*/
    /* TEXT-STYLE PRESETS */
    /*----------------------------------------------------------*/
    /* Text Settings */
    .title-1 {
        font-family: var(--main-title-font);
        color: var(--main-text-color);
        font-size: 5em;
        font-weight: 500;
        line-height: 0.94em;
    }

    .title-2 {
        font-family: var(--main-title-font);
        color: var(--main-text-color);
        font-size: 2.4em;
        font-weight: 400;
        line-height: 1.2em !important;
    }

    .title-3 {
        font-family: var(--main-title-font);
        color: var(--main-text-color);
        font-size: 2em;
        font-weight: 500;
        line-height: 0.97em;
    }

    .text-1 {
        font-family: var( --main-text-font);
        color: var(--main-text-color);
        font-size: 1.3em;
        font-weight: 400;
    }

    .text-2 {
        font-family: var( --main-text-font);
        color: var(--main-text-color);
        font-size: 0.99em;
        font-weight: 100;
    }

    .text-2-bold {
        font-family: var( --main-text-font);
        color: var(--main-text-color);
        font-size: 0.99em;
        font-weight: 500;
    }

    .text-3 {
        font-family: var(--main-title-font);
        color: var(--main-text-color);
        font-size: 0.86em;
        font-weight: 100;
    }

    .button {
        font-size: 0.9em;
    }

    .buttons-container-mobile {
        display: block;
    }

    .anim-wrap-2 {
        overflow: hidden;
        padding-bottom: 0px;
        height: 70px;
    }

    .anim-wrap-3 {
        overflow: visible;
        padding-bottom: 0px;
        height: 70px;
    }


    /*----------------------------------------------------------*/
    /* NAV */
    /*----------------------------------------------------------*/
    nav .nav-logo {
        top: 30px;
        left: 30px !important;
    }

    nav .nav-logo img {
        height: 18px;
    }

    nav .nav-options {
        top: 30px;
        right: 30px !important;
    }


    /*----------------------------------------------------------*/
    /* HEADER */
    /*----------------------------------------------------------*/
    header {
        height: auto;
        padding: 40% 5%;
    }

    header .header-body {
        position: relative;
        transform: none;
        left: 0;
        top: 0;
        width: 90%;
    }

    header .header-body .header-title {
        width: 100%;
    }

    header .header-body .header-title .anim-wrap-title {
        display: none;
    }

    header .header-body .header-title .title-mobile {
        display: block;
    }

    header .header-body .header-title h1 {
        font-size: 5em !important;
    }

    header .header-body .header-title h2 {
        font-size: 2em !important;
    }

    header .header-catcher {
        margin-top: 40px;
        width: 100%;
        text-align: left;
    }
    
    header .header-catcher h3 {
        color: var(--light-text-color);
        text-wrap: balance;
        font-size: 1.1em !important;
    }

    header .socmed {
        display: none;
    }
    

    /*----------------------------------------------------------*/
    /* HEADER */
    /*----------------------------------------------------------*/
    .intro {
        padding: 30% 6%;
    }

    .intro .intro-content {
        text-align: left;
    }

    .intro .intro-content p {
        margin-top: 20px;
        text-align: left;
        text-wrap: balance;
        font-size: 1.05em;
    }

    .intro .services-content {
        display: block;
    }

    .intro .buttons-container {
        display: none !important;
    }

    .intro .buttons-container-mobile {
        display: block !important;
    }

    /*----------------------------------------------------------*/
    /* SERVICES */
    /*----------------------------------------------------------*/
    .inform {
        padding: 20% 5% 0% 5%;
        position: relative;
        z-index: 5;
    }

    .inform .inform-bg {
        filter: brightness(0.3);
    }

    .inform .inform-container .container-title {
        display: none;
    }

    .inform .inform-container .container-title-mobile {
        display: block;
    }

    .inform .inform-container .container-content {
        display: block;
    }

    .inform .inform-container .container-content .content-cell {
        width: auto;
        margin-bottom: 5%;
    }

    .inform .inform-container .container-content .content-cell .cell-title {
        backdrop-filter: blur(15px);
        background-color: rgba(255, 255, 255, 0.1);
    }

    .inform .inform-container .container-content .content-cell .cell-title h4 {
        font-size: 1.7em;
    }

    .inform .inform-container .container-content .content-cell .cell-body p {
        font-size: 0.98em;
    }


    /*----------------------------------------------------------*/
    /* TIMELINE */
    /*----------------------------------------------------------*/
    .timeline {
        padding: 20% 5%;
    }

    .timeline .timeline-container {
        display: block;
    }

    .timeline .timeline-container .container-title {
        text-align: center;
    }

    .timeline .timeline-container .container-title h2 {
        font-size: 5em;
    }

    .timeline .timeline-container .container-content img {
        width: 100%;
        margin-top: 15%;
    }


    /*----------------------------------------------------------*/
    /* PROCESS */
    /*----------------------------------------------------------*/
    .process {
        padding: 20% 5%;
    }

    .process .process-title-mobile {
        display: block;
    }

    .process .process-title-mobile h2 {
        font-size: 5em;
    }

    .process .process-container {
        display: block;
    }

    .process .process-container .container-title {
        text-align: center;
        display: none;
    }

    .process .process-container .container-title h2 {
        font-size: 5em;
    }

    .process .process-container .container-content {
        text-align: left;
    }

    .process .process-container .container-content .process-round {
        margin-top: 20px;
    }


    /*----------------------------------------------------------*/
    /* PROCESS */
    /*----------------------------------------------------------*/
    .services {
        padding: 20% 5% 25% 5%;
    }

    .services-faq {
        margin-top: 0;
    }

    .services-faq .container {
        padding: 0;
    }

    .accordion button {
        font-family: var(--main-text-font) !important;
        font-size: 1em;
        text-wrap: balance;
        padding-right: 50px;
    }


    /*----------------------------------------------------------*/
    /* CONTACT */
    /*----------------------------------------------------------*/
    .contact {
        padding: 25% 6%;
    }

    .contact .content-container {
        display: block;
    }

    .contact .content-container .content-title .anim-wrap-3 {
        height: auto;
    }

    .contact .content-container .content-title h2 {
        font-size: 5em;
        width: 100%;
        text-align: center;
        display: block;
    }

    .contact .content-container .content-title p {
        margin-top: -40px;
    }

    .contact .content-container .content-action {
        margin-top: 50px;
    }

    .contact-button {
        margin-bottom: 10px;
    }


    /*----------------------------------------------------------*/
    /* FOOTER */
    /*----------------------------------------------------------*/
    footer .footer-content {
        display: block;
        text-align: center;
    }

    footer .footer-logo, .footer-text, .footer-contact {
        margin-bottom: 20px;
    }
}