@media screen and (max-width: 768px) {
    :root { /* For demo purposes */
        --page-size: 2vw;
    }
    .page-container {
        width: 100vw;
        /* background-color: blue; */
    }
    .page-main-container {
        padding: 0;
    }

    .non-mobile {
        display: none !important;
    }

    .mobile-only {
        display: inherit;
    }


    .banner-top {
        /* position: relative; */
        top: 0;
    }

    .social-sidebar {
        position: fixed;
        top: 10rem;
        left: 2rem;
        margin-top: 0;
        background-color: #1d1d1b44;
        padding: 1rem;
        border-radius: 1rem;
        border: 2px solid #fff5;
        z-index: 9;
    }

    .social-sidebar ul {
        padding-left: 0;
    }

    .social-sidebar img.sidebar-arrow {
        aspect-ratio: 1/1.8;
        object-fit: contain;
        transition: transform 0.3s;
    }

    section:first-of-type {
        margin-top: 0;
        margin-bottom: 25vh;
    }

    .icon-circle {
        width: 8rem;
    }

    .hero-icons {
        gap: 4rem;
        width: 80%;
    }

    .hero-button {
        padding: 1rem 3rem;
    }

    .hero-button span {
        font-family: var(--font-main);
        font-size: 3.5rem;
    }

    .hero-content h1 {
        font-size: 9.8rem;
    }

    .button-icon {
        width: 3rem;
    }


    .section-intro {
        /* background-position: top 50% right; */
        /* background-size: 100%; */
        padding-top: 0;
        /* padding-bottom: 65rem; */

        background-position: top 96% left 56%;
        background-size: 132%;
        padding-bottom: 20rem;
    }

    .section-intro h2 {
        line-height: 7rem;
    }

    .video-thumbnail {
        width: 36rem;
        aspect-ratio: 9/16;
    }

    .section-about-camel-agency {
        margin-top: 0;
        margin-bottom: 10vh;
        padding-top: 10vh;
        padding-bottom: 20vh;
        gap: 5rem;
    }    

    .about-camel-agency-container {
        background-image: none;
        height: auto;
        padding: 2rem 0;
    }

    .about-camel-agency-glow {
        /* display: none; */
        left: 0;
        bottom: 23%;
        opacity: 1;
    }

    .about-camel-agency-description {
        flex-direction: column;
        justify-content: center;
        font-size: 1.5rem;
        height: auto;
    }

    .about-camel-agency-description-text {
        align-items: center;
        text-align: left;
        width: 85%;
    }

    .about-camel-agency-description h2 {
        width: auto;
    }

    .about-camel-agency-description p {
        font-size: inherit;
    }

    .about-camel-agency-description p strong {
        font-size: inherit;
    }

    .about-camel-agency-map {
        width: 100%;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
    }
    .about-camel-agency-map .map {
        width: 50%;
    }
    .about-camel-agency-map .bird {
        position: absolute;
        width: 15%;
        filter: brightness(0) saturate(100%) invert(36%) sepia(88%) saturate(4614%) hue-rotate(325deg) brightness(98%) contrast(107%);
        left: 65%;
        top: 15%;
    }
    
    .about-camel-agency-overlay {
        width: auto;
        padding-left: 0;
        align-items: center;
    }

    .about-camel-agency-overlay-holder {
        border: 2px solid white;
        padding: 1rem 2rem;
        border-radius: 2rem;
    }

    .section-our-services {
        gap: 5rem;
        padding: 0 4rem;
        padding-top: 10rem;
        margin-top: -10rem;
        padding-bottom: 25vh;
    }

    .services-main-container {
        position: relative;
    }

    .services-hoof-grid.grid-right  {
        position: absolute;
        top: 13rem;
        right: 6rem;
        left: auto;
    }

    .services-cards {
        width: 90%;
        flex-wrap: wrap;
    }

    .service-card {
        width: 15rem;
    }

    .service-card .service-desc {
        font-size: 1.5rem;
    }

    .section-clients-holder {
        padding: 0;
        margin: 0;
    }

    .clients-container {
        height: 87rem;
        width: 32.48rem; /* 16/9 -> for some reason aspect-ratio doesn't work */
    }

    .contact-container-row {
        font-size: 5rem;
    }

    .contact-container-row .sec {
        padding-bottom: 1rem;
    }

    .sec-2 {
        padding: 0 2rem 1rem 3rem !important;
        text-align: center;
    }

    .contact-buttons-container {
        margin: 6rem 0;
        flex-direction: column;
    }

    .section-contact .hero-button {
        margin-top: 3rem;
    }

    .contact-button {
        min-width: 55%;
        justify-content: space-between;
    }

    .section-projects {
        /* padding: 3rem 0; */
        /* margin: 25rem 0; */
        padding: 0;
        margin: 0;
        padding-bottom: 20vh;
    }

    .section-projects .heading {
        /* left: 2rem; */
        left: 0;
        top: 0;
    }

    .section-projects .tree-icon {
        bottom: -6rem;
        right: -6rem;
        width: 10rem;
    }

    .projects-carousel-item .play-button-project::after {
        width: 6rem;
    }

    .navbar-pagination {
        display: flex; /* always flex */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 20% 0;
        background: var(--theme-background);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        border-radius: var(--border-radius);
        gap: 4rem;
        overflow-y: scroll;
    }
    .navbar-pagination.show {
        opacity: 1;
        visibility: visible;
    }
    .navbar-pagination li {
        font-size: 2.7rem;
    }



    .close-button {
        display: none;
        position: absolute;
        top: 2rem; /* 20px */
        right: 2rem;
        font-size: 3.2rem; /* 32px */
        background: none;
        border: none;
        color: var(--theme-text, #fff); /* optional */
        cursor: pointer;
        z-index: 10000;
    }

    .hamburger-button {
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 4rem;
        height: 4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 10000;
    }

    .hamburger-line {
        width: 100%;
        height: 0.4rem;
        background-color: var(--theme-text, #fff); /* fallback to white */
        border-radius: 0.2rem;
    }


    .navbar-pagination-mobile ul {
        display: flex;
        flex-direction: column;
    }

    /* Modals */

    .custom-modal-content {
        width: 90%;
        padding: 2rem;
        overflow: scroll;
        margin: 5vh auto;
    }

    .services-popup .custom-modal-content {
        border-color: transparent;
        background-color: #1f2026;
        width: 90vw;
        /* height: 90vh; */
        height: auto;
        aspect-ratio: 5/8;
        max-width: none;
        margin: auto;
    }

    .popup-modal-content-holder {
        gap: 2rem;
        padding: 2rem 2rem;
    }

    .popup-modal-body-holder {
        /* padding: 0 2rem; */
    }

    .services-popup p {
        line-height: 2.1rem;
        font-size: 1.6rem;
    }

    .services-popup h1 {
        font-size: 2rem;
    }

    .services-popup .popup-contact {
        font-size: 1.6rem;
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label {
        text-align: left;
        padding-right: 0;
        margin-bottom: 0.5rem;
        flex: unset;
        width: 100%;
        font-size: 2rem;
    }

    .form-input {
        width: 100% !important;
        font-size: 2rem;
        /* padding: 1.5rem 1.2rem; */
    }

    .form-submit {
        width: 100%;
        text-align: center;
    }

    .custom-form button {
        height: 5rem;
        font-size: 2rem;
    }
    
    /* End Modals */

    .colab-header { /* Override .heading */
        font-size: 8rem;
    }

    /* Instagram Display */
    #instagram-feed .instagram-bg {
        top: 8%;
        left: 2%;
        width: 13rem;
    }

}