:root{
        --red: hsl(0, 78%, 62%);
        --cyan: hsl(180, 62%, 55%);
        --orange: hsl(34, 97%, 64%);
        --blue: hsl(212, 86%, 64%);
        --veryDarkBlue: hsl(234, 12%, 34%);
        --grayishBlue: hsl(229, 6%, 66%);
        --VeryLightGray: hsl(0, 0%, 95%);
    }

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

    html{
        font-size: 62.5%;
    }

    body {
        font-family: "Poppins",sans-serif;
       font-size: 1.5rem;
        min-height: 100vh;
        margin: 5rem 0;
        background: var(--VeryLightGray);
    }
    
    main {
        margin-top: 5rem;
    }

    .heading{
        text-align: center;
       
    }
    
    .heading-title {
        font-weight: 200;
        color: var(--veryDarkBlue);
       font-size: 2.4rem;
        margin-bottom: 1rem;
        
    }
    
    .heading-title span {
        font-weight: 600;
        color: var(--veryDarkBlue);
    }
    
   
    
    .heading-text {
        color: var(--grayishBlue);
        padding:0 4rem;
        
    }
    
    .container {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: 0 3rem;

    }
    
    .card-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .card {
        padding: 2rem;
        display: flex;
        flex-direction: column;
        border-radius: 8px;
        box-shadow: 0 15px 30px -11px rgba(131, 166, 210, 0.5), 0 4px 4px 0 rgba(0, 0, 0, .25);
        background-color:#fff;
        
        height: 100%;

    }
    
    .one{
        border-top: 3px solid var(--cyan);
    }
    .two{
        border-top: 3px solid var(--red);
    }
    
    .three{
        border-top: 3px solid var(--orange);
    }
    .four{
        border-top: 3px solid var(--blue);
    }
    
    

    
    
    
    .card-header {
        font-size: 2rem;
        font-weight: 600;
        color: var(--veryDarkBlue);
        margin-bottom: 0.5rem;
    }
    
    .card-description {
       font-size: 1.3rem;
        color: var(--grayishBlue);
    }
    
    .card-icon {
        align-self: flex-end;
        margin-top: 2rem;
    }
    
   
    
    @media screen and (min-width: 700px) {
        .card-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media screen and (min-width: 1100px) {
        body{
           margin: 5rem ;
        }
        main{
            margin: 5rem auto;
            width: 75%;
        }
        .heading-text{
            margin: 0 auto;
            max-width: 45%;
        }

        
       .card-container{
        grid-template-columns: repeat(3, 1fr);
       }
    
        .one {
            grid-area: 2 / 1 / 4 / 2;
        }
    
        .two {
            grid-area: 1 / 2 / 3 / 2;
        }
    
        .three {
            grid-area: 3 / 2 / 5 / 2;
        }
    
        .four {
            grid-area: 2 / 3 / 4 / 4;
        }
    }