@media only screen and (max-width: 850px) {

    section {
        padding: 5rem 2rem;
    }

    #hamburger-menu {
        display: block;
    }

    .arrow {
        font-size: 1rem;
    }

    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 4;

        padding: 1.25rem 1.5rem;

        background-color: var(--accent);
    }

    #hamburger-icon {
        display: block;
        color: white;
        font-size: 2rem;
    }

    header .logo.header{
        display: none;
    }

    header .logo.mobile{
        display: block;
    }


    header .logo.mobile img {
        width: 50px;
    }

    header #navbar{
        display: none;
    }  

    main {
        background-image: url(Assets/Images/small-screen_home.jpg);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #hero-sec {
        backdrop-filter: blur(4px);

        border: solid white 1px;

        padding: 5rem 2rem;

        width: 80vw;
    }

    #hero-sec h1 {
        font-size: 1rem;
    }

    #hero-sec button {
        backdrop-filter: none;
        font-size: .9rem;
    }

 

    /** ----- About Me ----- **/

    #about-me {
        flex-direction: column;
    }

    #about-me .img-container img {
        box-shadow: -20px -20px var(--higlight);
    }

    #about-me .content .accent-text {
        margin: 0;
        font-size: .5rem;
        width: 200px;
    }

    #about-me .content {
        gap: 2rem;
    }

    #about-me .content h1 {
        font-size: 4rem;
        margin: 0;
    }

    #about-me .content p:last-child {
        text-align: center;
        font-size: .8rem;

        width: 100%;
    }

    #what-i-do {
        height: fit-content;
        gap: 5rem;
    }

    #what-i-do h1{
        font-size: 4rem;
    }

    #what-i-do .accent-text {
        font-size: .5rem;
    }

    #what-i-do .header-container {
        margin: 0;
    }

    #what-i-do .card-container {
        flex-direction: column;
    }

    .card {
        width: 300px;
        padding: 1.5rem;
    }

    .card h2 {
        font-size: 1rem;
        white-space: nowrap;
    }

    .svg-group {
        transform: scale(0.5);
    }


    /** ----- My Gallery ----- **/

    #my-gallery {
        position: relative;
        flex-direction: column;
        gap: 2rem;
        padding: 2rem;
    }

    #my-gallery .content h1 {
        font-size: 4rem;
    }

    #my-gallery .content p {
        display: none;
    }


    .gallery-container .carousel-container {
        width: 100%;
        height: 400px;
        overflow-x: scroll;

        padding: 2rem;
    }

    ::-webkit-scrollbar {
        display: none;
    }

    .carousel-button {
        display: none;
    }



    /** ----- Location ----- **/

    #location {
        flex-direction: column;
    }

    #location .content {
        justify-content: flex-start;
    }

    #location .content h1 {
        font-size: 4rem;
    }

    #location .content p {
        font-size: .8rem;
        width: 250px;
    }

    #location .location-container {
        justify-content: flex-start;
    }

    #location .location-container .location {
        flex-direction: column;
        border-radius: 300px 300px 0px 0px;
    }

    #location .location-container .location:hover {
        transform: translate(0);
    }

    #location .location-container .location img {
        width: 100%;
        height: 350px;
    }

    #location .location-container .location div {
        padding: 1rem;
        font-size: .8rem;
    }



    /** ----- Contact Me ----- **/

    #contact-me {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    #contact-me h1 {
        font-size: 3rem;
    }
   
    #contact-me .content p {
        font-size: .8rem;
    }

    #contact-me .social-container > a div {
        padding: 1.5rem;
    }

    #contact-me .social-container > a div svg {
        width: 15px;
        height: 15px;
    }

    /** ----- Footer ----- **/

    footer {
        width: 100%;
        align-items:flex-start;
        gap: 0rem;

        border-top: none;
    }

    footer .content {
        padding:3rem;
        align-items: flex-start;
        gap: 1rem;
    }

    footer img {
        display: none;
        width: 250px;
    }

    footer ul {
        flex-direction: column;
        gap: 1rem;
        font-size: .8rem;
    }

    footer .social-container {
        width: 100%;
        padding: 2rem;
    }

}