/* ---------------Larger Screens----------------- */
@media screen and (min-width:1500px){
    .header-body {
        max-width: 50%;
        margin: 30px auto;
    }
}

/* ------------Laptops and Tablets--------------  */
@media  screen and (max-width:1500px){
    header {
        height: 90vh;
        width: 100%;
    }
    .header-body {
        height: 60vh;
        max-width: 60%;
        margin: 30px auto;
    }
    .grid-boxes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .boxes {
        height: 35vh;
        max-width: 100%;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:950px) {
    header {
        height: 85vh;
        width: 100%;
    }
    nav img {
        height: 35px;
    }
    nav {
        height: 15vh;
        max-width: 90%;
    }
    .header-body {
        height: 70vh;
        max-width: 58%;
        margin: 30px auto;
    }
    .header-body span:nth-child(1) {
        font-weight: 700;
        font-size: 30px;
        padding: 5px 30px;
    }
    .header-body div input {
        height: 50px;
        width: 300px;
    }
    .header-body div button {
        height: 50px;
        width: 170px;
        font-weight: 500;
        font-size: 20px;
    }
    .section {
        max-width: 90%;
        margin: auto;
        margin-top: 40px;
    }
    .flex-cards {
        max-width: 98%;
        gap: 25px;
        padding: 20px 0px;
        padding-left: 13px;
    }
    .cards {
        width: 127px;
        height: 200px;
    }
    .cards img {
        width: 120px;
        height: 170px;
    }
    .cards span {
        font-size: 60px;
        bottom: 25px;
        left: -11px;
    }
    .card-button {
        right: -25px;
        top: 70px;
    }
    .grid-boxes {
        display: block;
    }
    .boxes {
        height: 35vh;
        max-width: 100%;
        margin-bottom: 10px;
    }
    .footer-1 div {
        display: flex;
        flex-direction: column;
    }
    .footer-1 span {
        font-weight: 600
    }
    .footer-1 input {
        height: 50px;
        width: 80vw;
    }
    .grid-footer-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* -----------Smaller Screens------------ */
@media screen and (max-width:600px) {
    header {
        width: 100%;
        height: 80vh;
    }
    nav {
        height: 10vh;
        max-width: 90%;
    }
    nav img {
        height: 30px;
    }
    nav button {
        height: 30px;
        width: 70px;
    }
    .header-body {
        height: 60vh;
        max-width: 90%;
    }
    .header-body span:nth-child(1) {
        font-weight: 700;
        font-size: 30px;
        padding: 5px 30px;
    }
    .header-body span:nth-child(3) {
        font-weight: 350;
        font-size: 18px;
        padding: 5px 15px;
        margin: 5px 0px;
    }
    .header-body div {
        flex-direction: column;
    }
    .header-body div input{
        width: 80vw;
    }
    .section {
        max-width: 90%;
        margin: auto;
        margin-top: 40px;
    }
    .flex-cards {
        width: 95%;
        gap: 25px;
        padding: 20px 0px;
        padding-left: 9px;
    }
    .cards {
        width: 127px;
        height: 200px;
    }
    .cards img {
        width: 120px;
        height: 160px;
    }
    .cards span {
        bottom: 38px;
        left: -10px;
    }
    .card-button {
        right: -13px;
        top:70px ;
    }
    .grid-boxes {
        display: block;
    }
    .boxes {
        height: 35vh;
        max-width: 100%;
        margin-bottom: 10px;
    }
    .footer-1 {
        align-items: start;
        padding: 0px 30px;
    }

    .footer-1 span {
        font-weight: 500
    }
    .footer-1 div{
        align-items: start;
    }
}