*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

:root{
    --fw-bold: 600;
    --fw-reg: 400;
    --fw-light: 200;

    --clr-light: hsl(0, 0%, 98%);
    --clr-dark: #000;
    --clr-card-bg: #fff;

    --fs-body: 1rem;
    --fs-body-small: 0.85rem;

    --fs-h1: 2rem;
    --fs-h1-small: 1.5rem;
    --fs-h2: 1.5rem;
    --fs-h2-small: 1.2rem;

    --card-border-height: 5px;
    --card-border-radius: 6px;
    --card-bs: 0px 20px 20px -2px #ddd;
}


/*general styles*/

body, html{
    width: 100%;
    height: 100%;
}

body{
    font-family: 'Poppins', sans-serif;
    width: 100%;
    height: 100%;
    font-size: var(--fs-body);
    background: var(--clr-light);
    color: #555;
}

.container{
    padding: 3em 2em;
}

@media (min-width: 600px){
    .container{
        width: 100%;
        margin: 0 auto;
        padding: 4em 2em;
    }
}

@media (min-width: 850px){
    .container{
        width: 85%;
        margin: 0 auto;
        padding: 2em 0 4em 0;
    }
}

/*typography*/

h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
    font-weight: var(--fw-reg);
}

@media (max-width: 600px){
    h1{
        font-size: var(--fs-h1-small);
    }
    h2{
        font-size: var(--fs-h2-small);
    }
    body{
        font-size: var(--fs-body-small);
    }
}

/*heading section*/

.top{
    text-align: center;
}

.top__head1{
    font-weight: var(--fw-reg);
}

.top__head2{
    margin-bottom: 0.5em;
}

.top__subHeading{
    font-weight: var(--fw-light);
    margin-left: auto;
    margin-right: auto;
    max-width: 550px;
}

/*cards section*/

.card-container{
    margin-top: 3em;
    text-align: center;
}

.card{
    background-color: var(--clr-card-bg);
    margin: 2em auto;
    border-radius: var(--card-border-radius);
    padding: 1.3em 1em;
    text-align: left;
    box-shadow: var(--card-bs);
}

@media (max-width: 850px){
    .card{
        max-width: 350px;
    }
}

.card__subtitle{
    font-weight: var(--fw-light);
    margin-top: 0.6em;
}

.card-1{
    border-top: var(--card-border-height) solid hsl(180, 62%, 55%);
}

.card-2{
    border-top: var(--card-border-height) solid hsl(0, 78%, 62%);
}

.card-3{
    border-top: var(--card-border-height) solid hsl(34, 97%, 64%);
}

.card-4{
    border-top: var(--card-border-height) solid hsl(212, 86%, 64%);
}

.card__img-container{
    margin-top: 1em;
    text-align: right;
    padding: 1em 1em;
}

@media (min-width: 600px){
    .card-container{
        display: grid;
        grid-template: repeat(2, 1fr) / repeat(2, 1fr);
        grid-column-gap: 2em;
    }
}

@media (min-width: 1150px){
    .card{
        margin: 1em;
    }

    .card__subtitle{
        max-width: 350px;
    }
    
    .card-container{
        display: grid;
        grid-template: repeat(2, 1fr) / repeat(3, 1fr);
        align-items: center;
        grid-column-gap: 0;
    }

    .card-1{
        grid-row: span 2;
    }

    .card-3{
        grid-row: span 2;
    }

    .card-4{
        grid-column: 2;
    }
}

/*footer*/
footer{
    bottom: 0;
    text-align: center;
    padding: 0.4em 0;
    font-weight: 300;
    font-size: var(--fs-body-small);
}

.footer__link{
    text-decoration: none;
    color: hsl(0, 78%, 62%);
    transition: 0.3s;
}

.footer__link:hover{
    color: hsl(212, 86%, 64%);
}