/* TABLET & MOBILE */
@media only screen and (min-width: 0px) and (max-width: 1024px) {
    body {
        background-color: inherit;
    }

    h1{
        font-size: var(--x-large-content);
        line-height: 2.6rem;
    }

    h2{
        font-size: var(--larger-content);
        line-height: 2.2rem;
    }
    
    #sticker-button-info{
        opacity:0;
    }

    #navbar-container{
        justify-content: start;
        flex-direction:row-reverse;
        align-items: center;
        padding: 16px;
        gap: 16px;
    }
    .logo-container{
        padding-top:4px;
    }
    nav ul .menu-mobile{
        display:block;
    }
    #header-menu-wrapper{
        flex-direction: column;
        align-items: center;

    }
    nav #main-menu{
        z-index:-1;
        flex-direction: column;
        gap: 4px;
        align-items: start;
        position: absolute;
        width: auto;
        padding: 4px 4px 24px 4px;
        left:0;
        right:50%;
        margin:64px 0 0 16px;
        top:0;
        background-color: rgba(var(--dio-black),1);
        transform: all 1s ease;
        display:none;
        border-radius: 4px;
    }
    nav .menu-icon-responsive{
        display:flex;
    }
    nav ul li hr{
        background-color:rgba(var(--dio-white),0.25);
        width:100%;
        border: none;
        height:1px;
        margin: 4px 0 4px 0;
    }

    #header-menu-wrapper ul.show {
        display: flex;
    }

    nav li{
        width: 100%;
        padding:0;
        margin:0;
    }

    nav .small-box-content{
        color: rgba(var(--dio-white),0.75);
        border-radius: 2px;
        padding: 8px 12px 8px 12px;
    }

    .nav-secondary{
        background-color:rgba(var(--dio-white),1);
    }
    .nav-secondary svg{
        fill:rgba(var(--dio-black),1);
    }

    nav .small-box-content:hover{
        background-color: rgba(var(--dio-white),1);
        color: rgba(var(--dio-black),1);
    }

    /*Footer*/
    #sub-footer{
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
    #contact-card{
        padding: 16px;
        min-height: 200px;
    }
    #news-card{
        display: flex;
        flex-direction: column;
    }
    #news-card .card-image-wrapper{
        height: 25vw;
        border-radius: 4px 4px 0 0;
    }

    #news-card .card-text-wrapper{
        padding:16px;
        gap: 16px;
    }
    #primary-footer{
        grid-template-columns: 1fr;
        padding: 32px 16px 16px 16px;
    }
    #footer-logo-wrapper{
        width:100%;
        gap:16px;
        margin: 0 0 32px 0;
    }
    #footer-logo-wrapper svg{
        height: 24px;
    }
    #secondary-footer{
        padding: 16px;
        grid-template-columns: 1fr 1fr;
    }

    #third-footer{
        padding:16px;
    }

    /*Home*/
    #home-wrapper p, #home-intro p{
        font-size: var(--medium-content);
    }
    #home-wrapper h1{
        font-size: var(--large-content);
        line-height: 2rem;
    }
    .highlight-card-project-container {
        width: 80%;
    }
    .highlight-card-project-container.focus .highlight-card-text-content {
        padding-right: 0;
    }
    .highlight-card-project-wrapper{
        grid-template-columns: 1fr 1fr;
    }
    .highlight-card-category-wrapper{
        flex-direction: column;
        gap: 8px;
    }
    .highlight-card-text-content h3{
        font-size: var(--medium-content);
    }


    #client-wrapper{
        padding: 16px 16px 40px 16px;
        flex-direction: column;  
        border-top: none; 
    }
    .client-content ul{
        display:grid;
        grid-template-columns: 1fr 1fr;
    }

    /*Page About*/
    .about-content-wrapper{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    #about-wrapper div h2{
        margin-bottom: 16px;
    }
    .about-image-wrapper{
        aspect-ratio: 16/9;
    }
    .about-image-wrapper img{
        object-position: center ;
    }
    .faq-content{
        padding: 0px 16px 16px 16px;
    }

    #services{
        padding: 72px 16px 72px 16px;
        grid-template-columns: 1fr 1fr;
        gap:16px;
    }
    #services-wrapper{
        grid-template-columns: 1fr;
        gap:8px;
    }
    .card-services{
        padding:16px;
    }
    .show-more-icon{
        display:flex;
        justify-content: center;
        align-items: center;
    }
    .card-services ul, .services-description{
        display:none;
    }

    /*Page Projet*/
    #cover-project-wrapper{
        margin: 0 16px 0 16px;
    }
    #intro-project-wrapper, #about-container{
        padding: 25vh 16px 0 16px;
    }
    .slider-container, #highlight-card-wrapper, #about-wrapper, #testimony-wrapper, #information-project-container, #faq-wrapper, .image-project-container{
        padding: 0 16px 0 16px;
    }

    .image-project-container, .image-project-wrapper, .slider-wrapper{
        gap:8px;
    }
    .slider-item{
        height: 80vw;
    }

    .slider-container::after {
        height: calc(100% - 56px);
        width: 64px;
        background: linear-gradient(90deg, rgba(var(--dio-white),0) 0%, rgba(var(--dio-white),1) 80%);
    }
    .text-project-wrapper{
        padding: 0;
    }

    /*Portfolio*/
    #portfolio-section{
        padding-top: 80px;
    }
    #portfolio-menu {
        width: 50%;
        background-color:rgba(var(--dio-white),1);
    }
    #portfolio-menu ul {
        padding: 128px 16px 0 16px;
        height:auto;
    }
    #portfolio-container{
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 0 16px 0 16px;
        margin-left:0;
    }
    .portfolio-wrapper {
        height: 50vw;
    }
    /*Portfolio Menu*/
    #extand-menu-tab{
        width:50%;
    }
    #extand-menu-tab div{
        margin: 24px 0 16px 16px;
    }    

/* TRASH ?
    .project-text-wrapper div{
        margin:0 0 16px 16px;
        padding:16px;
    }
    .project-image-wrapper div{
        padding: 0 16px 16px 0;
        gap:16px;
    }
*/
}


/* MOBILE ONLY */
@media only screen and (max-width: 480px){
    body {
        background-color: inherit;
    }

    /*Footer*/
    .footer-info-wrapper{
        flex-direction: column;
        gap:16px;
    }
    #secondary-footer{
        gap: 8px;
        grid-template-columns: 1fr;
    }
    #secondary-footer .first{
        justify-content: space-between;
        grid-row: 2;
    }
    #contact-card{
        font-size: var(--medium-content);
    }

    /*Home*/
    .highlight-card-project-wrapper{
        grid-template-columns: 1fr;
    }
    .highlight-card-project-wrapper{
        gap: 0px;
    }
    .highlight-card-text-wrapper{
        padding:16px;
    }

    .highlight-card-text-content p{
        font-size: var(--small-content);
    }

    #client-logo-wrapper{
        gap:16px;
    }
    .track {
        gap: 48px;
    }
    .logo-content, .logo-content img{
        height:32px;
    }

    .testimonial-content{
        padding: 40px 24px 80px 24px;
        gap: 24px;
    }
    .testimonial-text{
        font-size:var(--content);
    }
    .testimonial-logo{
        width: 40px;
        height: 40px;
    }
    .testimonial-meta{
        font-size:var(--small-content);
    }

    .client-content ul{
        display:grid;
        grid-template-columns: 1fr;
    }

    /*Page Projet*/
    #intro-project-content{
        width:100%;
    }
    #information-project-wrapper{
        grid-template-columns: 1fr;
    }
    .slider-box img{
        height: 50vw;
    }
    .slider-content{
        padding: 24px;
    }

    #portfolio-container{
        grid-template-columns: 1fr;
    }
    .portfolio-wrapper {
        height: 100vw;
    }
    #extand-menu-tab, #portfolio-menu{
        width:75%;
    }


    /*Page About*/
    #services{
        grid-template-columns: 1fr;
    }





/* TRASH ?
    .project-image-wrapper{
        overflow: scroll;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(20px); 
        background-color: rgba(var(--dio-black), 0.25);
    }
    .project-image-wrapper div{
        padding: 16px;
        grid-column: 1;
        flex-direction: row;
        gap:16px;
    }
    .project-text-wrapper{
        width:100%;
        justify-content: start;
        align-items: start;
    }
    .project-text-wrapper div{
        padding:80px 16px 16px 16px;
        margin:0;
        background-color: rgba(var(--dio-black), 1);
        color: rgba(var(--dio-white),1);
        border-radius: 0px;
    }
    .category li{
        background-color: rgba(var(--dio-white), 0.1);
    }
    .wrapper-image{
        display: block;
        width: 70vw;
        height: 70vw;
    }        
*/


}


/* TABLET ONLY */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
    body {
        background-color: inherit;
    }
}