@media (min-width: 360px) and (max-width: 640px) {
    header {
        width: 100%;
        height: 12vh;
        background-color: rgb(5, 5, 124);
    }

    .headrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto;
        /* grid-column-gap: 20px; */
    }

    .box1 {
        margin-top: 0px;
    }

    .box1 h5 {
        text-align: center;
    }
    .ban{
        height: 10vh;
    }
    .banrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto auto;
    }

    .box2 img {
        height: 10vh;
    }

    .box2 h1 {
        font-size: 15px;
        text-align: left;
    }
    .carousel-inner img {
        width: 100%;
        height: 30vh;
    }
    .card img {
        height: 30vh;
    }
}



@media (min-width: 600px) and (max-width: 1024px) {
    header {
        width: 100%;
        height: 8vh;
        background-color: rgb(5, 5, 124);
    }

    .headrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto;
        /* grid-column-gap: 20px; */
    }

    .box1 {
        margin-top: 0px;
    }

    .box1 h5 {
        text-align: center;
    }
    .ban{
        height: 10vh;
    }
    .banrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto auto;
    }

    .box2 img {
        height: 10vh;
    }

    .box2 h1 {
        font-size: 25px;
        text-align: left;
    }
    .carousel-inner img {
        width: 100%;
        height: 30vh;
    }
    .card img {
        height: 30vh;
    }
}


@media (min-width: 320px) and (max-width: 658px) {
    header {
        width: 100%;
        height: 13vh;
        background-color: rgb(5, 5, 124);
    }

    .headrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto;
        /* grid-column-gap: 20px; */
    }

    .box1 {
        margin-top: 0px;
    }

    .box1 h5 {
        text-align: center;
    }
    .ban{
        height: 10vh;
    }
    .banrap {
        width: 80%;
        margin: auto;
        display: grid;
        grid-template-columns: auto auto;
    }

    .box2 img {
        height: 10vh;
    }

    .box2 h1 {
        font-size: 15px;
        text-align: left;
    }
    .carousel-inner img {
        width: 100%;
        height: 30vh;
    }
    .card img {
        height: 30vh;
    }
}


@media (min-width: 712px) and (max-width: 1138px) {
    .card img {
        height: 40vh;
    }
}
@media (min-width: 800px) and (max-width: 1280px) {
    .card img {
        height: 20vh;
    }
}
@media (min-width: 320px) and (max-width: 533px) {
    header {
        width: 100%;
        height: 15vh;
        background-color: rgb(5, 5, 124);
    }
}