.info, .problem, .research, .branding,
.user-flow, .wireframe, .uikit,.mockup,
.about,.redesign{
    padding: 0 1rem;
}
.info h1, .problem h1, .research h1,.branding h1,.user-flow h1, 
.wireframe h1, .uikit h1,.mockup h1,
.about h1,.redesign h1{
    color: #171717;
    font-size: 2.5rem; 
    margin-bottom: 0;
}
.design_process {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: auto;
    padding: 1rem;
}
.design_process ul,.design_process h3,.design_process h1,.design_process p{
    padding-left: 0;
    margin: 0;
    padding: 0;
}
.features{
    padding: 0 1rem;
}
.two{
    margin-top: 2rem;
}
h2,h3{
    color: #171717;
}
.info p, .problem p, .research p,.branding p{
    margin-top: 0;
}
.info img,.branding img {
    box-shadow: none;
}
.research h2{
    margin-top: 0;
    margin-bottom: 0;
    grid-column: 1/-1;
}
/* animation list page */
.coverimage img{
    border-radius: 0;
    width: 100%;
    box-shadow: none;
}
.coverimage{
    text-align: center;   
}
.coverimage h1{
    margin-bottom: 0;
    font-weight: lighter;
    display: block;
    font-size: 1.75rem;
}   
.tekkbranding img{
    height: 70%;
    width: 70%;
    box-shadow: none;
}

.tekk:hover{
    background-color: #0D937D;

}
/* animation list */

/* start of next and previous btns */

    .btns{
        margin: auto;
        width: 90%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin: 1rem auto;
    }
    
    .nextprv-btn{
        background-color: #F5606B;
        color:black;
        border-radius:10px;
        border:none;
        font-size: 1rem;
        padding: 0.75rem;
        cursor: pointer;
    }
    .nextprv-btn:hover{
        text-decoration: underline;
    }

/* end of next and previous btns */
/* about me page */
    .aboutme{
        
        max-width: 1100px;
        margin: auto;
        margin-top: 4rem;
        padding: 0 1rem;
    }
    .aboutwithimg{
        
        display: flex;
        gap: 1rem;
        flex-direction: column;
    }
    .aboutme h1{
        font-size: 6rem;
        margin: 0;
        line-height: 1;
        
    }
    .aboutme h2{
        margin: 0;
        font-weight: lighter;
        font-size: 4rem;
    }
    .form h1{
        font-weight: lighter;
        font-size: 3rem;
    } 
/* end of about me page */    

@media screen and (min-width:700px) {
        .research,.user-flow, 
        .wireframe, .uikit,.mockup,.problem, .research, 
        .about,.redesign{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            max-width: 1100px;
            margin: auto;
            grid-column-gap: 1rem;
        }
        .branding{
            max-width: 1100px;
            margin: auto;
        }

        .info,.features{
            display: flex;
            justify-content: space-between;
            max-width: 1100px;
            margin: auto;
        }
        .features{
            align-items: center;
        } 
        


        .redesign h2{
            grid-column: 1/-1;
        }
         .problem h1, .research h1,
        .user-flow h1, .wireframe h1, .uikit h1,.mockup h1
        ,.about h1,.redesign{
            grid-column: 1/-1;
        }
        .mockup p{
            margin-top: 0;
        }
        .about p,.about img,.redesign img {
            grid-column: 1/-1;
        }
        
        .tekkbranding img{
            height: 100%;
            width: 65%;
            margin-left: 4rem;
        }
         .problem p, .research p,.user-flow p, .wireframe p, .uikit p,.mockup p{
            grid-column:1/-1 ;
        }
        .userflow,.wireframe img,.wireframe .testing,.uikit img,.mockup img{
            grid-column: 1/-1;

        }
        /* animation list */
        .redesign p,.redesign h3{
            grid-column: 1/-1;
            margin-top: 0;
        }
        .coverimage{
            margin-top: 1rem;
            display: flex;
            flex-direction: column;
        }
        .coverimage img{
            max-width: 1100px;
            margin: auto;
        
        }
        .coverimage h1{
            font-size: 3rem;
        }

        /* animation list */

        .street{
            margin: auto;
        }

        /* next and prev btns */
        .btns{
            margin: auto;
            width: 90%;
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin: 2rem;
        }
        .aboutme h1{
            font-size: 8rem;
            margin: 0;
            padding: 0;
            line-height: 0.75;
        }
        .aboutwithimg{
            display: flex;
            flex-direction: row;
        }
        .aboutwithimg img{
            height: 30%;
            width: 30%;
        }
        section h2{
            margin-bottom: 0;
        }
        
}