* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



@media (max-width: 1700px) {
    .wheel-label {
        display: none;
    }
}
@media (max-width: 1400px) {
    #project-wheel {
        display: none;
    }
}

@media (max-width: 1100px) {

        .hero-text {
        max-width: 500px;
        left: 5%;
        bottom: 8rem;
    }

    .scroll-indicator {
        display: none;
    }

    .introSideBar,
    .showcasing-sidebar {
        display: none;
    }

    .introSideBar {
        position: absolute;
        left: -15em;
        width: 18em;
        margin-top: 20.5rem;
        display: block;
    }

    /**Side projects 1100px**/

    .sideProjectGrid {
        column-count: 2;
    }


    /**ABOUT 1100px **/
        .about-paragraph {
        font-size: 1rem;
        line-height: 1.6;
    }

        #bildtextcontainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        padding: 2rem;
        max-width: 600px;
        padding-bottom: 4rem;
        padding-top: 4rem;
        gap: 1rem;
    }

        #textblocktitle {
        text-align: center;
        margin-bottom: 0rem;
        padding-bottom: 1rem;
    }
}


/** START 768 768 768 768 768 768 768 START**/
@media (max-width: 768px) {

    .fullWidthImage, .fullWidthImage2, #descriptionImg {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: .3rem;
    }

       #lyftaupp, #lyftaupp2 {
        border-radius: .3rem;
    }

    .researchIdeation #descriptionImg {
        height: 250px;
    }

        .researchIdeation #manual {
        display: block;
        width: 100%;
        height: auto;
        border-radius: .3rem;
    }

    #polar-uppdelad {
        display: block;
        width: 100%;
        height: 250px;
        border-radius: .3rem;
        margin-bottom: 1rem;
    }

    #manual2 {
        display: block;
        width: auto;
        max-width: none;
        height: 250px;
    }

    .gradient-section #ringlight, #magnetic, #friction, #buttons, #twist, #prototypes {
        display: block;
        width: 100%;
        height: 250px;
        border-radius: .3rem;
    }

    .gridEval .fullWidthImage {
        display: block;
        width: 100%;
        height: 200px;
        border-radius: .3rem;
    }

    #about {
    padding-top: 4rem;
    padding-bottom: 7rem;
    }

    #sideProjects {
        padding: 4rem 20px; 
    }
    .project-card {
        border-radius: .5rem;
        margin-bottom: 1rem;
    }

    .projects-section {
        padding-top: 4rem;
    }

    .project-info {
        padding: .8rem .8rem;
    }

    .project-info p, .itemsList {
        font-size: .8rem;
    }

    .project-info h3 {
    font-size: 1rem;
    margin: 0 0 0.2rem 0;
    }

    .project-image {
    height: 300px;
    }
    
    .footer-logo {
        display: none;
    }

    .projects-grid {
        grid-template-columns: 1fr !important;
        width: 90%;
    }

    .hero-text h1 {
        font-size: 2.2rem;
    }

    .hero-text p {
        font-size: 1.1rem;
        width: 100%;
    }

    .hero video {
        object-position: 70% center;
        filter: blur(.5rem) brightness(0.8);
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        z-index: 10001;
        cursor: pointer;
    }

    .nav-list {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(20, 20, 20, 0.98);
        justify-content: center;
        align-items: center;
        z-index: 10000;

        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li {
        text-align: center;
        width: 100%;
        margin: 1.5rem 0;
    }

    .sideProjectGrid {
        column-count: 2;
    }

    #project-wheel {
        display: none;
    }
*/
    html {
        font-size: 14px;
    }

    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    p {
        font-size: .9rem;
        line-height: 1.4rem;
    }

    #bildtextcontainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        padding-bottom: 2rem;
        padding-top: 2rem;
        gap: 0rem;
    }

    .sideProjectGrid {
        column-gap: 10px;
    }

    .sideProjectGrid img{
        margin-bottom: 10px;
    }
    
    #aboutbilden {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 2rem;
    }

    #textBlock {
        width: 100%;
        padding: 0;
    }

    #textblocktitle {
        text-align: center;
        margin-bottom: 1rem;
    }

    .about-paragraph {
        text-align: left;
        font-size: .85rem;
        line-height: 1.2;
    }

    .cv-button {
        font-size: .8rem;
    }

    .button-container{
        gap: .5rem;
    }

    /**DIALOG**/

    dialog img {
        border-radius: .5rem;
    }


    #dialogTitle {
        font-size: .85rem;
        margin-bottom: 1rem;
        text-align: start;
    }

    #cadmodel{
        height: 15rem;
    }

    #buildingTheMinimoto {
        height: 15rem;
    }
    /**DIALOG**/



        .demoVideo {
    border-radius: .5rem;
    }

    .grid-item .the-tool-border {
        border-radius: .5rem;
    }

    .SidebarVideo {
    border-radius: .5rem;
    }

    .SidebarVideo2 {
    border-radius: .5rem;
    }

    #moodboard,
    #sketches,
    #cadmodel,
    #cadmodel2,
    #resultImg,
    #cadmodelAI,
    #mockup1,
    #mockup2,
    #stormockup,
    #mockup4,
    #UAMdfram,
    #UAMFotsteg,
    #UAMnatt
     {
        height: auto;
        border-radius: .3rem;
    }

    #frontImage img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    #resultImg {
    height: 100%;
    object-fit: cover;
    }

    .introTitle {
    margin: auto;
    padding-bottom: 2rem;
    padding-top: 0rem;
    font-size: 1.6rem;
    }

}


/** SLUT 768 768 768 768 768 768 768 SLUT**/

@media (max-width: 1043px) {
    .gridEval-minimoto {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .gridEval-minimoto img {
        height: auto; 
        width: 100%;
        object-fit: cover;
        border-radius: 0.5rem;
    }
}
/**SATCUBE MEDIA QUERIES 1100px**/
/**SATCUBE MEDIA QUERIES 1800px**/

@media (max-width: 1800px) {
    .introSideBar, 
    .showcasing-sidebar, 
    .Evaluate-sidebar,
    .VideoSidebar,
    .SidebarTemplates,
    .SidebarSlots,
    .SidebarSlot,
    .showcasing-sidebar2,
    .VideoSidebar2,
    .introSideBar2,
    #moodboardtitel
    {
        display: none;
    }

    .introContainer{
        padding: 1rem 20px
    }
    .image-interactive-wrapper {
        position: relative;
        width: 100%;
        display: block;
    }

    .image-interactive-wrapper .mobile-info-trigger {
        display: flex;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        height: 45px;

        background-color: var(--base-color); 
        color: var(--text-color);
        border-radius: 50%;
        border: none;
        z-index: 9;
        justify-content: center;
        align-items: center;
        animation: pulse 2s infinite;
        cursor: pointer;
        opacity: .5;
    }

    .mobile-info-trigger.left {
        left: -15px;
    }

    .mobile-info-trigger.right {
        right: -15px;
        width: 45px; 
        height: 45px;
    }

    .mobile-info-trigger.left.two {
        left: -15px;
        margin-top: 50px;
        width: 45px; 
        height: 45px;
    }

        .mobile-info-trigger.left.three {
        right: -15px;
        margin-top: 100px;
        width: 45px; 
        height: 45px;
    }

        .mobile-info-trigger.M {
        left: -15px;
    }

    .mobile-sidebar-popup {
        width: 90%;
        border: none;
        border-radius: 1rem;
        padding: 2rem;
        background: var(--backgrund-body-2);
        font-family: 'Inter', sans-serif;
        line-height: 1.6;
        color: var(--base-color);
    }

    @keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    }

    .grid-item, .introGrid {
    pointer-events: none;
}


}

    /**side shoots on project sides**/

    .mobile-info-trigger {
        display: none;
    }

@media (max-width: 1800px) {
    .mobile-sidebar-popup {
        background: var(--backgrund-body-2);
        font-family: Inter;
        color: var(--base-color);
        border: 1px solid #444;
        border-radius: .5rem;
        padding: 1rem;
        width: 90%;
        max-width: 400px;
    }

    /**Intro roles o challange text**/
    .introContentWrapper {
        flex-direction: column;
        gap: 1.5rem;
    }

    .boxRole, .boxProblem {
        width: 100%;
    }

    /**Intro roles o challange text**/

    #finalprototyp {
    height: 100%;
    object-fit: cover;
    }

    #frontSatcube {
    width: 100%;
    height: 340px;
    overflow: hidden;
    }

    #frontSatcube img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 50%;
    }

    #listaText {
        padding-left: 1rem;
        font-size: .8rem;
    }

    .scroll-container {
    width: 100%;
    overflow-x: auto;
    padding: 1rem 0;
    
    -webkit-overflow-scrolling: touch; 
    }

    #manual2 {
        display: block;
        width: auto;
        max-width: none;
        height: 250px;
    }



    /**project polarization**/

    .introGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem; 
        width: auto;
    }

    .introGrid img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .textSidebar {
        font-size: .8rem;
        margin-bottom: .5rem;
        line-height: 1.2rem;
    }
}