* {
    padding:0;
    margin:0;
    box-sizing:border-box;
}
html,body {
    line-height: 1.4;
    font-weight: 300;
    font-family: "Roboto", sans-serif;
} 
.hero1 {
    min-height:100vh;
    background-image: url("/Project 4/images/developer.png");
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
}
.ptext {
    max-width:900px;
    margin:0 auto;
    padding-top:64px;
    padding-left: 16px;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:end;
}
.ptext h1 {
    font-size:72px;
    text-transform:uppercase;
    font-weight:normal;
}
.ptext h2 {
    font-size:72px;
    font-weight:normal;
}
.ptext h2 span {
    font-size:25px;
    font-weight:bold;
}
.work-text {
    background-color:black;
    color:white;
    text-align: center;
    text-transform: uppercase;
    padding:20px;
}
.work-text h2 {
    font-weight:300;
    font-size:72px;
}
.work-text h2 span {
    font-size:96px;
    font-weight:400;
}
.cards {
    max-width:1100px;
    margin:50px auto;
    background-color:white;
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    align-items: center;
    justify-content:center;
    justify-content: space-evenly;
}
.card {
    border-radius:10px;
    height:400px;
    width:320px;
    box-shadow: 3px 5px 5px rgba(1, 1, 1, 0.2);
    transition:all 0.3s ease-in-out;
} 
.card img {
    width:100%;
    border-radius:10px;
}
.card .content{
    padding:20px;
}
.card .content h2 {
    margin-bottom:10px;
    font-size:20px;
}
.card:hover {
    transform:scale(1.06);
    box-shadow: 3px 5px 5px rgba(1, 1, 1, 0.3);
}
.info {
    display:flex;
    /* justify-content:baseline; */
}
.contact , .about {
    min-height:300px;
    min-width:50%;
    padding:32px;
    color:white;
}
.contact {
    background-color:#515603;
    display:flex;
    flex-direction:column;
}
.about {
    background-color:#722300;
    display:flex;
    flex-direction:column;
    
}
.contact h2 , .about h2 {
    font-size:64px;
    font-weight:300;
    margin-bottom:10px;
}
.contact p , .about p {
    margin-bottom:20px;
}
footer {
    background-color:black;
    color:white;
    text-align:center;
    padding:20px;
    font-size:20px;
    text-transform:uppercase;
}
@media (max-width: 930px) {
    .work-text h2 {
        font-size: 70px;
    }
    .work-text h2 span {
        font-size: 90px;
    }
}
@media (max-width: 900px) {
    .work-text h2 {
        font-size: 65px;
    }
    .work-text h2 span {
        font-size: 80px;
    }
}
@media (max-width: 840px) {
    .info {
        flex-direction: column;
        /* align-items:stretch; */
    }
    .ptext h1 , .ptext h2 {
        font-size:50px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 60px;
    }
    .work-text h2 span {
        font-size: 75px;
    }
}

@media (max-width: 780px) {
    .work-text h2 {
        font-size: 50px;
    }
    .work-text h2 span {
        font-size: 65px;
    }
}
@media (max-width: 659px) {
    .info {
        flex-direction: column;
    }
    .ptext h1 , .ptext h2 {
        font-size:50px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 45px;
    }
    .work-text h2 span {
        font-size: 65px;
    }
}
@media (max-width: 585px) {
    .info {
        flex-direction: column;
    }
    .ptext h1 , .ptext h2 {
        font-size:45px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 45px;
    }
    .work-text h2 span {
        font-size: 60px;
    }
}
@media (max-width: 530px) {
    .info {
        flex-direction: column;
    }
    .ptext h1 , .ptext h2 {
        font-size:40px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 40px;
    }
    .work-text h2 span {
        font-size: 55px;
    }
}
@media (max-width: 470px) {
    .info {
        flex-direction: column;
    }
    .ptext h1 , .ptext h2 {
        font-size:35px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 35px;
    }
    .work-text h2 span {
        font-size: 50px;
    }
}
@media (max-width: 415px) {
    .info {
        flex-direction: column;
    }
    .ptext h1 , .ptext h2 {
        font-size:30px;
        text-align: center;
    }
    .work-text h2 {
        font-size: 30px;
    }
    .work-text h2 span {
        font-size: 45px;
    }
    .contact h2 , .about h2 {
        font-size: 50px;
    }
}