/* WHY SECTION */
.why-section {
    padding: 120px 0;
    position: relative;
}

.why-section .subtitle {
    font-size:18px;
    color:#6c6c7a;
    width:450px;
    margin:0 auto; /* vycentruje blok */
}

/* karta */
.why-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 30px 25px;
    border-radius: 28px;
    height: 100%;
    text-align: center;
}

.why-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    z-index: 1;
}

.why-card .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.why-card .card-body p {
    flex: 1;
}

.why-card * {
    position: relative;
    z-index: 2;
}

/* hover */
.why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

/* obrázek */
.why-card img {
    width: 90px;
    margin: 10px auto 20px;
    display: block;
}

/* title */
.why-card h5 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-title);
}

/* text */
.why-card p {
    font-size: 16px;
    color: #7c7c8b;
    margin-bottom: 20px;
}

/* tlačítko */
.btn-card {
    margin-top: auto;
    border-radius: 40px;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    color: white;
}

/* barevné varianty */
.row .col-lg-3:nth-child(1) .why-card {
    background: url("/themes/pohadka/images/card-bg.png") center no-repeat;
    background-size: contain;
    background-color: #fff3df;
}

.row .col-lg-3:nth-child(1) .btn-card {
    background: #f6c64b;
    color: #fff !important;
}

.row .col-lg-3:nth-child(2) .why-card {
    background: url("/themes/pohadka/images/clouds-bg.png") center no-repeat;
    background-size: cover;
    background-color: #e9f3f7;
}

.row .col-lg-3:nth-child(2) .btn-card {
    background: var(--btn-success);
    color: #fff !important;
}

.row .col-lg-3:nth-child(3) .why-card {
    background: url("/themes/pohadka/images/heards-bg.png") center no-repeat;
    background-size: cover;
    background-color: #fde7ea;
}

.row .col-lg-3:nth-child(3) .btn-card {
    background: #f48da3;
    color: #fff !important;
}

.row .col-lg-3:nth-child(4) .why-card {
    background: url("/themes/pohadka/images/flowers-bg.png") center no-repeat;
    background-size: cover;
    background-color: #fff1e6;
}

.row .col-lg-3:nth-child(4) .btn-card {
    background: #f49c6b;
    color: #fff !important;
}