:root {
    --white: #ffffff;
    --gray: #666666;
    --black: #000000;
    --green-bg:#99cd85;
    --dark-blue:#172346;
    --golden-yellow:#c4a034;
}

.footer-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 20px;
    background-color: var(--white);
}

.contact-item{
    display: flex;
    flex: 1 1 calc(33.333% - 14px);
    min-width: 300px;
    max-width: 400px;

    border-radius: 15px;
    overflow: hidden;
}

.icon-area{
    background-color: var(--golden-yellow);
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    color: var(--white);
    padding: 10px 0;
}

.info-area{
    background-color: var(--dark-blue);
    width: 100%;
    color: white;
    padding: 15px 20px;
}

.info-area .title{
    font-size:1.5em;
    font-weight: bold;
    margin: 0 0 5px 0;
    text-align: center;
}

.info-area .data{
    font-size: 1em;
    margin: 2px 0;
    text-align: center;
}

.info-area a {
    color: var(--white);
    text-decoration: none; 
    transition: color 0.3s ease; 
}

.info-area a:hover {
    color: #c0c0c0; 
}

.footer-bottom {
    border-top: 1px solid #3a3a3a;
    padding: 5px 5% 10px 5%; 
    text-align: center;
    font-size: 0.85em;
    color: #000;
}

@media (max-width: 900px) {
    .contact-item{
        flex: 1 1 100%;
        max-width: 500px;
    }
}

@media (max-width: 600px) {
    .footer-container{
        padding: 20px 10px;
    }

    .contact-item{
        width: 95vw;
        max-width: 95vw;
        min-width: 95vw;
    }

}