@media(max-width:1290px){
    .cards{
        flex-direction: column;
        align-items: center;
    }
    .card{
        margin-bottom: 40px;
    }
}
@media(max-width:1220px){
    .content-left > img{
        height: 400px;
    
    }
    .content-right > h3{
        font-size: 38pt;
        width: 500px;
    }
    .about-p{
        font-size: 15pt;
        /* padding-right: 90px; */
        width: 500px;
    }
    .about-top > h2{
        font-size: 50pt;
    }
    .content-right{
        margin-left: 30px;
        margin-right: 20px;
    }
    .proj-box{
        height: auto;
    }
}
@media(max-width:1050px){
    nav{
        display: none;
    }
    van{
        display: flex;
    }
    burger{
        display: flex;
    }
    .about{
        background-size: auto;
    }
    footer{
        flex-direction: column;
        height: 500px;
        justify-content: center;
    }
    .left{
        width: 100%;
        margin-bottom: 50px;
    }
    .right{
        width: 100%;
    }

}
@media(max-width:1000px){
    .about-content{
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    }
    .content-right{
        margin: 0px;
        align-items: center;
        width: 60%;
        margin-bottom: 60px;
    }
    .content-left > img{
        margin-bottom: 30px;
    }
    .content-left{
        justify-content: center;
        align-items: center;
    }
    .about{
        padding-top: 40px;
    }
    .dropbtn{
        position: relative;
        top: 2px;
    }
}
@media(max-width:935px){
    .proj-bottom{
        flex-direction: column;
        /* justify-content: center; */
        align-items: center;
    }
    .proj-left{
        margin-bottom: 100px;
    }
    .proj-box > p{
        padding-bottom: 40px;
    }
    .projects{
        height: auto;
        padding-bottom: 100px;
    }
}
@media(max-width:900px){
    img[src="./Assets/5.png"]{
        display: none;
    }
    .about-top > h2{
        font-size: 35pt;
    }
    .about-top > img{
        width: 120px;
        left: 30px;
    }
}
@media(max-width:880px){
    .framework-top > h2{
        font-size: 40pt !important;
        left: -60px;
    }
    .framework-top > img{
        width: 150px !important;
    }
    
}
@media(max-width:690px){
    
    van{
        width: 60vw;
    }

    .contact-top > img{
        width: 150px;
    }
    .contact-top > h6{
        font-size: 50pt;
    }


}
@media(max-width:650px){
    .proj-box{
        width: auto;
    }
    .proj-top > img{
        height: 80px;
    }
    .proj-top > h4{
        font-size: 40pt;
        position: relative;
        bottom: 10px;
    }
    .proj-box > h5{
        font-size: 38pt;
    }
    .proj-box > h6{
        font-size: 30pt;
    }
    .proj-box > p{
        font-size: 16pt;
    }
}
@media(max-width:600px){
    .hero > img{
        display: none;
    }
    .main > img{ 
        width: 330px;
    }
    .main > h1{
        font-size: 26pt;
    }
    .main{
        position: relative;
        top: 100px;
    }
    .about-top > h2{
        font-size: 25pt;
    }
    .about-top > img{
        width: 100px;
        left: 20px;
    }
    .content-left > img{
        height: 300px;
        border-radius: 10px;
    }
    .content-right > h3 {
        font-size: 27pt;
        width: 340px;
    }
    .about-p{
        font-size: 12pt;
        width: 340px;
    }
    .framework-top > h2{
        font-size: 30pt !important;
        left: -40px;
    }
    .framework-top > img{
        width: 100px !important;
    }
    .framework{
        padding-top: 20px;
    }
    .left{
        flex-direction: column;
    }
    .vertical{
        width: 300px;
        height: 5px !important;
        margin: 20px 0px 10px 0px;
    }
    footer{
        height: 700px;
    }
    .data{
        justify-content: center;
        align-items: center;
    }
    .inp{
        font-size: 10pt;
    }
}
@media (max-width:515px){
    .contact-top > img{
        width: 120px;
    }
    .contact-top > h6{
        font-size: 40pt;
    }
}
@media (max-width:500px){
    .proj-box > p{
        font-size: 14pt;
        padding: 0px 10px 20px 10px;
    }
}
@media (max-width:455px){
    .about-top > h2{
        font-size: 20pt;
    }
    .about-top > img{
        height: 100px;
        left: 10px;
    }
    .proj-bottom{
        margin-left:4px ;
        margin-right:4px ;
    }
    .proj-top > h4{
        font-size: 28pt;
        bottom: 0px;
        margin-left: 4px;
    }
    .proj-top > img {
        height: 50px;
        margin-top: 10px;
    }
    van > ul > a > li{
        font-size: 26pt;
    }
    .top{
        margin-top: 34px;
    }
    .no2{
        font-size: 34px;
    }
    .proj-box > h6{
        font-size: 24pt !important;
    }
    .proj-box > h5{
        font-size: 32pt !important;
    }
    .proj-box > p{
        font-size: 12pt;
    }
    .framework-top > h2{
        font-size: 22pt !important;
        left: -40px;
    }
    .framework-top > img{
        width: 80px !important;
    }
}
@media (max-width:415px){
    .contact-top > img{
        width: 100px;
    }
    .contact-top > h6{
        font-size: 30pt;
        top: -5px;
    }
    .card{
        transform: scale(0.75);        
    }
    .card-2{
        position: relative;
        bottom: 100px;
    }
    .card-3{
        position: relative;
        bottom: 200px;
    }
    .contact-top{
        padding-top: 20px;
    }
}
@media (max-width:385px){
    .about-top > h2{
        text-align: center;
    }
    .about-top > img{
        height: 100px;
        left: 40px;
    }
    .content-left > img{
        height: 250px;
        border-radius: 10px;
    }
    .content-right > h3 {
        font-size: 27pt;
        width: 286px;
    }
    .about-p{
        font-size: 12pt;
        width: 286px;
    }
    proj-box > h6{
        font-size: 35px;
    }
    .dropdown-content {
        min-width: 120px;
        left: 2px;
    }
}