*
{
    margin: 0;
    padding: 0;
    font-family: "Karla", sans-serif;
    font-weight: 400;
    font-size: 16px;
}

body
{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background-color:  hsl(204, 43%, 93%)
}

.card
{
    height: 80%;
    width: 60%;
    background-color: white;
    margin: auto auto;
    display: flex;
    flex-direction: column;
    justify-content: left;
}

.header
{
    height: 47%;
    width: 100%;
}
.header2
{
    margin: 7%;
    line-height: 1.8rem;
    /* margin: 3% 0%; */
    color: hsl(218, 22%, 67%)
}
.header2 h2
{
    color: #2bb3b1;
    font-weight: 700;
    font-size: 2em;    
}
.header2 h3
{
    margin: 3% 0% 1% 0% ;
    font-weight: 700;
    /* color: rgb(209, 222, 93); */
    color:#bade3b;
    font-size: 1.4em;    
}

.sub
{
    height: 53%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}

.price2
{
    margin: 14%;
    color: white;
}

.price
{
    height: 100%;
    width: 50%;
    background-color: #2bb3b1;
}

.price2 h3
{
    font-weight: 400;
    font-size: 1.5em;
}


.sp
{
    margin-top: 5%;
    margin-bottom: 3%;
}
#sp1
{
    font-weight: 700;
    font-size: 3em;
    vertical-align: middle;
}
#sp2
{
    padding-left: 3%;
    color: #c0e2e2;
}

.price2 button
{
    width: 100%;
    height: 7vh;
    margin-top: 10%;
    color: white;
    font-weight: 700;
    font-size: 1.5em;
    border-radius: 1rem;
    border-style: none;
    background-color:#bade3b;
}
.info
{
    height: 100%;
    width: 50%;
    background-color:#4abebd;
    color: white;
    /* font-weight: 400; */
}

.info2
{
    margin: 14%;
}

.info2 h3
{
    margin-bottom: 7%;
    font-weight: 400;
    font-size: 1.5em;
}

.info2 p
{
    /* color:  hsl(204, 43%, 93%); */
    color:hsl(204deg 100% 98.58% / 82%);
    font-weight: 10;
    line-height: 1.4em;
}

footer
{
    width: 100%;
    height: 1%;
    position: absolute;
    top:100%
}

@media (max-width: 375px) 
{
    *
    {
        font-size: 8px;
    }
    .card
    {
        display: flex;
        justify-content: space-evenly;
    }
    .header
    {
        height: 30%;
    }
    .sub
    {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }   

    .price ,.info
    {
        width: 100%;
    }

}