/* Shared Regions Styles - Expanding Bento Grid */

.modern-country-card {
    cursor: pointer; /* Indicate it's clickable */
    position: relative;
    overflow: hidden;
}

.modern-country-card::after {
    content: '\f067'; /* fa-plus */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 20px;
    right: 20px;
    color: #0088cc;
    font-size: 16px;
    font-weight: 300;
    transition: transform 0.3s ease, color 0.3s ease;
}

.modern-country-card:hover::after {
    color: #2e3790;
    transform: scale(1.1);
}

.modern-country-card.is-expanded {
    background: #ffffff;
    border-color: #0088cc;
    box-shadow: 0 10px 30px rgba(0, 136, 204, 0.15);
    grid-column: 1 / -1; /* Make it take the full width of the row */
}

.modern-country-card.is-expanded::after {
    content: '\f068'; /* fa-minus */
    color: #e74c3c;
    transform: rotate(180deg);
}

.country-details-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, margin-top 0.4s ease;
}

.modern-country-card.is-expanded .country-details-content {
    opacity: 1;
    margin-top: 20px;
    /* border-top: 1px dashed #eef2f9;
    padding-top: 20px; */
}

.country-details-content p {
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

.modern-country-card.is-expanded .image-feature {
    height: 500px;
}


@media only screen and (max-width: 767px){
    .modern-country-card.is-expanded .image-feature {
    height: 170px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .modern-country-card.is-expanded .image-feature {
    height:300px !important;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px){
    .modern-country-card.is-expanded .image-feature {
    height:250px !important;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1450px){
    .modern-country-card.is-expanded .image-feature {
    height:350px !important;
    }
}


.modern-country-card.is-expanded  .image-feature .image-feature-overlay{
    opacity: 0;
}