@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root {
  --red: #C6202D;  
  --blue: #18578C;
  --white: #ffffff; 
  --green: #39B54A;
  --yellow: #FAA61A;
  --text: #58595B;
  --card-bg: #f3f3f5;
}



body{
    background-color: var(--white);
}

div{
    font-family: 'Poppins';
}

.image-layer img{
    width: 140px;
    margin-bottom: 12px;
}

.top-layer .top-header{
    position: fixed;
    z-index: 2000;
}

.card-layer{
    margin-bottom: 28px;
}

.card-layer .card-deck{
    padding: 0 10px;
}

.card-layer .card{
    min-height: 360px;
    border: 1px solid #888888;
    box-shadow: 5px 10px 18px #888888
}

.card-layer .card-body{
    background-color: var(--card-bg);
}

.card-layer .card-title{
    font-size: 15px;
    font-weight: 600;
}

.card-layer .box1 .card-body{
    border-right: 15px solid var(--red);
}

.card-layer .box1 .card-footer{
    border-right: 15px solid var(--red);
}

.card-layer .box2 .card-body{
    border-right: 15px solid var(--blue);
}

.card-layer .box2 .card-footer{
    border-right: 15px solid var(--blue);
}

.card-layer .box3 .card-body{
    border-right: 15px solid var(--yellow);
}

.card-layer .box3 .card-footer{
    border-right: 15px solid var(--yellow);
}

.card-layer .box4 .card-body{
    border-right: 15px solid var(--green);
}

.card-layer .box4 .card-footer{
    border-right: 15px solid var(--green);
}

.card-layer .card-body a{
    text-decoration: none;
}

.card-layer .card-body h5{
    font-size: 14px;
}

.card-layer .card-body p{
    font-size: 12px;
    text-align: left;
}

.card-layer .card-body h5:hover{
    color: var(--text);
}

.card-layer .box1 .card-title{
    color: var(--red);
}

.card-layer .box2 .card-title{
    color: var(--blue);
}

.card-layer .box3 .card-title{
    color: var(--yellow);
}

.card-layer .box4 .card-title{
    color: var(--green);
}

.card-layer .card-text{
    font-size: 12px;
    font-weight: 400;
}

.card-layer .card-footer{
    border: none;
}

.card-layer .box1 .card-footer a{
    color: var(--red);
}

.card-layer .box2 .card-footer a{
    color: var(--blue);
}

.card-layer .box3 .card-footer a{
    color: var(--yellow);
}

.card-layer .box4 .card-footer a{
    color: var(--green);
}

.card-layer .card-footer a{
    font-size: 12px;
    font-weight: 600;
    float: right;
    text-decoration: none;
}

.card-layer .card-footer a:hover{
    color: var(--text);
}

.text-layer{
    text-align: center;
    font-size: 18px;
    color: var(--text);
    margin-bottom: 20px;
}

.text-layer a{
    color: var(--text);
}

footer{
    position: sticky;
}

footer p{
    font-size: 12px;
}

footer .container{
    padding: 0 20px;
}

.down-layer .col-color1{
    background-color: var(--red);
    height: 20px;
}

.down-layer .col-color2{
    background-color: var(--blue);
    height: 20px;
}

.down-layer .col-color3{
    background-color: var(--yellow);
    height: 20px;
}

.down-layer .col-color4{
    background-color: var(--green);
    height: 20px;
}