/* offer section css*/
.tt_country_item {
    position: relative;
    width: 100%;
    padding-top: 75%;
    overflow: hidden;
    display: block;
    -webkit-transition: 0.5s all;
    transition: 0.5s all;
    border-radius: 7px
}

    .tt_country_item::before {
        content: "";
        display: inline-block;
        position: absolute;
        right: 0;
        bottom: 40px;
        width: 26%;
        height: 26%;
        z-index: 1;
        opacity: 0;
        background-image: url(../content/images/beach.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        -webkit-transition: 0.3s all;
        transition: 0.3s all
    }

    .tt_country_item img {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 100%;
        width: auto !important;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-filter: brightness(0.8);
        filter: brightness(0.8);
        cursor: pointer;
        -webkit-transition: 0.5s all;
        transition: 0.5s all
    }

    .tt_country_item .tt_country_name {
        position: absolute;
        height: auto;
        background-color: #fff;
        bottom: calc(50% - 18px);
        left: 3vw;
        right: 3vw;
        border-radius: 50px;
        font-size: 1rem;
        text-align: center;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 0;
        padding: 7px;
        font-weight: 600;
        cursor: pointer !important;
        -webkit-transition: 0.3s all;
        transition: 0.3s all
    }

    .tt_country_item .readMore {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ffbf00;
        text-align: center;
        padding: 7px;
        opacity: 0;
        cursor: pointer;
        -webkit-transition: 0.3s all;
        transition: 0.3s all;
        font-weight: 700;
        color: #222;
    }

    .tt_country_item:hover img {
        -webkit-filter: brightness(0.5);
        filter: brightness(0.5)
    }

    .tt_country_item:hover::before {
        opacity: 1;
        -webkit-animation: blink 2s infinite;
        animation: blink 2s infinite
    }

    .tt_country_item:hover .tt_country_name {
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        opacity: 0
    }

    .tt_country_item:hover .readMore {
        opacity: 1
    }

@-webkit-keyframes blink {
    0% {
        opacity: 0.3
    }

    50% {
        opacity: 0.8
    }

    100% {
        opacity: 0.3
    }
}

@keyframes blink {
    0% {
        opacity: 0.3
    }

    50% {
        opacity: 0.8
    }

    100% {
        opacity: 0.3
    }
}