nav{
    background-color: #090A3A;
}
.header p{
    font-family: Circular Std Bold;
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
 
}

.sub-heading{
    font-family: Circular Std Black;
    font-style: normal;
    font-weight: bold;
    font-size: 26px;
    line-height: 38px;
    letter-spacing: -0.06px;
}

@media (min-width: 600px) {
    .sub-heading{
        font-family: Circular Std Black;
        font-style: normal;
        font-weight: bold;
        font-size: 30px;
        line-height: 38px;
        letter-spacing: -0.06px;
    }
  }

.card-heading{
    font-family: Circular Std Black;
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    letter-spacing: -0.4px;
}

.card-sub-heading{
    font-family: Circular Std Black;
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    color: #909090;
    /* identical to box height */
    text-align: center;
    letter-spacing: -0.3px;
}

.individual{
    font-family: Circular Std Medium;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.3px;
    margin-top: -10px;
    color: #909090;
}

.card{
    cursor: pointer;
}

.card:hover{
    background-color: #FFEDB8;
}

.card:hover .sub-heading{
    color: #FFC000;
}

.card:hover .individual{
    color: rgba(0, 0, 0, 0.4);
}


@media (min-width: 600px) {
    .card-heading{
        font-family: Circular Std Black;
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 25px;
        text-align: center;
        letter-spacing: -0.4px;
    }
    
    .card-sub-heading{
        font-family: Circular Std Black;
        font-style: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 18px;
        color: #909090;
        /* identical to box height */
        text-align: center;
        letter-spacing: -0.3px;
    }
  }

.container{
    width:350px
}

@media (min-width: 600px) {
    .container {
      width: 1170px;
    }
  }

@font-face {
    font-family: 'Circular Std Black';
    src: 
        url('../fonts/Circular Std Book.ttf'),
        url('../fonts/Circular Std Medium.ttf'),
        url('../fonts/CircularSpUIv3T-Bold.ttf'),
        url('../fonts/Circular Std Black.ttf');
        }