.card{
    height: 500px;
}

@media (min-width: 389px) and (max-width: 576px){
    .card-header h4{
      font-size: 1rem !important;
    }

    .card{
        height: 450px;
    }

    .card-header{
        height: 50px !important;
    }
  
    .subtitle{
      font-size: 0.8rem;
    }
  
    .card-body{
      font-size: 0.8rem !important;
    }

    .btn{
        font-size: 0.7rem;
    }

  }
  
  @media (min-width: 347px) and (max-width: 388px){
    .card-header h4{
        font-size: 1rem !important;
      }
  
      .card{
          height: 420px;
      }
  
      .card-header{
          height: 50px !important;
      }
    
      .subtitle{
        font-size: 0.8rem;
      }
    
      .card-body{
        font-size: 0.8rem !important;
      }
  
      .btn{
          font-size: 0.7rem;
      }
  }
  
  @media (min-width: 309px)  and (max-width: 347px){
    .card-header h4{
        font-size: 1rem !important;
      }
  
      .card{
          height: 400px;
      }
  
      .card-header{
          height: 40px !important;
      }
    
      .subtitle{
        font-size: 0.7rem;
      }
    
      .card-body{
        font-size: 0.7rem !important;
      }
  
      .btn{
          font-size: 0.6rem;
      }
}

@media (max-width: 280px){
    .esri{
        height:16px !important;
    }

    .logo{
        height: 40px !important;
    }
}
@media (min-width: 280px) and (max-width: 339px){
    .esri{
        height: 20px !important;
    }
}
@media (max-width: 309px){
    .card-header h4{
        font-size: 0.9rem !important;
      }
  
      .card{
          height: 350px;
      }
  
      .card-header{
          height: 40px !important;
      }
    
      .subtitle{
        font-size: 0.66rem;
      }
    
      .card-body{
        font-size: 0.66rem !important;
      }
  
      .btn{
          font-size: 0.5rem;
      }
}

.card-header{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-light{
    font-weight: 500;
    font-size: 0.875rem;
  }