.banner-top {
    /*noinspection CssUnknownTarget*/
    background: url("/static/images/png/financial_organization/banner_top.png");
}

.banner-finances {
    /*noinspection CssUnknownTarget*/
    background-image: url("/static/images/png/financial_organiztion/finance.png");
    background-repeat: no-repeat;
    background-position: right -150px bottom;
    background-size: auto 75%;
}

@media screen and (max-width: 769px) {
    .banner-world div img {
        width: 768px !important;
    }
}

@media screen and (min-width: 991px) and (max-width: 1193px) {
    .main-background {
        height: 133px;
    }
}

@media screen and (min-width: 1200px) {
    .banner-finances {
        background-size: auto 80%;
        background-position: left center;
    }
}

@media screen and (min-width: 1500px) {
    .banner-finances {
        padding: 3% 0;
        background-position: left 50px center;
        background-size: auto 75%;
    }
}

@media screen and (min-width: 1800px) {

    .banner-finances {
        padding: 5% 0;
        background-position: left 50px center;
        background-size: auto 90%;
    }
}

.card {
    width: 100%;
    max-width: 285px;
    height: 315px;
    position: relative;
    font-family: sans-serif;
    border: none !important;
}

/* esconder checkbox */
.card input {
    display: none;
}

.card-content {
    cursor: pointer;
}

/* BASE (sempre visível) */
.details {
    position: absolute;
    inset: 0;
    /* border-radius: 1rem; */
    padding: 20px 5px;
    transition: 0.3s;
}

/* esconder conteúdo inicialmente */
.details h5,
.details ul {
    opacity: 0;
    transition: 0.3s;
}

/* HOVER (somente texto, sem fundo) */
.hover {
    position: absolute;
    inset: 0;
    top: 25%;
    bottom: 50%;
    opacity: 0;
    transition: 0.3s;
    text-align: center;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 1rem;
}

/* 👇 texto simples */
.hover .cta {
    color: #000;
    font-size: 14px;
    text-decoration: underline;
}

/* aparece no hover */
.card-content:hover .hover {
    opacity: 1;
}

/* mostrar conteúdo no clique */
.card input:checked+.card-content .details h5,
.card input:checked+.card-content .details ul {
    opacity: 1;
}

/* esconder hover após clique */
.card input:checked+.card-content .hover {
    opacity: 0;
}

.card-1 {
    padding: 1rem;
    border-radius: 1rem !important;
    border: 3px solid #CA7475 !important;
    background: #fff url("/static/images/png/financial_organization/1.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.card-2 {
    padding: 1rem;
    border-radius: 1rem !important;
    border: 3px solid #E78064 !important;
    background: #fff url("/static/images/png/financial_organization/2.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.card-3 {
    padding: 1rem;
    border-radius: 1rem !important;
    border: 3px solid #E78064 !important;
    background: #fff url("/static/images/png/financial_organization/3.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.card-4 {
    padding: 1rem;
    border-radius: 1rem !important;
    border: 3px solid #EED39A !important;
    background: #fff url("/static/images/png/financial_organization/4.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}

.card-5 {
    padding: 1rem;
    border-radius: 1rem !important;
    border: 3px solid #C6D6B7 !important;
    background: #fff url("/static/images/png/financial_organization/5.png");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
}