body {
}

.top-heading {
    margin-top: 25px;
}

    .top-heading p:nth-of-type(1) {
        color: #1b49d8;
        font-size: 46px;
        font-weight: 500;
        line-height: 35px;
        text-align: center;
    }

    .top-heading p:nth-of-type(2) {
        font-size: 30px;
        font-weight: 300;
        line-height: 46px;
        color: #000000;
        text-align: center;
    }

    .top-heading p:nth-of-type(3) {
        font-size: 18px;
        font-weight: 300;
        line-height: 20px;
        color: #000000;
        text-align: center;
    }

.hover-image-part {
    margin-top: 15px;
    margin-bottom: 15px;
}


.inner-part {
    position: relative;
    height: 100%;
}

.country-image-name {
    position: absolute;
    top: 10px;
    right: 10px;
}

    .country-image-name p {
        background: white;
        padding: 0px 18px;
        border-radius: 25px;
        color: #000000;
        font-weight: 500;
        font-size: 15px;
    }

.name-it {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 80%;
    transform: translateX(-50%);
    text-align: center;
}

    .name-it p {
        color: #ffffff;
        font-size: 18px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 5px;
        background: rgb(45 44 44 / 59%);
        margin: 0;
    }


.hover-bg {
    display: flex;
    width: 100%;
    height: 350px;
    border: 1px solid #cecece;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    cursor: pointer;
}

.half-image-one {
    background-position: center !important;
    width: 40% !important;
    height: 350px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    display: flex !important;
    background-size: cover !important;
    flex-direction: column !important;
    justify-content: flex-end;
    align-items: center !important;
    padding-bottom: 25px !important; /* Adjust padding as needed */
}




.inner-arrow,
.inner-half-text {
    text-align: center;
    margin-top: 12px;
}

    .inner-arrow img {
        max-width: 100%;
        height: 35px;
    }

inner-half-text {
    margin-top: 15px;
}

.inner-half-text p {
    margin: 0;
    border-radius: 8px;
    padding: 5px;
    background: rgba(229, 229, 229, 0.43);
    color: #ffffff;
    font-family: "Alike Angular", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 13.794px;
    text-align: center;
    white-space: nowrap;
}


.half-content {
    width: 60%;
    margin: 0px 9px;
    padding: 9px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #FFFFFF;
}


    .half-content p:nth-of-type(1) {
        color: #000000;
        font-size: 18px;
        font-weight: 700;
        line-height: 21.132px;
        letter-spacing: -0.36px;
    }

    .half-content p:nth-of-type(2) {
        font-size: 15px;
        font-weight: 500;
        line-height: 16.523px;
        letter-spacing: -0.24px;
        color: #787878;
    }

.main-hover {
    position: relative;
    width: 100%;
    /* Adjust height as needed */
    border-radius: 10px;
    overflow: hidden;
}

.image-bg-one {
    background-position: center !important;
    background-size: cover !important;
    height: 350px !important;
    transition: opacity 0.5s ease !important;
    cursor: pointer !important;
}


.hover-bg {
}

.main-hover:hover .image-bg-one {
    opacity: 0;
}

.main-hover:hover .image-bg-two {
    opacity: 0;
}

.main-hover:hover .image-bg-three {
    opacity: 0;
}

.main-hover:hover .image-bg-four {
    opacity: 0;
}

.main-hover:hover .hover-bg {
    opacity: 1;
}

@media only screen and (max-width: 768px) {


    .image-bg,
    .hover-bg {
    }

    .name-it {
        font-size: 14px;
    }

    .half-image-one,
    .half-image-two,
    .half-image-three,
    .half-image-four {
        width: 80%;
    }

    .top-heading p:nth-of-type(1) {
        font-size: 36px;
        line-height: 30px;
    }

    .top-heading p:nth-of-type(2) {
        font-size: 24px;
        line-height: 36px;
    }

    .top-heading p:nth-of-type(3) {
        font-size: 16px;
        line-height: 18px;
    }
}



@media only screen and (max-width: 468px) {

    /*.inner-part {
        position: relative;
        height: auto;
    }*/
    .half-image-one,
    .half-image-two,
    .half-image-three,
    .half-image-four {
        width: 80%;
    }

    .image-bg,
    .hover-bg {
    }

    .name-it {
        font-size: 12px;
    }

    .half-image {
        width: 100%;
    }

    .half-content {
        width: 100%;
    }

        .half-content p:nth-of-type(1) {
            font-size: 12px;
            line-height: 12px;
            margin-top: 12px;
        }

        .half-content p:nth-of-type(2) {
            font-size: 12px;
        }

    .top-heading p:nth-of-type(1) {
        font-size: 28px;
        line-height: 25px;
    }

    .top-heading p:nth-of-type(2) {
        font-size: 20px;
        line-height: 30px;
    }

    .top-heading p:nth-of-type(3) {
        font-size: 14px;
        line-height: 16px;
    }

    .hover-image-part {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

.hover-image-part .col-md-3 {
    padding: 0 15px;
    margin-top: 15px;
}